/* No Fluff home. The desktop page is the approved R27 layout: every size is in design pixels of its 2688 x 1512 frame, scaled by --u. */
:root{
  --u:min(calc(100vw / 2688),calc(100vh / 1512));
  --orange:#f0522b;
  --bottom:#1a1d29;
}
@supports (height:100svh){:root{--u:min(calc(100vw / 2688),calc(100svh / 1512))}}
@media (max-height:500px){:root{--u:calc(100vw / 2688)}}

html[data-theme=light]{
  --ink:#14162b;--claude:#c9603f;--accent:#c63d17;
  --hl-shadow:none;--ts:none;
  --drop:drop-shadow(calc(var(--u)*12) calc(var(--u)*18) calc(var(--u)*12) rgba(60,40,25,.42));
  --sw-bg:rgba(20,22,43,.12);--sw-line:rgba(20,22,43,.32);
  --panel:#f6efe3;--panel-ink:#14162b;--page:#eee2d4;
}
html[data-theme=dark]{
  --ink:#fff;--claude:#da7756;--accent:#ff8a5e;
  --hl-shadow:0 calc(var(--u)*3) calc(var(--u)*16) rgba(0,0,0,.6);
  --ts:0 calc(var(--u)*2) calc(var(--u)*14) rgba(0,0,0,.95),0 0 calc(var(--u)*4) rgba(0,0,0,.8);
  --drop:drop-shadow(calc(var(--u)*10) calc(var(--u)*18) calc(var(--u)*14) rgba(0,0,0,.7));
  --sw-bg:rgba(255,255,255,.14);--sw-line:rgba(255,255,255,.42);
  --panel:#1b1c29;--panel-ink:#fff;--page:#12131c;
}
html[data-theme=light] .t-dark,html[data-theme=dark] .t-light{display:none!important}

*{box-sizing:border-box;margin:0}
html{background:var(--bottom);-webkit-text-size-adjust:100%}
body{background:var(--bottom);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:max(2px,calc(var(--u)*4)) solid var(--orange);outline-offset:max(2px,calc(var(--u)*4));border-radius:calc(var(--u)*8)}

/* ---- the frame */
.hero{position:relative;width:100%;height:calc(var(--u)*1512);overflow:hidden}
.plates{position:absolute;inset:0;overflow:hidden}
.plate{position:absolute;top:0;left:50%;width:calc(var(--u)*2688);height:calc(var(--u)*1512);max-width:none;margin-left:calc(var(--u)*-1344);opacity:0;transition:opacity .45s ease}
html[data-theme=light] .plate.light,html[data-theme=dark] .plate.dark{opacity:1}
/* wider than 16:9: the same sheets continue, mirrored, past both edges of the frame */
.plate.flip,.plate.side{display:none}
@media (min-aspect-ratio:16/9) and (min-height:501px){.plate.flip,.plate.side{display:block}}
.plate.flip.l{transform:translateX(-100%) scaleX(-1)}
.plate.flip.r{transform:translateX(100%) scaleX(-1)}
.plate.side{width:calc(var(--u)*1344);margin-left:0}
.plate.side.l{left:calc(50% - var(--u)*2688)}
.plate.side.r{left:calc(50% + var(--u)*1344)}
.stage{position:absolute;top:0;left:50%;width:calc(var(--u)*2688);height:calc(var(--u)*1512);margin-left:calc(var(--u)*-1344)}

