*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
canvas#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.35); pointer-events: none; }
.center-content { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.piktogram-row { display: flex; gap: 64px; }
.pikto { cursor: pointer; text-align: center; opacity: 0.7; transition: opacity 0.3s; }
.pikto:hover { opacity: 1; }
.pikto-label { margin-top: 12px; font-weight: 500; }
.honung { position: absolute; left: -9999px; }
#form-view { gap: 16px; }
#form-text { max-width: 400px; text-align: center; line-height: 1.8; }
#form-text .bold { font-weight: 500; }
#kontakt-form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 320px; }
.epost-wrap { position: relative; width: 100%; }
#kontakt-form input[type="email"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 0; border: none; background: transparent; caret-color: transparent; outline: none; z-index: 2; }
.spegel { position: relative; width: 100%; min-height: 27px; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 8px 0; text-align: center; cursor: text; z-index: 1; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; pointer-events: auto; }
.epost-wrap:focus-within .spegel { border-bottom-color: #fff; }
.spegel .placeholder { color: rgba(255,255,255,0.35); }
.spegel .markur { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.spegel .char { display: inline-block; }
.spegel .char.annorlunda-rot { animation: svamprot 3s ease-in-out infinite alternate; }
@keyframes svamprot { 0% { transform: rotate(-8deg); } 100% { transform: rotate(8deg); } }
.spegel .char.lugnt-fade { opacity: 0; transform: translateY(4px); transition: opacity 0.6s, transform 0.6s; }
.spegel .char.lugnt-visible { opacity: 1; transform: translateY(0); }
.spegel .char.snabbt-darr { animation: darr 0.12s infinite; }
@keyframes darr { 0% { transform: translate(0,0) rotate(0); } 25% { transform: translate(1px,-1px) rotate(3deg); } 50% { transform: translate(-1px,1px) rotate(-2deg); } 75% { transform: translate(1px,0) rotate(-3deg); } 100% { transform: translate(-1px,-1px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .spegel .char.annorlunda-rot, .spegel .char.snabbt-darr { animation: none; } }
#kontakt-form button { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; padding: 8px 24px; cursor: pointer; transition: border-color 0.3s; }
#kontakt-form button:hover { border-color: #fff; }
#valj-annan { color: #fff; text-decoration: none; opacity: 0.4; margin-top: 8px; }
#valj-annan:hover { opacity: 1; }
#bekraftelse { gap: 16px; text-align: center; }
#bekr-text { max-width: 400px; line-height: 1.8; }
#bekr-text .bold { font-weight: 500; }
#strip { position: fixed; bottom: 0; left: 0; right: 0; padding: 4px 16px; z-index: 10; background: rgba(0,0,0,0.7); line-height: 1.5; }
.strip-flex { display: flex; justify-content: space-between; align-items: center; }
#strip-left { opacity: 0.5; }
#strip-center { opacity: 0.4; }
.strip-right-nav { text-align: right; }
.strip-nav { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.strip-nav:hover { opacity: 0.7; }
.strip-nav svg { vertical-align: middle; }
.strip-sep { margin: 0 6px; opacity: 0.4; }