/* Sakura Media Factory — futuristic Japanese. Pearl washi, hairline
   precision, pink spent like ink: rarely, decisively. */

:root{
  --paper:#fffaf7; --paper-2:#fff3ee; --ink:#241f26; --ink-soft:#5c525f;
  --hair:#e8ddd8; --hair-2:#d9cbc4;
  --sakura-50:#ffe9f0; --sakura-100:#ffc6d8; --sakura-300:#ff86ad;
  --sakura-500:#ff3d7f; --sakura-600:#e22468; --sakura-700:#b81851;
  --lilac-400:#b47cff; --lilac-600:#7c4dff; --coral:#ff6f4d;
  --gold:#f4a93f; --mint:#2bb673;
  --void:#171221; --void-2:#221a33;
  --disp:'Shippori Mincho B1',serif;
  --ui:'Zen Kaku Gothic New',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overlays set display:flex; the hidden attribute must still win */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ui); color:var(--ink); background:var(--paper);
  min-height:100dvh; overflow-x:hidden;
  background-image:
    radial-gradient(1200px 500px at 85% -10%, var(--sakura-50) 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 110%, #f3ecff 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .5 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* staggered load */
.reveal{opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--d)*.12s)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* vertical kanji rails */
.kanji-rail{
  position:fixed; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--disp); font-weight:600;
  font-size:clamp(14px,1.6vw,22px); letter-spacing:.9em; color:var(--hair-2);
  user-select:none; pointer-events:none; z-index:0;
}
.kanji-left{left:clamp(6px,2vw,28px)} .kanji-right{right:clamp(6px,2vw,28px)}
@media(max-width:760px){.kanji-rail{display:none}}

.page{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:clamp(16px,3vw,40px) clamp(14px,4vw,48px) 60px;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}

/* ------------------------------------------------ masthead */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hair);padding-bottom:14px}
.brand{display:flex;align-items:center;gap:14px}
.flower{
  width:34px;height:34px;flex:none;
  background:
    radial-gradient(circle at 50% 30%,var(--sakura-500) 0 7px,transparent 8px),
    radial-gradient(circle at 20% 56%,var(--sakura-300) 0 6px,transparent 7px),
    radial-gradient(circle at 80% 56%,var(--sakura-300) 0 6px,transparent 7px),
    radial-gradient(circle at 33% 85%,var(--sakura-100) 0 6px,transparent 7px),
    radial-gradient(circle at 67% 85%,var(--sakura-100) 0 6px,transparent 7px),
    radial-gradient(circle at 50% 58%,var(--gold) 0 4px,transparent 5px);
  filter:drop-shadow(0 1px 2px rgba(184,24,81,.25));
  animation:drift 9s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(7deg)}}