/* ---- header */
.top{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*112);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*96);z-index:20;color:var(--ink)}
.nf img{height:calc(var(--u)*66);width:auto}
nav{display:flex;align-items:center;gap:calc(var(--u)*60);font-size:calc(var(--u)*27);font-weight:600}
nav a:not(.cta):hover,nav summary:hover{color:var(--orange)}
.cta{background:var(--orange);color:#fff;padding:calc(var(--u)*17) calc(var(--u)*36);border-radius:calc(var(--u)*40);transition:filter .15s}
.cta:hover{filter:brightness(1.08)}

.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.panel{position:absolute;top:calc(100% + var(--u)*22);left:calc(var(--u)*-28);min-width:calc(var(--u)*300);padding:calc(var(--u)*14);background:var(--panel);color:var(--panel-ink);border-radius:calc(var(--u)*20);box-shadow:0 calc(var(--u)*18) calc(var(--u)*44) rgba(0,0,0,.34);display:flex;flex-direction:column}
.panel a,.panel button{display:block;width:100%;padding:calc(var(--u)*13) calc(var(--u)*18);border-radius:calc(var(--u)*12);font-weight:600}
.panel a:hover,.panel button:hover{background:rgba(240,82,43,.14);color:inherit}

.switch{position:relative;display:block;flex:none;width:calc(var(--u)*108);height:calc(var(--u)*56);padding:0;border-radius:999px;background:var(--sw-bg);box-shadow:inset 0 0 0 max(1px,calc(var(--u)*2)) var(--sw-line)}
.knob{position:absolute;top:calc(var(--u)*6);left:calc(var(--u)*6);width:calc(var(--u)*44);height:calc(var(--u)*44);border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;transition:transform .28s cubic-bezier(.3,1.3,.5,1);box-shadow:0 calc(var(--u)*2) calc(var(--u)*7) rgba(0,0,0,.35)}
html[data-theme=dark] .knob{transform:translateX(calc(var(--u)*52))}
.knob svg{grid-area:1/1;width:70%;height:70%}
html[data-theme=light] .i-moon,html[data-theme=dark] .i-sun{display:none}

/* ---- headline */
h1{position:absolute;left:calc(var(--u)*96);top:calc(var(--u)*130);width:calc(var(--u)*700);font-size:calc(var(--u)*128);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--ink);text-shadow:var(--hl-shadow);z-index:6}
h1 i,dialog h2 i{font-style:normal;color:var(--orange)}
.sub{position:absolute;left:calc(var(--u)*100);top:calc(var(--u)*417);width:calc(var(--u)*600);font-size:calc(var(--u)*37);font-weight:500;line-height:1.32;color:var(--ink);text-shadow:var(--hl-shadow);z-index:6}

