:root{--ink:#101d42;--muted:#79839b;--accent:#5450f5;--line:#e2e5ee;font-family:"Noto Sans",Arial,sans-serif;color:var(--ink);background:#f6f5fc}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 72% 43%,#e7e4fa00 10%,#f6f5fc 70%)}header{position:absolute;z-index:2;top:32px;left:4vw;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}.version{border-left:1px solid #d5d7e3;margin-left:10px;padding-left:20px;color:var(--muted);font-weight:400}main{position:relative;min-height:850px;height:100vh;max-height:1200px}.intro{position:absolute;z-index:1;top:22%;left:4vw;width:30%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:700}h1{font-size:clamp(38px,4.5vw,74px);letter-spacing:-.055em;line-height:1.07;margin:24px 0}em{font-style:normal;color:var(--accent)}.lead{max-width:320px;font-size:16px;line-height:1.8;color:var(--muted)}.instruction{margin-top:34px;font-size:13px;color:var(--muted)}.instruction span{font-size:22px;margin-right:8px;color:var(--accent)}#viewport{position:absolute;left:32%;right:0;top:3%;height:70%;touch-action:pan-y}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-8px;border-radius:20px}.dock{position:absolute;bottom:72px;left:37%;right:7%;text-align:center}nav{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}button{font:inherit;color:var(--muted);cursor:pointer;border:0;background:transparent;padding:11px 18px;border-radius:24px;transition:background .2s,color .2s}nav button{font-size:13px}button:hover{color:var(--accent);background:#eeecfc}button[aria-pressed=true]{color:var(--accent);background:#e9e6fb}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.description{margin-top:22px;min-height:110px}.description span{font-size:10px;color:var(--accent);letter-spacing:.13em;font-weight:700}.description h2{font-size:19px;letter-spacing:-.02em;margin:11px 0 6px}.description p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}footer{position:absolute;bottom:18px;left:4vw;right:4vw;display:flex;align-items:center;gap:4px;font-size:12px}footer span{margin-left:auto;color:var(--muted)}footer button{padding:9px 12px}#fallback{width:100%;height:100%;display:grid;place-content:center;text-align:center}#fallback[hidden]{display:none}#fallback img{width:100%}#fallback p{font-size:13px;color:var(--muted)}body.embed{background:transparent}body.embed header,body.embed .intro,body.embed footer{display:none}body.embed main{min-height:0;height:100vh}body.embed #viewport{left:0;top:0;height:86%}body.embed .dock{left:4%;right:4%;bottom:0}body.embed .description{min-height:65px;margin-top:12px}body.embed .description h2{font-size:16px}body.embed .description p,body.embed .description span{display:none}@media(max-width:760px){header{top:22px;left:6vw;font-size:12px}.version{font-size:11px}main{min-height:920px;max-height:none;height:100vh}.intro{left:7%;top:92px;width:86%}h1{font-size:43px;margin:12px 0;line-height:1.08}h1 br{display:none}h1 br:after{content:' '}.lead{max-width:85%;font-size:14px;line-height:1.65;margin-top:15px}.eyebrow{font-size:10px}.instruction{margin-top:16px;font-size:12px}#viewport{left:0;top:330px;height:390px}.dock{left:5%;right:5%;bottom:60px}nav{gap:0}nav button{font-size:12px;padding:10px 12px}.description{min-height:85px}.description h2{font-size:17px}footer{position:absolute;top:886px;bottom:auto;font-size:10px}footer button{padding:8px}.embed #viewport{top:0;height:84%}.embed main{min-height:0}.embed .dock{bottom:0}.embed footer{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#viewport canvas{mask-image:linear-gradient(to right,transparent,black 3%,black 97%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 3%,black 97%,transparent)}


/* Osadzenie w ciemnej sekcji strony: tło bierze gospodarz, podpis jaśnieje.
   Dotyczy wyłącznie embed.html (klasa na <html>), index.html zostaje jasny. */
html.osadzony{background:transparent}
html.osadzony body{background:transparent}
html.osadzony .description h2{color:#fff}
html.osadzony .description span{color:#aab2ff}

html.osadzony,html.osadzony body{overflow:hidden}

/* Osadzenie bez podpisu: scena zajmuje całą ramkę.
   Elementy #step/#title/#detail zostają w DOM, bo app.js do nich pisze. */
html.osadzony .dock{display:none}
html.osadzony #viewport{top:0;height:100%}

/* Wygaszanie dołu sceny, żeby wtapiała się w tło sekcji (boki maskuje reguła wyżej). */
html.osadzony #viewport canvas{
  -webkit-mask-image:linear-gradient(to right,transparent,black 3%,black 97%,transparent),linear-gradient(to bottom,black 72%,transparent);
  mask-image:linear-gradient(to right,transparent,black 3%,black 97%,transparent),linear-gradient(to bottom,black 72%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Przeciąganie sceny nie ma zaznaczać tekstu ani podnosić menu obrazka. */
html.osadzony,html.osadzony body,html.osadzony #viewport,html.osadzony canvas{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
html.osadzony canvas{-webkit-tap-highlight-color:transparent}