.wordmark{display:flex;align-items:baseline;gap:12px}
.wm-jp{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4vw,40px);color:var(--sakura-600);line-height:1}
.wm-en{font-family:var(--disp);font-weight:600;font-size:clamp(15px,2.4vw,22px);letter-spacing:.34em;color:var(--ink)}
.wm-en em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.mast-right{display:flex;align-items:center;gap:12px}
.engine-chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-soft);border:1px solid var(--hair);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.5)}
.engine-chip.flux{color:var(--mint);border-color:#bfe6d2}
.games-btn{
  font-family:var(--disp);font-size:20px;line-height:1;color:var(--paper);
  background:linear-gradient(160deg,var(--void),var(--void-2));
  border:none;border-radius:12px;padding:10px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 2px 0 rgba(255,255,255,.12) inset,0 6px 18px rgba(23,18,33,.28);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s;
}
.games-btn:hover{transform:translateY(-2px);box-shadow:0 2px 0 rgba(255,255,255,.12) inset,0 10px 24px rgba(124,77,255,.35)}
.games-btn-en{font-family:var(--mono);font-size:8px;letter-spacing:.3em;color:var(--lilac-400)}

/* ------------------------------------------------ the window */
.window-frame{
  border:1px solid var(--hair-2);border-radius:18px;overflow:hidden;
  background:var(--void);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 24px 60px -24px rgba(36,31,38,.45);
}
.window-chrome{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:linear-gradient(180deg,#2a2138,#1d1729);
  border-bottom:1px solid rgba(180,124,255,.18);
}
.chrome-dot{width:8px;height:8px;border-radius:50%;background:var(--sakura-500);box-shadow:0 0 8px var(--sakura-500)}
.chrome-title{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#cbb8ee;text-transform:lowercase}
.chrome-meta{font-family:var(--mono);font-size:10px;color:#7d6d9c;margin-left:auto}
.chrome-actions{display:flex;gap:6px}
.chrome-act{background:none;border:1px solid rgba(180,124,255,.3);color:#cbb8ee;border-radius:7px;width:26px;height:24px;cursor:pointer;font-size:12px}
.chrome-act:hover{background:rgba(180,124,255,.15)}
.window-body{position:relative;aspect-ratio:16/10;max-height:62vh}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.progress-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(23,18,33,.55);backdrop-filter:blur(3px)}
.progress-ring{width:74px;height:74px;border-radius:50%;
  background:conic-gradient(var(--sakura-500) calc(var(--p,0)*1turn),rgba(180,124,255,.18) 0);
  -webkit-mask:radial-gradient(circle,transparent 26px,#000 27px);mask:radial-gradient(circle,transparent 26px,#000 27px)}
.progress-label{font-family:var(--mono);font-size:13px;color:#f2e9ff;letter-spacing:.2em}
.progress-sub{font-family:var(--disp);font-size:12px;color:#a58fd0;letter-spacing:.3em}

/* ------------------------------------------------ converse */
.converse{display:flex;flex-direction:column;gap:10px}
.sakura-line{display:flex;gap:10px;align-items:baseline;min-height:22px;padding:0 4px}
.sakura-name{font-family:var(--disp);font-weight:800;color:var(--sakura-600);font-size:15px}
.sakura-text{font-family:var(--ui);font-weight:400;color:var(--ink-soft);font-size:14.5px;line-height:1.55}
.sakura-text.thinking::after{content:'…';animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.prompt-row{display:flex;gap:10px;align-items:stretch}
.upload-btn{
  width:52px;border:1px dashed var(--hair-2);border-radius:14px;background:rgba(255,255,255,.55);
  color:var(--ink-soft);font-size:18px;cursor:pointer;transition:all .2s}
.upload-btn:hover{border-color:var(--sakura-300);color:var(--sakura-600)}
.prompt-shell{position:relative;flex:1;display:flex;align-items:center;background:#fff;border:1px solid var(--hair-2);border-radius:14px;padding:0 16px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 26px -18px rgba(36,31,38,.35);transition:border-color .2s,box-shadow .2s}
.prompt-shell:focus-within{border-color:var(--sakura-300);box-shadow:0 0 0 3px var(--sakura-50),0 10px 26px -18px rgba(226,36,104,.3)}
.prompt-input{flex:1;border:none;outline:none;background:none;font-family:var(--ui);font-size:16px;padding:15px 0;color:var(--ink)}
.prompt-input::placeholder{color:#b9aeb4;font-weight:300}
.caret-blink{width:2px;height:20px;background:var(--sakura-500);animation:blink 1.06s steps(1) infinite}
.prompt-shell:focus-within .caret-blink{display:none}
@keyframes blink{50%{opacity:0}}
.send-btn{
  width:56px;border:none;border-radius:14px;cursor:pointer;
  font-family:var(--disp);font-size:20px;color:#fff;
  background:linear-gradient(160deg,var(--sakura-500),var(--sakura-600));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px -8px rgba(226,36,104,.55);
  transition:transform .16s,box-shadow .16s}
.send-btn:hover{transform:translateY(-2px)}
.send-btn:active{transform:translateY(0)}
.upload-strip{display:flex;gap:8px;padding:2px 4px}
.upload-chip{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.6)}
.upload-chip .sw{display:flex;gap:2px}
.upload-chip .sw i{width:9px;height:9px;border-radius:3px;display:block}

/* ------------------------------------------------ the guts */
.guts-toggle{display:flex;align-items:center;gap:14px;width:100%;background:none;border:none;cursor:pointer;padding:4px 0}
.gt-line{flex:1;height:1px;background:var(--hair)}
.gt-label{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--ink-soft)}
.guts-toggle:hover .gt-label{color:var(--sakura-600)}
.guts-body{border:1px solid var(--hair);border-radius:16px;background:rgba(255,255,255,.55);padding:6px 0;backdrop-filter:blur(4px)}
.guts-group{border-bottom:1px solid var(--hair);padding:12px 18px}
.guts-group:last-child{border-bottom:none}
.gg-head{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.gg-jp{font-family:var(--disp);font-weight:600;color:var(--lilac-600);font-size:15px}
.gg-en{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--ink-soft)}
.gg-arrow{margin-left:auto;color:var(--hair-2);transition:transform .25s}
.guts-group.open .gg-arrow{transform:rotate(90deg)}
.gg-body{display:none;padding-top:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 26px}
.guts-group.open .gg-body{display:grid}
.knob{display:flex;flex-direction:column;gap:6px}
.knob-row{display:flex;justify-content:space-between;align-items:baseline}
.knob-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}
.knob-val{font-family:var(--mono);font-size:11.5px;color:var(--sakura-700);font-weight:500}
.knob input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:none;cursor:pointer}
.knob input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--sakura-300) var(--fill,50%),var(--hair) var(--fill,50%));border-radius:2px}
.knob input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--sakura-500);margin-top:-6px;box-shadow:0 1px 4px rgba(184,24,81,.35);transition:transform .15s}
.knob input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
.knob input[type=range]::-moz-range-track{height:2px;background:var(--hair);border-radius:2px}
.knob input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--sakura-500)}
.knob select,.knob input[type=text],.knob input[type=number]{
  font-family:var(--mono);font-size:12px;color:var(--ink);background:#fff;
  border:1px solid var(--hair-2);border-radius:9px;padding:7px 10px;outline:none}