/* ---- products */
.square,.phone-links,.logo.phone{display:none}
.prod{position:absolute;display:block;z-index:8;color:#fff}
.prod:hover .lnk{text-decoration:underline;text-underline-offset:.18em}
.cap{position:absolute;display:block;text-align:center;z-index:8}
.logo{display:block;margin:0 auto;height:auto}
.tag{display:block;font-weight:700;font-size:calc(var(--u)*38);margin-top:calc(var(--u)*20);letter-spacing:-.01em;line-height:1.2}
.lnk{display:block;font-weight:700;font-size:calc(var(--u)*31);margin-top:calc(var(--u)*9);color:#ff8a5e}
.sh{text-shadow:0 calc(var(--u)*2) calc(var(--u)*12) rgba(0,0,0,.95),0 0 calc(var(--u)*4) rgba(0,0,0,.8)}

.floppy{left:calc(var(--u)*42.2);top:calc(var(--u)*550);width:calc(var(--u)*646);height:calc(var(--u)*690);color:var(--ink)}
.floppy .cap{left:calc(var(--u)*3.025);top:calc(var(--u)*435);width:calc(var(--u)*640)}
.floppy .logo{width:calc(var(--u)*538.4)}
.floppy .tag{text-shadow:var(--ts)}
.floppy .tag b{color:var(--claude)}
.floppy .lnk{color:var(--accent);text-shadow:var(--ts)}
.fan{position:absolute;left:0;top:0;width:calc(var(--u)*646);height:calc(var(--u)*415);display:block}
.fl{position:absolute;left:25.511%;top:15.663%;width:48.916%;height:auto;transform-origin:50% 50%;filter:var(--drop)}
.f1{z-index:1;transform:rotate(-11deg) translate(-43.038%,-9.706%)}
.f2{z-index:2;transform:rotate(11deg) translate(43.038%,-9.706%)}
.f3{z-index:3;transform:translate(0,-19.715%)}

.nexus{left:calc(var(--u)*2002.775);top:calc(var(--u)*480.5);width:calc(var(--u)*640);height:calc(var(--u)*760)}
.core{position:absolute;left:calc(var(--u)*77.725);top:0;width:calc(var(--u)*484.5);height:calc(var(--u)*484.5);filter:var(--drop)}
.nexus .cap{left:0;top:calc(var(--u)*489.96);width:calc(var(--u)*640)}
.nexus .logo{width:calc(var(--u)*459);transform:translateX(calc(var(--u)*6))}

.dungeon{left:calc(var(--u)*974);top:calc(var(--u)*1150);width:calc(var(--u)*740);height:calc(var(--u)*362);padding:0}
.dungeon .cap{left:0;top:0;width:100%}
.dungeon .logo{width:calc(var(--u)*600);filter:drop-shadow(0 calc(var(--u)*8) calc(var(--u)*20) rgba(0,0,0,.7))}

/* ---- the small note */
dialog{margin:auto;width:min(92vw,460px);padding:28px 30px 24px;border:0;border-radius:18px;background:var(--panel);color:var(--panel-ink);box-shadow:0 24px 70px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(8,9,16,.62)}
dialog h2{font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
dialog p{margin-top:10px;font-size:16px;font-weight:500;line-height:1.5}
dialog p a{color:var(--orange);font-weight:700}
dialog p a:hover{text-decoration:underline}
.close{margin-top:18px;padding:9px 22px;border-radius:30px;background:var(--orange);color:#fff;font-size:15px;font-weight:700}

/* ---- phones and tall screens: the same pieces, stacked */
@media (max-width:760px),(max-aspect-ratio:1/1){
  :root{--u:calc(min(100vw,760px) / 1100)}
  body{background:var(--page)}
  .hero{height:auto;overflow:visible;background:var(--page)}
  .plates{display:none}
  .stage{position:static;width:auto;height:auto;margin:0}
  .top{position:relative;height:auto;padding:14px 18px;background:var(--page)}
  .nf img{height:46px}
  nav{gap:12px;font-size:14px}
  .menu,.acct{display:none}
  .cta{padding:9px 16px;border-radius:24px}
  .switch{width:58px;height:32px}
  .knob{top:4px;left:4px;width:24px;height:24px}
  html[data-theme=dark] .knob{transform:translateX(26px)}
  main{display:flex;flex-direction:column;background:var(--bottom)}
  h1{position:static;order:1;width:auto;padding:12px 18px 0;background:var(--page);font-size:clamp(50px,15.4vw,104px)}
  .sub{position:static;order:2;width:auto;padding:12px 18px 16px;background:var(--page);font-size:clamp(17px,4.6vw,28px)}
  .square{order:3;display:block;position:relative;background:var(--page)}
  .square img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%);mask-image:linear-gradient(to bottom,transparent 0,#000 9%)}
  .prod{position:relative;left:auto;top:auto;width:auto;height:auto;padding:0 18px;color:#fff}
  .cap{position:static}
  .tag{font-size:clamp(19px,5.2vw,30px);margin-top:12px}
  .lnk{font-size:clamp(16px,4.4vw,24px);margin-top:4px}
  .dungeon{order:4;display:block;width:100%;margin-top:-30vw;padding-bottom:34px;z-index:8}
  .dungeon .cap{width:100%}
  .dungeon .logo{width:62%}
  .floppy{order:5;display:block;padding-top:6px;padding-bottom:40px;color:#fff}
  .floppy .cap{width:100%}
  .fan{position:relative;width:min(82vw,560px);height:auto;aspect-ratio:646/415;margin:0 auto}
  .floppy .logo{width:min(78vw,520px);margin-top:10px}
  .floppy .tag b{color:#da7756}
  .floppy .lnk{color:#ff8a5e}
  .floppy .tag,.floppy .lnk{text-shadow:none}
  .nexus{order:6;display:block;padding-bottom:30px}
  .core{position:static;width:min(62vw,420px);height:auto;margin:0 auto}
  .nexus .cap{width:100%;margin-top:10px}
  .nexus .logo{width:min(56vw,380px);transform:none}
  .logo.desk{display:none!important}
  .logo.phone{display:block}
  .phone-links{display:block;order:7;padding:0 18px 34px;text-align:center;color:#c9cbd8;font-size:15px;font-weight:600}
  .phone-links a{text-decoration:underline;text-underline-offset:.2em}
  .sh{text-shadow:none}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}