/* Otakase site. Colours are the app's Kage tokens.
   The home page is one pinned stage: scrolling swaps scenes in place, then
   two full-height pages (download, community). */
:root{
  --bg:#0e0d0c;--deep:#080707;--panel:#191614;--raised:#211b18;--line:#3c332d;--edge:#4a342a;
  --fg:#ece4d6;--bright:#fff8ec;--muted:#b9b0a4;--shu:#d2492f;--shu-text:#f28b74;
  --display:"Archivo Black",Impact,sans-serif;--body:Inter,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--jp:"Noto Serif JP",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html.home{scrollbar-width:none;overflow-anchor:none}
/* app.js turns snapping on once the page has loaded and sits at the top:
   snapping while the page is still settling can carry it down a scene */
html.home.snapping{scroll-snap-type:y mandatory}
html.home::-webkit-scrollbar,html.home body::-webkit-scrollbar{display:none}
.snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
/* where app.js puts them too: scene i at i quarters of the pinned scroll */
.snap{top:calc((500vh - 100svh) * var(--i) / 4)}
.after{scroll-snap-align:start;scroll-snap-stop:always}
.endpage{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.endpage>.wrap:last-child{margin-top:auto;width:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--shu-text);outline-offset:3px;border-radius:8px}
.mono{font:400 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kj{font-family:var(--jp);font-weight:700;color:var(--shu-text)}
.pill{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;background:#2a2421;color:var(--fg);border:0;cursor:pointer;font-family:var(--body)}
.pill.p{background:var(--shu);color:var(--deep)}
.pill:hover{filter:brightness(1.1)}
.pill svg{width:18px;height:18px;flex:none}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(8,7,7,.6);font-weight:500;font-size:15px}

/* pinned story */
.pin{position:relative;height:500vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(1100px 620px at 50% -12%,#2a1712,transparent 62%),var(--bg)}
.glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(210,73,47,.16),transparent 60%);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;transition:none}
.tv{z-index:1}.pc{z-index:2}.ph{z-index:3}
.dev{position:absolute;left:0;top:0;will-change:transform,opacity;transform-origin:50% 50%;font-size:4px}
.dev .scr{position:relative;overflow:hidden;background:#000}
.dev img{display:block;width:100%;height:100%;object-fit:cover}
/* laptop: lid with bezel + webcam, aluminium deck with thumb notch */
.pc .lid{margin:0 6em;padding:2.4em 2.4em 3.4em;border-radius:3em 3em .6em .6em;background:#0d0b0a;box-shadow:inset 0 0 0 .25em #2b2522,0 4em 8em rgba(0,0,0,.65);position:relative}
.pc .lid::before{content:"";position:absolute;top:.85em;left:50%;width:.9em;height:.9em;margin-left:-.45em;border-radius:50%;background:#1d2a33;box-shadow:0 0 0 .2em #050404}
.pc .scr{aspect-ratio:16/10;border-radius:.5em}
.pc .scr img{position:absolute;inset:0;transition:opacity .5s}
.pc .base{position:relative;height:3em;border-radius:.4em .4em 3.6em 3.6em/.4em .4em 2.2em 2.2em;background:linear-gradient(#5a524d,#3a3431 30%,#1f1b19);box-shadow:0 2em 3em rgba(0,0,0,.6)}
.pc .base::before{content:"";position:absolute;left:50%;top:0;width:15em;height:1em;margin-left:-7.5em;border-radius:0 0 1.2em 1.2em;background:#262120}
/* TV: slim bezel, chin, pedestal stand */
.tv .panel-tv{padding:1em;border-radius:1em;background:#0a0908;box-shadow:inset 0 0 0 .2em #2c2623,0 5em 10em rgba(0,0,0,.7)}
.tv .scr{aspect-ratio:16/9;border-radius:.3em}
.tv .chin{height:1.6em;display:grid;place-items:center}
.tv .chin i{width:1em;height:.35em;border-radius:1em;background:#3a2f2a}
.tv .neck{width:7em;height:5em;margin:0 auto;background:linear-gradient(90deg,#1a1715,#3b3431 50%,#1a1715)}
.tv .foot{width:36em;height:1.6em;margin:0 auto;border-radius:1em 1em .6em .6em;background:linear-gradient(#4a423e,#1d1917);box-shadow:0 1.5em 2.5em rgba(0,0,0,.6)}
/* phone: metal edge, thin bezel, punch-hole camera, side keys */
.ph .body{position:relative;padding:3.4em;border-radius:15em;background:#0b0a09;box-shadow:inset 0 0 0 .9em #2e2825,inset 0 0 0 1.3em #0b0a09,0 4em 8em rgba(0,0,0,.75)}
.ph .body::before{content:"";position:absolute;top:6.2em;left:50%;width:3.6em;height:3.6em;margin-left:-1.8em;border-radius:50%;background:#050505;box-shadow:inset 0 0 0 .7em #10161b;z-index:2}
.ph .body::after{content:"";position:absolute;right:-1.1em;top:24%;width:1.4em;height:16em;border-radius:.7em;background:#2e2825;box-shadow:0 24em 0 #2e2825}
.ph .scr{aspect-ratio:412/915;border-radius:11.5em}
.dev .scr img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s}
.dev .scr img.alt{opacity:0}
.dev .scr img.alt.on{opacity:1}
/* community */
.club{padding-block:48px 20px;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}
.club .card{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;border-radius:24px;border:1px solid var(--edge);background:linear-gradient(120deg,#2a1712,var(--panel) 60%);padding:32px}
.club .txt{min-width:0}
.club .mono{display:block;margin-bottom:10px}
.club h2{margin:0 0 10px;font:700 clamp(28px,3.2vw,40px)/1.15 var(--body);color:var(--bright)}
.club p{margin:0 0 22px;color:var(--muted);max-width:520px}
.club .acts{display:flex;gap:12px;flex-wrap:wrap}
.club .cover{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.55);display:block}
.perks,.facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.perks{grid-template-columns:repeat(3,1fr)}
.perks li{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid #2b241f;border-radius:18px;padding:18px}
.perks b,.facts b{display:block;color:var(--bright);font-weight:600}
.perks span:not(.ic),.facts span:not(.ic){color:var(--muted);font-size:14px}
.ic{width:42px;height:42px;flex:none;border-radius:12px;background:#2a2421;color:var(--shu-text);display:grid;place-items:center}
.ic svg{width:20px;height:20px}
.facts{grid-template-columns:repeat(2,1fr)}
.facts li{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;padding:12px 0}
.facts li .ic{grid-row:span 2}
.dlgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.dlgrid .panel{grid-template-columns:1fr}
.dlgrid .panel .pill{justify-self:start}
.show{display:flex;align-items:flex-end;justify-content:center;gap:28px}
.mini{position:relative;flex:none;font-size:calc(var(--mw) / 100)}
.mini.pc{--mw:420px;width:var(--mw)}
.mini.ph{--mw:124px;width:var(--mw)}
.mini .scr img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.mini.pc{--mw:330px}.mini.ph{--mw:98px}.show{gap:18px}}
@media (max-width:760px){.club .card{grid-template-columns:1fr;padding:22px;gap:20px}.perks{grid-template-columns:1fr;gap:10px}.perks li{padding:14px}
.dlgrid{grid-template-columns:1fr;gap:0}.show{display:none}.facts li{padding:6px 0}}

.hero{position:absolute;left:0;right:0;top:0;text-align:center;padding:calc(env(safe-area-inset-top,0px) + 13vh) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));will-change:transform,opacity}
.seal{font:900 clamp(56px,7vw,88px)/1 var(--jp);color:var(--shu);text-shadow:6px 6px 0 rgba(210,73,47,.15)}
.hero h1{font:clamp(44px,6.4vw,92px)/1.02 var(--display);color:var(--bright);margin:14px 0 18px;text-wrap:balance;letter-spacing:-.01em}
.hero p{font-size:clamp(16px,1.4vw,20px);max-width:620px;margin:0 auto 26px;text-wrap:balance}
.hero .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero p.mono{margin-top:18px;font-size:12px;margin-bottom:0}

.cap{position:absolute;left:max(6vw,24px);top:50%;width:min(36vw,480px);transform:translateY(-50%);visibility:hidden;opacity:0;will-change:transform,opacity;pointer-events:none}
.cap.live{pointer-events:auto}
.cap .kj{font-size:clamp(44px,5vw,64px);line-height:1;display:block;margin-bottom:14px}
.cap h2{font:700 clamp(30px,3.4vw,46px)/1.12 var(--body);color:var(--bright);margin:0 0 14px;text-wrap:balance;letter-spacing:-.01em}
.cap p{color:var(--muted);font-size:clamp(16px,1.3vw,19px);margin:0;max-width:440px}
.cap .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.cap .mono{display:block;margin-bottom:12px}

.dots{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .2s,transform .2s}
.dots button.on{background:var(--shu);transform:scale(1.3)}
.hint{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.hint i{width:1px;height:28px;background:linear-gradient(var(--shu),transparent);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* after the pin */
.wrap{max-width:1120px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.dl{padding-block:48px 40px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:26px}
.sh h2{font:700 clamp(28px,3vw,38px)/1.2 var(--body);color:var(--bright);margin:0}
.sh .kj{font-size:clamp(34px,4vw,46px)}
.tabs{display:inline-flex;flex-wrap:wrap;background:#1f1a17;border-radius:999px;padding:5px;margin-bottom:26px;gap:2px}
.tabs button{border:0;background:none;color:var(--muted);font:600 15px var(--body);padding:10px 20px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--fg);color:var(--deep)}
.panel{background:var(--panel);border:1px solid #2b241f;border-radius:22px;padding:30px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.panel h3{font:700 24px var(--body);color:var(--bright);margin:0 0 8px}
.panel p{color:var(--muted);margin:0;max-width:560px}
.panel code{font:14px var(--mono);color:var(--fg);background:var(--deep);padding:2px 6px;border-radius:6px}
footer{margin-top:60px;padding-block:28px 50px;border-top:1px solid #2b241f;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer nav{display:flex;gap:18px}
footer a:hover{color:var(--bright)}

@media (max-width:760px){
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 56px)}
  .hero p{margin-bottom:20px}
  .cap{left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));width:auto;top:calc(env(safe-area-inset-top,0px) + 28px);transform:none}
  .cap .kj{font-size:40px;margin-bottom:8px;display:inline-block;margin-right:10px;vertical-align:middle}
  .cap h2{display:inline;font-size:28px;vertical-align:middle}
  .cap p{margin-top:12px;font-size:16px}
  .cap .mono{margin-bottom:8px}
  .dots{display:none}
  .panel{grid-template-columns:1fr;padding:22px}
  .tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;width:100%}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* try it: the app built for the web, in a device frame (demo.js). The page
   never scrolls: it is exactly the window's height and the device takes
   whatever room the rest leaves, sized from its stage (container units). */
body.try{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.tbar.wrap{max-width:1440px;width:100%}
.tbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.tback{display:inline-flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font:15px/1 'Archivo Black','Arial Black',sans-serif;letter-spacing:1px}
.tour{flex:1;min-height:0;display:flex;padding-block:4px 16px}
.tour[hidden],.tour .tabs[hidden]{display:none}
.tour.wrap{max-width:1440px;width:100%}
.tgrid{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:40px;align-items:center}
.thead{min-width:0}
.tlead{color:var(--muted);margin:-10px 0 22px}
.tour .tabs{margin-bottom:16px}
.thint{color:var(--muted);font-size:14px;margin:0 0 8px}
.thint a{color:var(--fg)}
.thint:empty,.tshort{display:none}
.tour .sh h2{white-space:nowrap}
.tstage{min-width:0;min-height:0;height:100%;container-type:size;display:flex;align-items:center;justify-content:center}
/* --bx/--by: the frame around the screen, so the screen keeps the device's shape */
.tdev{--w:1440;--h:900;--bx:0px;--by:0px;--max:100cqw;position:relative;width:min(var(--max),(100cqh - var(--by)) * var(--w) / var(--h) + var(--bx))}
.tscr{position:relative;box-sizing:content-box;aspect-ratio:var(--w)/var(--h);overflow:hidden;background:var(--bg)}
.tscr iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:var(--bg)}
.tdev.computer{--bx:24px;--by:44px;--max:92cqw}
.tdev.computer .tscr{border:12px solid #0d0b0a;border-bottom-width:18px;border-radius:16px 16px 4px 4px;box-shadow:0 0 0 2px #2b2522,0 30px 60px rgba(0,0,0,.6)}
.tdev.computer::after{content:"";display:block;height:14px;margin:0 -4%;border-radius:2px 2px 30px 30px/2px 2px 12px 12px;background:linear-gradient(#5a524d,#3a3431 30%,#1f1b19)}
.tdev.tv{--bx:16px;--by:40px}
.tdev.tv .tscr{border:8px solid #0a0908;border-radius:8px;box-shadow:0 0 0 2px #2c2623,0 30px 70px rgba(0,0,0,.65)}
.tdev.tv::after{content:"";display:block;width:26%;height:12px;margin:12px auto 0;border-radius:8px 8px 4px 4px;background:linear-gradient(#4a423e,#1d1917)}
.tdev.phone{--bx:20px;--by:20px;--max:min(100cqw,460px)}
.tdev.phone.wide{--max:100cqw}
.tdev.phone .tscr{border:10px solid #0b0a09;border-radius:38px;box-shadow:0 0 0 2px #2e2825,0 30px 60px rgba(0,0,0,.7)}
.try footer{flex:none;margin-top:0;padding-block:10px max(12px,env(safe-area-inset-bottom,0px));font-size:13px;row-gap:4px}
@media (max-width:1000px){
  .tgrid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:14px;align-items:stretch}
  .tour .sh{margin-bottom:10px}
  .tlead{margin:-4px 0 12px}
  .tour .tabs{margin-bottom:10px}
  .thint{margin-bottom:4px}
}
@media (max-width:760px){
  .tbar{padding-block:10px}
  .tbar .pill{height:40px;padding:0 18px}
  .tour{padding-block:0 10px}
  .tour .sh{margin-bottom:6px}
  .tour .sh h2{font-size:24px}
  .tour .sh .kj{font-size:28px}
  .tlead{display:none}
  .thint{font-size:13px;line-height:1.4}
  .tour .tabs{grid-template-columns:repeat(3,1fr)}
  .tdev.computer{--bx:12px;--by:30px}
  .tdev.computer .tscr{border-width:6px 6px 10px}
  .tdev.tv{--bx:8px;--by:32px}
  .tdev.tv .tscr{border-width:4px}
  .tdev.phone{--bx:12px;--by:12px}
  .tdev.phone .tscr{border-width:6px;border-radius:26px}
  .tour .sh .kj{display:none}
  .tlong{display:none}
  .tshort{display:inline}
  .try footer{font-size:12px;padding-block:8px max(10px,env(safe-area-inset-bottom,0px));white-space:nowrap}
  .try footer nav{gap:14px}
  .try .fhost{display:none}
}
/* phones on their side: text beside the device, no footer */
@media (max-width:1000px) and (max-height:500px){
  .tbar{padding-block:8px}
  .tgrid{grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:20px;align-items:center}
  .try footer{display:none}
}