.knob select:focus,.knob input:focus{border-color:var(--sakura-300)}
.seg{display:flex;border:1px solid var(--hair-2);border-radius:9px;overflow:hidden}
.seg button{flex:1;border:none;background:#fff;font-family:var(--mono);font-size:11px;padding:7px 4px;cursor:pointer;color:var(--ink-soft)}
.seg button.on{background:var(--sakura-500);color:#fff}
.switch{position:relative;width:40px;height:22px;border-radius:999px;background:var(--hair);cursor:pointer;border:none;transition:background .2s}
.switch.on{background:var(--sakura-500)}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on::after{left:21px}

/* ------------------------------------------------ works */
.works-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:12px}
.works-title{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.22em}
.works-sub{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.1em}
.works-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.work-card{
  border:1px solid var(--hair);border-radius:14px;background:rgba(255,255,255,.65);
  padding:10px;cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;
  display:flex;flex-direction:column;gap:8px}
.work-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(36,31,38,.4)}
.work-card.active{border-color:var(--sakura-500);box-shadow:0 0 0 3px var(--sakura-50)}
.work-thumb{aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:linear-gradient(160deg,var(--void),var(--void-2));position:relative}
.work-thumb img,.work-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.work-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);color:#5d4d80;font-size:20px}
.work-title{font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-meta{display:flex;align-items:center;gap:6px}
.var-dots{display:flex;gap:5px;flex:1}
.var-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--hair-2);background:#fff;cursor:pointer;transition:transform .15s}
.var-dot.filled{background:var(--sakura-300);border-color:var(--sakura-300)}
.var-dot.current{background:var(--sakura-600);border-color:var(--sakura-600);transform:scale(1.3)}
.work-branch{background:none;border:1px solid var(--hair-2);color:var(--ink-soft);border-radius:7px;font-family:var(--mono);font-size:10px;padding:2px 7px;cursor:pointer}
.work-branch:hover{border-color:var(--lilac-400);color:var(--lilac-600)}
.work-badge{font-family:var(--mono);font-size:9px;color:var(--lilac-600)}

/* ------------------------------------------------ footer */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.08em;flex-wrap:wrap}
.foot-notify{display:flex;gap:8px;align-items:center}
.foot-notify input{font-family:var(--mono);font-size:11px;border:1px solid var(--hair-2);border-radius:9px;padding:6px 10px;outline:none;background:#fff;width:200px}
.foot-notify input:focus{border-color:var(--sakura-300)}
.foot-notify button{border:1px solid var(--hair-2);background:#fff;border-radius:9px;padding:6px 10px;cursor:pointer;font-family:var(--disp);color:var(--ink-soft)}
.foot-notify button:hover{color:var(--sakura-600);border-color:var(--sakura-300)}
.foot-notify button.on{color:#fff;background:var(--sakura-500);border-color:var(--sakura-500)}

/* ------------------------------------------------ arcade overlay */
.arcade{position:fixed;inset:0;z-index:50;background:rgba(23,18,33,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,32px)}
.arcade-frame{width:min(980px,100%);max-height:94dvh;overflow:auto;background:linear-gradient(170deg,#221a33,#171221);border:1px solid rgba(180,124,255,.25);border-radius:20px;padding:20px;box-shadow:0 40px 120px -30px #000}
.arcade-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.arcade-title{font-family:var(--disp);font-weight:600;font-size:20px;color:#f2e9ff;letter-spacing:.14em}
.arcade-title em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--lilac-400);margin-left:10px}
.arcade-close,.arcade-back{background:none;border:1px solid rgba(180,124,255,.3);color:#cbb8ee;border-radius:9px;padding:6px 12px;cursor:pointer;font-family:var(--mono);font-size:12px}
.arcade-close:hover,.arcade-back:hover{background:rgba(180,124,255,.15)}
.arcade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.arcade-card{
  border:1px solid rgba(180,124,255,.2);border-radius:14px;background:rgba(255,255,255,.04);
  padding:14px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:6px;text-align:left}
.arcade-card:hover{border-color:var(--sakura-500);background:rgba(255,61,127,.07);transform:translateY(-3px)}
.arcade-card .ac-icon{font-size:24px}
.arcade-card .ac-title{font-family:var(--disp);color:#f2e9ff;font-size:14px;font-weight:600}
.arcade-card .ac-jp{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--lilac-400)}
.arcade-card .ac-blurb{font-size:11px;color:#9c8bbd;line-height:1.45}
.arcade-pending{grid-column:1/-1;padding:40px 20px;text-align:center;font-family:var(--mono);font-size:12px;color:#9c8bbd;letter-spacing:.08em}
.arcade-stage{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.arcade-mount{min-height:440px;border-radius:14px;overflow:hidden;background:#0f0b18}

/* ------------------------------------------------ fullview */
.fullview{position:fixed;inset:0;z-index:60;background:rgba(23,18,33,.94);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.fullview img,.fullview video{max-width:94vw;max-height:92dvh;border-radius:10px;box-shadow:0 40px 120px -20px #000}

@media(max-width:640px){
  .wm-en{letter-spacing:.2em}
  .window-body{aspect-ratio:4/3}
  .works-rail{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .foot{justify-content:center}
}