/* ILUN GAMES – studio site.
   Paper-warm toy box: the logo's three characters (purple pill, coral G, yellow
   blob) and its ink set the look; each game section switches to that game's
   own world (deep space for Orbit Switch, harbor paper for BOATLOOP). */

@font-face{font-family:"Orbitron";src:url(assets/fonts/Orbitron-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(assets/fonts/Baloo2-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}

:root{color-scheme:light;
  --paper:#fcf8f3; --paper-2:#f5ecdf; --card:#fffdf9; --ink:#402a26; --muted:#7b665b; --line:#eadfd3;
  --purple:#cda6fc; --violet:#8979f7; --coral:#fc806b; --yellow:#fdd762; --yellow-deep:#e0b21f; --mint:#b8d96a;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --out:cubic-bezier(.16,1,.3,1); --pop:cubic-bezier(.3,1.45,.5,1);
  --gutter:clamp(18px,4vw,32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;position:relative;overflow-x:clip;background:var(--paper);color:var(--ink);
  font:500 clamp(16px,.95rem + .25vw,18.5px)/1.65 var(--round)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.09em}
img{max-width:100%}
p{margin:.6em 0}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- floating shapes behind everything ---------- */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sky i{position:absolute;display:block;translate:calc(var(--mx,0)*var(--d,1)*1px) calc(var(--my,0)*var(--d,1)*1px + var(--sy,0)*var(--s,0)*1px);will-change:translate}
.sky-pill{--d:-22;--s:-.12;top:150px;inset-inline-start:-46px;width:96px;height:210px;border-radius:60px;background:linear-gradient(#cda6fc 58%,#8979f7 58%);rotate:24deg;opacity:.55;animation:drift 11s ease-in-out infinite}
.sky-blob{--d:16;--s:-.2;top:560px;inset-inline-end:-50px;width:170px;height:118px;border-radius:58% 42% 50% 50%/62% 58% 42% 38%;background:var(--yellow);opacity:.5;animation:drift 13s ease-in-out infinite reverse}
.sky-ring{--d:-12;--s:-.08;top:1120px;inset-inline-start:5%;width:110px;height:110px;border-radius:50%;border:16px solid var(--coral);opacity:.3;animation:drift 9s ease-in-out infinite}
.sky-star,.sky-star2{--d:28;--s:-.3;top:340px;inset-inline-end:14%;width:34px;height:34px;background:var(--mint);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:spin 14s linear infinite}
.sky-star2{--d:-30;--s:-.24;top:1500px;inset-inline-start:12%;inset-inline-end:auto;width:26px;height:26px;background:var(--purple);animation-duration:19s}
.sky-spark{--d:20;--s:-.16;top:820px;inset-inline-start:9%;width:44px;height:44px;opacity:.5}
.sky-spark::before,.sky-spark::after{content:"";position:absolute;width:9px;border-radius:9px;background:var(--ink)}
.sky-spark::before{height:30px;left:6px;top:0;rotate:-28deg}
.sky-spark::after{height:26px;left:26px;top:14px;rotate:-58deg}
.sky-dot{--d:-18;--s:-.34;top:1900px;inset-inline-end:8%;width:22px;height:22px;border-radius:50%;background:var(--coral);opacity:.45;animation:drift 7s ease-in-out infinite}
.sky-pill2{--d:14;--s:-.1;top:2300px;inset-inline-end:-30px;width:70px;height:150px;border-radius:50px;background:var(--mint);rotate:-20deg;opacity:.4;animation:drift 12s ease-in-out infinite}
@media(max-width:560px){.sky-blob{top:760px;opacity:.32}.sky-pill{opacity:.4}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
header.site{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.brand img{width:57px;height:40px;object-fit:contain;view-transition-name:brand;transition:rotate .5s var(--pop),scale .5s var(--pop)}
.brand:hover img{rotate:-8deg;scale:1.1}
header.site nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
header.site nav a{padding:7px 14px;border-radius:999px;text-decoration:none;font-weight:800;color:var(--muted);transition:background-color .25s,color .25s,scale .25s var(--pop)}
header.site nav a:hover{background:var(--paper-2);color:var(--ink)}
header.site nav a:active{scale:.94}
header.site nav a[aria-current]{background:var(--yellow);color:var(--ink)}
.lang-jump{display:inline-flex;align-items:center;gap:6px;font-size:.88em;border:1.5px solid var(--line)}
@media(max-width:560px){header.site nav{width:100%;margin-inline:-6px}header.site nav a{padding:6px 11px}}

/* ---------- the logo, cut into pieces ---------- */
.logo{position:relative;width:100%;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.logo-piece{position:absolute;display:block;transform-origin:50% 62%;cursor:pointer}
.logo-piece img{display:block;width:100%;height:100%;pointer-events:none}
.logo-eye{position:absolute;display:block;background:var(--ink);border-radius:999px;translate:var(--ex,0px) var(--ey,0px);transition:translate .14s linear,scale .1s}
.blink .logo-eye{scale:1 .08}
.sleepy .logo-eye{scale:1 .12;transition:scale .6s}

.logo-pill{transform-origin:50% 92%}
.logo-blob{transform-origin:50% 100%}
.logo-spark{transform-origin:0% 100%}
.logo-pill{animation:in-pill .95s var(--pop) both,sway 7s ease-in-out 1s infinite}
.logo-blob{animation:in-blob .95s var(--out) .16s both,breathe 4.6s ease-in-out 1.2s infinite}
.logo-gee{animation:in-gee 1s var(--out) .34s both,bob 5.6s ease-in-out 1.4s infinite}
.logo-spark{animation:in-spark .5s var(--pop) calc(.8s + var(--i)*.1s) both,twinkle 5s ease-in-out calc(2s + var(--i)*.2s) infinite}
.logo-letter{animation:in-letter .7s var(--pop) calc(.5s + var(--i)*.045s) both;transition:translate .35s var(--pop),rotate .35s var(--pop)}
.logo-letter:hover{translate:0 -16%;rotate:calc((var(--i) - 5)*1.6deg)}
@keyframes in-pill{0%{opacity:0;transform:translateY(46%) rotate(-22deg) scale(.6)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes in-blob{0%{opacity:0;transform:translateY(70%) scale(.5,.3)}50%{opacity:1;transform:translateY(-7%) scale(.95,1.09)}74%{transform:translateY(0) scale(1.05,.94)}100%{opacity:1;transform:none}}
@keyframes in-gee{0%{opacity:0;transform:translate(46%,-95%) rotate(170deg) scale(.7)}62%{opacity:1;transform:translate(0,5%) rotate(-9deg)}100%{opacity:1;transform:none}}
@keyframes in-spark{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}
@keyframes in-letter{0%{opacity:0;transform:translateY(95%) rotate(calc((var(--i) - 5)*5deg))}100%{opacity:1;transform:none}}
@keyframes sway{0%,100%{rotate:-1.2deg}50%{rotate:1.6deg}}
@keyframes breathe{0%,100%{scale:1 1}50%{scale:1.025 .968}}
@keyframes bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3.5%;rotate:3deg}}
@keyframes twinkle{0%,80%,100%{scale:1}86%{scale:.5}93%{scale:1.22}}
/* poked pieces */
.logo-pill.boop{animation:boop-pill .7s var(--out),sway 7s ease-in-out .7s infinite}
.logo-blob.boop{animation:boop-blob .6s var(--out),breathe 4.6s ease-in-out .6s infinite}
.logo-gee.boop{animation:boop-gee .8s var(--out),bob 5.6s ease-in-out .8s infinite}
.logo-spark.boop{animation:boop-spark .5s var(--out)}
@keyframes boop-pill{0%{transform:none}25%{transform:rotate(9deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:none}}
@keyframes boop-blob{0%{transform:none}28%{transform:scale(1.14,.78)}60%{transform:scale(.94,1.1) translateY(-6%)}100%{transform:none}}
@keyframes boop-gee{0%{transform:none}100%{transform:rotate(360deg)}}
@keyframes boop-spark{0%{transform:none}40%{transform:scale(1.6)}100%{transform:none}}
/* replay: restart every entrance */
.logo.rewind .logo-piece{animation:none}

/* ---------- hero ---------- */
.hero{display:grid;justify-items:center;text-align:center;padding-block:clamp(20px,5vh,64px) clamp(44px,9vh,110px)}
.hero-logo{width:min(470px,82vw);transform:translate(var(--ix,0px),var(--iy,0px)) scale(var(--is,1));transition:transform 1.1s var(--out)}
.hero-lead{max-width:30em;margin:clamp(14px,3vh,30px) auto 0;font-size:clamp(19px,1.1rem + .7vw,26px);line-height:1.4;font-weight:700;color:var(--muted);text-wrap:balance}
.js .hero-lead .w{display:inline-block;opacity:0;translate:0 .7em;animation:word .8s var(--out) calc(1.1s + var(--i)*.04s) forwards}
@keyframes word{to{opacity:1;translate:0 0}}

/* intro: the logo assembles alone in the middle of the screen, then the site rises around it */
.intro,.intro body{overflow:hidden}
.intro header.site,.intro .worlds,.intro .about,.intro footer.site,.intro .sky{opacity:0}
.intro:not(.intro-go) .logo-piece,.intro .hero-lead .w{animation-play-state:paused}
.intro-out header.site,.intro-out .worlds,.intro-out .about,.intro-out footer.site,.intro-out .sky{animation:rise 1s var(--out) both}
.intro-out .worlds{animation-delay:.25s}.intro-out .about,.intro-out footer.site{animation-delay:.35s}
.intro-out header.site{animation-name:drop}
.intro-out .hero-lead .w{animation-delay:calc(.2s + var(--i)*.04s)}
@keyframes rise{from{opacity:0;translate:0 40px}}
@keyframes drop{from{opacity:0;translate:0 -24px}}

/* ---------- section titles ---------- */
.title{font-size:clamp(30px,1.4rem + 2.6vw,48px);margin-bottom:.7em}
.title span{position:relative;display:inline-block;padding-bottom:.22em}
.title span::after{content:"";position:absolute;inset-inline:0;bottom:0;height:.2em;background:var(--coral);border-radius:9px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 5c5.300-6 10.700-6 16 0s10.700 6 16 0' fill='none' stroke='%23000' stroke-width='3.500' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/32px 100% repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 5c5.300-6 10.700-6 16 0s10.700 6 16 0' fill='none' stroke='%23000' stroke-width='3.500' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/32px 100% repeat-x;
  animation:wave 1.8s linear infinite}
@keyframes wave{to{-webkit-mask-position:32px 50%;mask-position:32px 50%}}

/* ---------- buttons, tags ---------- */
.btn{display:inline-block;background:var(--yellow);color:#3a2a10;font-weight:900;text-decoration:none;padding:14px 26px;border-radius:999px;
  box-shadow:0 6px 0 var(--yellow-deep);transition:translate .18s var(--out),box-shadow .18s var(--out),scale .3s var(--pop)}
.btn:hover{translate:0 2px;box-shadow:0 4px 0 var(--yellow-deep)}
.btn:active{translate:0 6px;box-shadow:0 0 0 var(--yellow-deep);scale:.98}
.btn.soon{cursor:default;opacity:.92}
.btn.soon:hover,.btn.soon:active{translate:none;scale:none;box-shadow:0 6px 0 var(--yellow-deep)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.tags span{font-size:13px;font-weight:800;padding:3px 11px;border-radius:999px;background:var(--line);color:var(--muted)}

/* ---------- scroll reveals ---------- */
.js .reveal{opacity:0;translate:0 30px;transition:opacity .9s var(--out),translate .9s var(--out),scale .9s var(--out);transition-delay:calc(var(--ri,0)*80ms)}
.js .reveal.in{opacity:1;translate:0 0}
.js .world.reveal{scale:.95}
.js .world.reveal.in{scale:1}

/* ---------- game worlds ---------- */
.worlds{padding-block:clamp(10px,3vw,30px)}
.world{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);border-radius:clamp(28px,4vw,48px);overflow:hidden;margin-block:clamp(22px,4vw,44px);min-height:clamp(440px,48vw,580px)}
.world-boat{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.world-boat .world-stage{order:2}
.world-stage{position:relative;min-height:340px}
.world-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:clamp(26px,4.4vw,54px)}
.world-copy p{margin:0}
.world-icon{width:96px;height:96px;border-radius:23%;box-shadow:0 14px 30px -12px #0008;transition:rotate .6s var(--pop),scale .6s var(--pop)}
.world:hover .world-icon{rotate:-6deg;scale:1.06}
.world-name{font-size:clamp(28px,1.2rem + 2.2vw,42px)}
.world-tagline{font-weight:900;font-size:1.12em}
.world-text{max-width:26em}
.world .btn{margin-top:8px}
@media(max-width:820px){
  .world,.world-boat{grid-template-columns:minmax(0,1fr)}
  .world-boat .world-stage{order:0}
  .world-stage{aspect-ratio:1/1;min-height:0}
}

.world-orbit{color:#eef3ff;background:radial-gradient(120% 70% at 18% 0%,#3c1f7480,transparent 62%),radial-gradient(90% 60% at 92% 100%,#0f3d7480,transparent 62%),#070a14}
.world-orbit .world-name{font-family:"Orbitron",var(--round);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#ffd633;text-shadow:0 0 22px #ffd63370}
.world-orbit .world-tagline{color:#80e0ff}
.world-orbit .world-text{color:#b4c2de}
.world-orbit .tags span{background:#ffffff16;color:#c9d6f2}
.world-orbit .btn{background:#ffd633;color:#2a2205;box-shadow:0 6px 0 #a8850a}
.world-orbit .btn:hover{box-shadow:0 4px 0 #a8850a}
.world-orbit .btn:active{box-shadow:0 0 0 #a8850a}

.world-boat{color:#294843;background:#f6efdd}
.world-boat .world-name{font-family:"Baloo 2",var(--round);font-weight:800;font-size:clamp(38px,1.5rem + 3.4vw,62px);letter-spacing:.01em;line-height:.9}
.world-boat .world-tagline{color:#2d6f61}
.world-boat .world-text{color:#4d6058}
.world-boat .tags span{background:#e9dfc7;color:#4d6058}
.world-boat .btn{background:#2d6f61;color:#f6efdd;box-shadow:0 6px 0 #1b4a40}
.world-boat .btn:hover{box-shadow:0 4px 0 #1b4a40}
.world-boat .btn:active{box-shadow:0 0 0 #1b4a40}
.world-boat.night{color:#e9edda;background:#192d26}
.world-boat.night .world-tagline{color:#a2d0a6}
.world-boat.night .world-text{color:#adc4ad}
.world-boat.night .tags span{background:#263e33;color:#adc4ad}
.world-boat.night .btn{background:#9ac59e;color:#132e2a;box-shadow:0 6px 0 #5f8b68}
.world-boat{transition:background-color .7s,color .7s}

/* ---------- live demos ---------- */
.demo{position:absolute;inset:0}
.demo canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.demo canvas:focus-visible{outline-offset:-6px;border-radius:24px}
.demo-hint{position:absolute;inset-inline:12px;bottom:7%;margin:0;text-align:center;font-weight:900;letter-spacing:.05em;pointer-events:none;transition:opacity .5s;animation:hint 1.7s ease-in-out infinite}
.demo.touched .demo-hint{opacity:0}
@keyframes hint{0%,100%{scale:1;opacity:1}50%{scale:1.05;opacity:.72}}
.demo-orbit .demo-hint{font-family:"Orbitron",var(--round);text-transform:uppercase;color:#66d9ff;text-shadow:0 0 14px #66d9ff80;font-size:clamp(13px,1.6vw,17px)}
.demo-boat .demo-hint{bottom:2.2%;color:#2d6f61;font-size:clamp(15px,1.8vw,19px)}
.night .demo-boat .demo-hint{color:#a2d0a6}
.demo-btn{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:15px;cursor:pointer;color:inherit;background:#ffffff1c;transition:scale .25s var(--pop),background-color .25s}
.demo-btn:hover{scale:1.08}.demo-btn:active{scale:.92}
.demo-btn[hidden]{display:none}
.demo-switch{top:auto;bottom:14px;background:#ffd633;color:#2a2205;animation:pop-in .5s var(--pop)}
@keyframes pop-in{from{scale:0}}
.demo-sound[aria-pressed=false] .on,.demo-sound[aria-pressed=true] .off{display:none}
.demo-boat .demo-btn{background:#29484318}
.night .demo-boat .demo-btn{background:#e9edda1f}
.demo-theme[aria-pressed=false] .moon,.demo-theme[aria-pressed=true] .sun{display:none}

/* ---------- game pages ---------- */
.stage{margin-inline:clamp(8px,2vw,24px);border-radius:clamp(28px,4vw,52px);overflow:hidden}
.stage-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(16px,4vw,48px);padding-block:clamp(22px,4vw,48px)}
.stage-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stage-copy p{margin:0}
.stage .world-icon{width:clamp(96px,12vw,132px);height:auto;aspect-ratio:1}
.stage .world-name{font-size:clamp(34px,1.4rem + 3.6vw,60px)}
.world-boat.stage .world-name{font-size:clamp(46px,1.8rem + 5vw,84px)}
.stage .world-tagline{font-size:clamp(19px,1rem + 1vw,26px)}
.stage-demo{position:relative;width:100%;aspect-ratio:1/1;max-height:min(640px,78vh);justify-self:center}
@media(max-width:820px){
  .stage-in{grid-template-columns:minmax(0,1fr)}
  .stage-copy{align-items:center;text-align:center}
  .stage-copy .tags{justify-content:center}
}

.shots{display:flex;justify-content:center;gap:clamp(12px,3vw,40px);padding-block:clamp(48px,8vw,100px) clamp(28px,5vw,60px)}
.phone{margin:0;flex:0 1 250px;padding:8px;border-radius:40px;background:#17171d;box-shadow:0 34px 60px -34px #402a2690;
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .6s var(--out);transform-style:preserve-3d}
.phone img{display:block;width:100%;height:auto;border-radius:32px}
.phone:nth-child(1){--r:-5deg;--y:22px}
.phone:nth-child(3){--r:5deg;--y:22px}
.phone:hover{--r:0deg;--y:-12px;z-index:2}
@media(max-width:700px){
  .shots{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter)}
  .shots::-webkit-scrollbar{display:none}
  .phone,.phone:nth-child(n){flex:0 0 64vw;--r:0deg;--y:0px;scroll-snap-align:center}
}

.game-about{max-width:860px}
.game-intro{font-size:clamp(19px,1.05rem + .7vw,25px);line-height:1.45;font-weight:700;text-wrap:pretty}
.features{list-style:none;margin:clamp(20px,4vw,40px) 0 0;padding:0}
.features li{position:relative;padding-inline-start:52px;margin-block:18px}
.features li::before,.features li::after{content:"";position:absolute;top:.12em}
.theme-orbit .features li::before{inset-inline-start:0;width:30px;height:30px;border-radius:50%;border:3px solid var(--violet);opacity:.75}
.theme-orbit .features li::after{inset-inline-start:10px;width:10px;height:10px;margin-top:-3px;border-radius:50%;background:#ffc21a;box-shadow:0 0 8px #ffc21a;transform-origin:5px 18px;animation:spin calc(2.6s + var(--ri,0)*.35s) linear infinite}
.theme-orbit .features li:nth-child(even)::after{animation-direction:reverse}
.theme-boat .features li::before{inset-inline-start:0;top:.42em;width:34px;height:17px;border-radius:5px 12px 12px 5px/5px 9px 9px 5px;background:#287768;animation:rock 3.4s ease-in-out calc(var(--ri,0)*-.5s) infinite}
.theme-boat .features li:nth-child(3n+2)::before{background:#b85c4a}
.theme-boat .features li:nth-child(3n)::before{background:#426e91}
.theme-boat .features li::after{inset-inline-start:8px;top:calc(.42em + 4.5px);width:13px;height:8px;border-radius:4px;background:#ecf3dc}
[dir=rtl] .theme-boat .features li::before{border-radius:12px 5px 5px 12px/9px 5px 5px 9px}
@keyframes rock{0%,100%{rotate:-5deg;translate:0 0}50%{rotate:5deg;translate:0 -2px}}
.help{padding-block:clamp(40px,7vw,80px) 0}

/* ---------- about ---------- */
.about{padding-block:clamp(40px,8vw,100px) 0}
.about-text{max-width:32em;font-size:clamp(18px,1rem + .6vw,23px);line-height:1.5;font-weight:600}

/* ---------- documents: support, privacy, licenses ---------- */
.doc{max-width:820px;padding-block:clamp(16px,4vw,48px) 0}
.doc h1{font-size:clamp(36px,1.6rem + 3.4vw,60px);margin-bottom:.4em}
.doc h2{font-size:clamp(23px,1.1rem + 1vw,30px);margin:2em 0 .5em}
.doc h3{font-size:20px;margin:1.6em 0 .3em}
.doc .lead{font-size:clamp(18px,1rem + .5vw,22px);color:var(--muted);font-weight:600;max-width:34em}
.doc ul{padding-inline-start:1.2em}
.doc li{margin:.4em 0}
.doc li::marker{color:var(--coral)}
.doc ul.features{padding:0;margin-top:14px}
.doc ul.features li{padding-inline-start:26px;margin-block:12px}
.doc ul.features li::before{inset-inline-start:0;top:.48em;width:12px;height:12px;border-radius:50%;background:var(--purple)}
.doc ul.features li:nth-child(3n+2)::before{background:var(--coral)}
.doc ul.features li:nth-child(3n)::before{background:var(--yellow)}
.faq-head{display:flex;align-items:center;gap:14px}
.faq-head img{width:48px;height:48px;border-radius:12px;flex:none}
.faq details{background:var(--card);border:1.5px solid var(--line);border-radius:22px;margin:10px 0;transition:border-color .3s,box-shadow .4s}
.faq details:hover{border-color:#dccdbd}
.faq details[open]{border-color:var(--yellow);box-shadow:0 14px 30px -22px #402a2660}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-weight:800;padding:16px 20px;border-radius:22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(var(--ink),var(--ink)) center/12px 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 12px no-repeat,var(--yellow);transition:rotate .45s var(--out)}
.faq details[open] summary::after{rotate:135deg}
.faq details p{margin:0;padding:0 20px 18px}
.faq details[open] p{animation:faq .5s var(--out)}
@keyframes faq{from{opacity:0;translate:0 -8px}}

/* ---------- footer ---------- */
footer.site{position:relative;margin-top:clamp(90px,13vw,160px);background:var(--paper-2);border-radius:clamp(30px,5vw,56px) clamp(30px,5vw,56px) 0 0;color:var(--muted);font-size:15px}
.footer-in{padding-block:clamp(34px,5vw,56px) 40px;display:grid;gap:22px}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px}
.footer-brand{font-weight:900;color:var(--ink)}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.langs a{padding:5px 13px;border-radius:999px;background:#fffdf9a6;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;transition:background-color .2s,translate .25s var(--pop)}
.langs a:hover{background:var(--card);translate:0 -2px}
.langs a[aria-current]{background:var(--ink);color:var(--paper)}
.peek{position:absolute;bottom:100%;inset-inline-end:clamp(20px,11vw,150px);width:clamp(120px,15vw,170px);aspect-ratio:427/296;overflow:hidden;pointer-events:none}
.peek-body{position:absolute;inset:0;translate:0 32%;transition:translate .7s var(--pop);pointer-events:auto;cursor:pointer}
.peek-body img{display:block;width:100%;height:100%;pointer-events:none}
.peek.duck .peek-body{translate:0 104%;transition:translate .3s ease-in}
.peek .logo-eye{top:40.540%;width:8.430%;height:19.930%}
.peek .logo-eye:nth-of-type(1){left:20.840%}
.peek .logo-eye:nth-of-type(2){left:39.340%}

/* ---------- little party pieces (stars from the blob, confetti) ---------- */
.fx{position:fixed;left:0;top:0;z-index:50;pointer-events:none;will-change:transform,opacity}
.fx-star{width:18px;height:18px;background:var(--yellow);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.fx-pill{width:14px;height:30px;border-radius:12px;background:linear-gradient(#cda6fc 58%,#8979f7 58%)}
.fx-ring{width:22px;height:22px;border-radius:50%;border:6px solid var(--coral)}
.fx-blob{width:26px;height:18px;border-radius:58% 42% 50% 50%/62% 58% 42% 38%;background:var(--yellow)}
.fx-z{font-weight:900;font-size:18px;color:var(--violet)}

/* ---------- error pages: 404 (a window into Orbit Switch), 500 (a stuck BOATLOOP gate) ---------- */
.oops{display:grid;justify-items:center;text-align:center;padding-block:clamp(20px,5vh,60px) 0}
.oops-art{--sz:clamp(104px,26vw,250px);display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.6vw,18px);direction:ltr}
.digit{flex:none;height:var(--sz);width:auto;overflow:visible;transform-origin:50% 92%}
.digit path,.harbor .five{fill:none;stroke-width:28;stroke-linecap:round;stroke-linejoin:round}
.digit-a{--i:2;animation:in-letter .8s var(--pop) .05s both,sway 6s ease-in-out 1s infinite}
.digit-b{--i:8;animation:in-letter .8s var(--pop) .3s both,sway 7s ease-in-out 1.4s infinite reverse}
.hole{position:relative;flex:none;width:var(--sz);height:var(--sz);margin-inline:calc(var(--sz)*.11);border-radius:50%;overflow:hidden;
  background:radial-gradient(90% 70% at 25% 10%,#3c1f7499,transparent 62%),radial-gradient(80% 60% at 85% 95%,#0f3d7499,transparent 62%),#070a14;
  box-shadow:0 0 0 calc(var(--sz)*.085) var(--yellow),0 calc(var(--sz)*.16) calc(var(--sz)*.2) calc(var(--sz)*-.08) #402a2699;
  animation:in-blob .9s var(--out) .15s both}
.hole canvas:focus-visible{outline:none}
.hole:has(canvas:focus-visible){box-shadow:0 0 0 calc(var(--sz)*.085) var(--yellow),0 0 0 calc(var(--sz)*.085 + 4px) var(--violet)}
.oops-hint{margin:calc(var(--gutter)*1.2) 0 0;font-family:"Orbitron",var(--round);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--violet);animation:hint 1.7s ease-in-out infinite}
.oops-code{display:inline-block;margin:clamp(16px,3.5vh,30px) 0 12px;padding:3px 15px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:900;font-size:14px;letter-spacing:.14em}
.oops-title{font-size:clamp(30px,1.4rem + 3vw,54px);max-width:17em;text-wrap:balance}
.oops-text{max-width:30em;margin:.9em auto 0;font-size:clamp(17px,1rem + .4vw,21px);font-weight:600;color:var(--muted);text-wrap:pretty}
.oops-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:clamp(20px,4vh,34px) 0 0}
.oops-code,.oops-title,.oops-text,.oops-actions{animation:rise .9s var(--out) both}
.oops-code{animation-delay:.35s}.oops-title{animation-delay:.43s}.oops-text{animation-delay:.51s}.oops-actions{animation-delay:.6s}
button.btn{border:0;font:inherit;font-weight:900;cursor:pointer}
.btn-ghost,.btn-ghost:hover,.btn-ghost:active{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);translate:none}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--ink)}

.harbor{flex:none;height:var(--sz);width:auto;max-width:94vw;overflow:visible;animation:rise .9s var(--out) both}
.harbor .five{stroke:#2d6f61}
.harbor .tap{cursor:pointer}
.harbor .glints{transform-origin:310px 90px;animation:glint 5s ease-in-out infinite}
@keyframes glint{0%,100%{opacity:.25}50%{opacity:.7}}
.harbor .lamp{animation:lamp 3.4s linear infinite}
.harbor .lamp-glow{animation:lamp-glow 3.4s linear infinite}
@keyframes lamp{0%,44%,56%,68%,100%{opacity:1}50%,62%{opacity:.2}}
@keyframes lamp-glow{0%,44%,56%,68%,100%{opacity:.32}50%,62%{opacity:.05}}
.harbor .lh.poke .lamp{animation:lamp .5s linear 3}
.harbor .lh.poke .lamp-glow{animation:lamp-glow .5s linear 3}
.harbor .gate{transform-box:fill-box;transform-origin:50% 50%;animation:stuck 3.8s ease-in-out infinite}
.harbor .gate.poke{animation:stuck-now .6s ease-in-out}
@keyframes stuck{0%,72%,100%{transform:none}76%{transform:translateX(-2.5px) rotate(-5deg)}80%{transform:translateX(2.5px) rotate(5deg)}84%{transform:translateX(-1.5px) rotate(-2deg)}88%{transform:translateX(1px)}}
@keyframes stuck-now{0%,100%{transform:none}20%{transform:translateX(-3px) rotate(-7deg)}40%{transform:translateX(3px) rotate(7deg)}60%{transform:translateX(-2px) rotate(-3deg)}80%{transform:translateX(1px)}}
.harbor .wait-boat{transform-box:fill-box;transform-origin:50% 50%;animation:rock 3.4s ease-in-out infinite}
.harbor .loop-boat{transform-origin:222px 90px}
html:not(.js) .harbor .loop-boat{animation:spin 11s linear infinite}
.harbor .loop-heading{transform-box:fill-box;transform-origin:50% 50%;transition:rotate .6s var(--out)}
.harbor .loop-boat.back .loop-heading{rotate:180deg}

/* ---------- page-to-page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
::view-transition-group(icon-orbit),::view-transition-group(icon-boat){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ---------- right-to-left, reduced motion ---------- */
[dir=rtl] .hero-lead,[dir=rtl] .title,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;translate:none;scale:none}
  .sky i{translate:none}
  @view-transition{navigation:none}
}