:root{--color-bg-light: #ffffff;--color-text-light: #213547;--color-bg-dark: #0a0a0a;--color-text-dark: #eaeaea;--color-accent: #8b5cf6;--color-danger: #b91c1c;--color-border: #e5e7eb;--color-muted: #64748b;--color-heading: #111827;--color-primary: #2563eb;font-family:Inter,Noto Sans JP,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-text-light);background-color:var(--color-bg-light);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background:#fafafa;color:var(--color-text-light);overflow:hidden}html,body,#root{height:100%}#root{display:flex;flex-direction:column}.page{min-height:100vh;display:flex;flex-direction:column}.page main{flex:1 0 auto}h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem;color:var(--color-heading)}h2{font-size:1.25rem;line-height:1.2;margin:0 0 .5rem}p{margin:.25rem 0}button{border-radius:10px;border:1px solid #1d4ed8;padding:.7em 1.1em;font-size:1rem;font-weight:600;font-family:inherit;background-color:var(--color-primary);color:#fff;cursor:pointer;transition:transform .06s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;box-shadow:0 1px 2px #10182814}button:hover{border-color:#1e40af;background:#1d4ed8;transform:translateY(-1px)}button:active{transform:translateY(0)}.container{max-width:1120px;margin:0 auto;padding:32px 24px 72px}.surface{background:#fff;border:1px solid var(--color-border);border-radius:12px}.section{padding:32px}.divider{height:1px;background:var(--color-border)}.site-header{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fafafae6;border-bottom:1px solid var(--color-border)}.site-header .inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:12px 24px;max-width:1120px;margin:0 auto}.brand{font-weight:800;letter-spacing:.2px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 1px 2px #1018281f inset}.brand-text{font-weight:800}.nav{display:flex;gap:18px;color:var(--color-muted);font-size:.95rem}.nav .link{color:inherit;padding:6px 8px;border-radius:8px;text-decoration:none}.nav .link:hover{background:#0206170a;color:#0f172a}.progress{height:4px;background:#eef2f7;overflow:hidden}.site-header .progress{margin:0 24px 8px;border-radius:9999px}.actions{display:flex;gap:10px}.btn-outline{background:transparent;color:#111827;border:1px solid #cbd5e1;padding:8px 12px;border-radius:10px;font-weight:600}.btn-outline:hover{border-color:#94a3b8}.progress-bar{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width .6s cubic-bezier(.22,1,.36,1)}.site-footer{margin-top:18px;padding:24px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:.9rem}.choices{display:grid;gap:14px;margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.choice{text-align:left;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;border:1px solid var(--color-border);background:#fff;color:#111827}.choice:after{content:">" attr(data-next);opacity:.15}.footer{margin-top:16px;color:#6b7280;font-size:.9rem}.phase-1{--accent: #60a5fa}.phase-2{--accent: #f59e0b}.phase-3{--accent: #9333ea;font-family:Shippori Mincho,serif}.phase-4{--accent: #b91c1c;font-family:Shippori Mincho,serif}.accent{color:var(--accent)}.glitch{position:relative}.glitch-overlay{pointer-events:none;position:absolute;inset:0;mix-blend-mode:screen;animation:glitch-overlay-flicker .12s 3 linear;background:linear-gradient(90deg,#ff008008,#00ffff05),repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0,rgba(0,0,0,.06) 1px,transparent 2px);z-index:2}.glitch-canvas{position:fixed;left:0;top:0;pointer-events:none;z-index:4;mix-blend-mode:screen}.glitch-overlay-rgb{pointer-events:none;position:absolute;inset:-2px;z-index:3;mix-blend-mode:screen;background:radial-gradient(120% 120% at 10% 10%,rgba(255,0,128,.08),transparent 60%),radial-gradient(120% 120% at 90% 20%,rgba(0,255,255,.06),transparent 60%),radial-gradient(120% 120% at 50% 80%,rgba(147,51,234,.06),transparent 60%);animation:glitch-rgb .16s 2 steps(2,end)}@keyframes glitch-rgb{0%{transform:translate(0);filter:hue-rotate(0deg) saturate(1);opacity:.22}50%{transform:translate(-1px,.6px);filter:hue-rotate(12deg) saturate(1.2);opacity:.3}to{transform:translate(0);filter:hue-rotate(-8deg) saturate(.9);opacity:.18}}.glitch-overlay-slices{pointer-events:none;position:absolute;inset:0;z-index:3;background:linear-gradient(to right,rgba(255,255,255,.08) 0 10%,transparent 10% 20%,rgba(255,255,255,.06) 20% 30%,transparent 30% 40%,rgba(255,255,255,.05) 40% 50%,transparent 50% 60%,rgba(255,255,255,.06) 60% 70%,transparent 70% 80%,rgba(255,255,255,.08) 80% 90%,transparent 90% 100%);opacity:.14;transform:skew(0);animation:glitch-slices .14s 2 linear}@keyframes glitch-slices{0%{transform:translate(0) skew(0)}40%{transform:translate(-1.2px) skew(-.4deg)}60%{transform:translate(.8px) skew(.3deg)}to{transform:translate(0) skew(0)}}.glitch-text.glitch-pulse:before,.glitch-text.glitch-pulse:after{animation:gtext-pulse .16s 2 steps(2,end)}@keyframes gtext-pulse{0%{transform:translate(0);filter:none}50%{transform:translate(1px);filter:blur(.2px) brightness(1.05)}to{transform:translate(0);filter:none}}@keyframes glitch-overlay-flicker{0%{opacity:0;filter:none}30%{opacity:.4;filter:hue-rotate(10deg) saturate(1.3) blur(.4px);transform:translate(.3px,-.2px)}60%{opacity:.25;filter:hue-rotate(-15deg) saturate(.9);transform:translate(-.3px,.2px)}to{opacity:0;filter:none;transform:none}}.creep-tilt{transform:rotate(.5deg)}.dark-phase{background:#0b0b0b!important;color:var(--color-text-dark);min-height:100vh}.dark-phase .surface{background:#0f1012;border-color:#1f2937}.dark-phase h1{color:#fafafa}.dark-phase h2,.dark-phase p{color:#e5e7eb}.dark-phase .choice{background:#121316;border-color:#2a2f3a;color:#e5e7eb}.dark-phase .nav{color:#cbd5e1}.dark-phase .progress{background:#1f2937}.dark-phase .progress-bar{background:linear-gradient(90deg,#7c3aed,#db2777)}.dark-phase .site-header{background:#0a0b0c99;border-bottom-color:#1f2937}.dark-phase .brand-mark{background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 1px 2px #0006 inset}.dark-phase .btn-outline{color:#e5e7eb;border-color:#334155}.dark-phase .btn-outline:hover{border-color:#475569;background:#ffffff0a}.dark-phase .nav .link:hover{background:#ffffff0f;color:#f1f5f9}.noise{pointer-events:none;position:fixed;inset:0;opacity:.05;z-index:1;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0px,rgba(0,0,0,.35) 1px,transparent 2px),repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0px,transparent 1px,rgba(255,255,255,.25) 2px);animation:noiseShift 1.2s steps(6) infinite}@keyframes noiseShift{0%{transform:translateZ(0)}20%{transform:translate3d(3px,-2px,0)}40%{transform:translate3d(-2px,1px,0)}60%{transform:translate3d(2px,3px,0)}80%{transform:translate3d(-3px,-1px,0)}to{transform:translateZ(0)}}.scanlines{pointer-events:none;position:fixed;inset:0;z-index:1;opacity:.08;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0px,rgba(0,0,0,.35) 1px,transparent 2px,transparent 3px)}.vignette{pointer-events:none;position:fixed;inset:0;z-index:1;background:radial-gradient(ellipse at center,#0000 50%,#00000073)}.glitch-text{position:relative;text-shadow:0 0 0 transparent}.glitch-text:before,.glitch-text:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}.glitch-text:before{color:#9333ea99;transform:translate(1px);clip-path:inset(0 0 50% 0)}.glitch-text:after{color:#ec489999;transform:translate(-1px);clip-path:inset(50% 0 0 0)}.glitch.phase-3 .glitch-text,.glitch.phase-4 .glitch-text{animation:gtext .7s steps(2) infinite}@keyframes gtext{50%{transform:translate(-.5px)}to{transform:translate(.5px)}}input[type=text],.text-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d4d4d8;font-size:1rem}.phase-badge{display:inline-block;padding:2px 8px;border-radius:9999px;background:var(--accent);color:#fff;font-size:.8rem;margin-left:8px}.result{text-align:center}@media (prefers-color-scheme: dark){:root{color:var(--color-text-dark);background-color:var(--color-bg-dark)}}