:root{--bg: #050509;--surface: #0E1014;--border: #1C1F26;--accent: #4C8DFF;--accent-soft: #A970FF;--cyan: #00FFFF;--cyan-dim: #00d4ff;--green: #34D399;--green-dim: #16a34a;--amber: #FBBF24;--orange: #ea580c;--orange-dim: #f97316;--red: #F87171;--text-primary: #E5E7EB;--text-muted: #9CA3AF;--text-dim: #6B7280;--font-mono: "Source Code Pro", "Courier New", monospace;--glow-cyan: 0 0 12px #00FFFF88;--glow-blue: 0 0 12px #4C8DFF88;--glow-soft: 0 0 8px #A970FF66;--glow-green: 0 0 12px #34D39988;--glow-orange: 0 0 12px #ea580c88}[lang=ja]{display:none}body.lang-ja [lang=ja]{display:inline}body.lang-ja [lang=en]{display:none}.lang-label[data-active]{color:#0ff;text-shadow:0 0 12px #00FFFF88}.act-inner{max-width:860px}.act-title{font-size:clamp(1.4rem,4vw,2.2rem)}.act-lead{font-size:var(--text-base);max-width:680px;line-height:1.8}.hero-layout{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}.hero-center{position:relative;width:100%;display:flex;align-items:center;justify-content:center;padding:24px 0}.hero-calligraphy{width:clamp(280px,50vw,520px);height:auto;opacity:.85;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hero-subtitle{position:absolute;top:12px;left:0;text-align:center;width:50%;font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:400;color:var(--text-primary);letter-spacing:.18em;text-transform:uppercase;line-height:1.6;margin:0;z-index:1}.hero-quote{text-align:center;padding:32px 16px;border-left:none}.hero-quote p{font-size:clamp(1.1rem,3vw,1.5rem);color:var(--text-primary);font-style:italic;line-height:1.5;text-shadow:var(--glow-soft)}.hero-quote cite{display:block;margin-top:12px;font-size:.8rem;color:var(--text-dim);font-style:normal}.source-buttons{display:flex;gap:12px;margin:32px 0;flex-wrap:wrap}.source-btn{flex:1;min-width:220px;padding:16px 20px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-primary);cursor:pointer;text-align:left;font-family:var(--font-mono);transition:all .2s}.source-btn:hover{border-color:var(--cyan-dim);box-shadow:0 0 16px #00d4ff1a}.source-btn--alt:hover{border-color:var(--orange-dim);box-shadow:0 0 16px #f973161a}.source-btn-label{display:block;font-size:.95rem;font-weight:600;margin-bottom:4px}.source-btn-sub{display:block;font-size:.75rem;color:var(--text-dim);letter-spacing:.05em}.reframe-callout{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:24px;text-align:center;margin:32px 0}.reframe-arrow{color:var(--cyan-dim);font-size:1.5rem;margin:8px 0}.reframe-from{font-size:1rem;color:var(--text-dim)}.reframe-from s{color:var(--red)}.reframe-to{font-size:1.1rem;color:var(--cyan);text-shadow:var(--glow-cyan)}.modal-overlay{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:16px;background:#000c;backdrop-filter:blur(4px)}.modal-overlay.active{display:flex}.modal-panel{width:100%;max-width:min(700px,98vw);max-height:88vh;display:flex;flex-direction:column;font-family:var(--font-mono);background:#000d18;border:1px solid rgba(132,138,148,.53);box-shadow:0 0 40px #000c;border-radius:4px}.modal-header{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid rgba(255,255,255,.08)}.modal-title{font-size:14px;font-weight:700;color:#c9d1d9;margin-bottom:4px}.modal-subtitle{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#848a94}.modal-close{font-family:inherit;font-size:18px;background:none;border:none;color:#6b7280;cursor:pointer;padding:4px 8px;flex-shrink:0;line-height:1}.modal-close:hover{color:#fff}.modal-body{flex:1;overflow-y:auto;padding:20px;font-size:var(--text-base);color:#8b949e;line-height:1.8}.modal-section-title{font-size:var(--text-sm);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan-dim);margin-bottom:12px;font-weight:400}.modal-jp-text{font-size:var(--text-base);line-height:2;color:#c9d1d9;white-space:pre-wrap;padding:16px;background:#ffffff08;border-radius:4px;border-left:2px solid var(--cyan-dim)}.modal-en-text{font-size:var(--text-base);line-height:1.8;color:#b0b8c4;white-space:pre-wrap}.modal-en-text strong{color:var(--cyan)}.modal-attribution{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);font-size:var(--text-xs)}.modal-attribution a{color:var(--cyan-dim);text-decoration:none}.modal-attribution a:hover{text-decoration:underline}.modal-vocab{margin-bottom:20px}.vocab-item{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:var(--text-sm)}.vocab-item strong{color:var(--orange-dim)}.modal-translation-grid{margin:16px 0}.translation-row{display:flex;gap:12px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04);align-items:center}.tl-jp{font-size:1.1rem;color:var(--text-primary);min-width:60px}.tl-action{color:var(--cyan);font-weight:600;min-width:120px}.tl-target{color:var(--text-dim)}.modal-mnemonic{margin-top:20px;padding:16px;background:#ffffff08;border-radius:4px;border-left:2px solid var(--orange-dim)}.mnemonic-list{margin-top:8px;font-size:1rem;color:var(--text-primary);line-height:1.8;font-weight:600;letter-spacing:.05em}.four-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0}.dimension-card{padding:20px;border:1px solid var(--border);border-radius:6px;background:var(--surface);position:relative}.dimension-card h3{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin-bottom:4px}.dimension-jp{font-size:var(--text-sm);color:var(--cyan-dim);margin-bottom:8px;letter-spacing:.1em}.dimension-number{position:absolute;top:12px;right:14px;font-size:1.5rem;font-weight:700;color:#00d4ff1f;line-height:1}.dimension-card p{font-size:var(--text-sm);color:var(--text-dim);line-height:1.7;margin:0}.build-yourself-inline{margin:24px -24px;padding:12px 8px;width:calc(100% + 48px);background:#050509;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.by-controls{display:flex;align-items:center;gap:8px;padding:0 8px;margin-bottom:4px}.by-play-btn{font-family:inherit;font-size:15px;padding:2px 8px;border-radius:3px;cursor:pointer;border:1px solid #21262d;background:transparent;color:#6b7280;transition:all .15s;line-height:1;flex-shrink:0}.by-play-btn:hover{border-color:#00d4ff;color:#00d4ff}.by-label-end{font-size:8px;letter-spacing:.14em;color:#6b7280;text-transform:uppercase;flex-shrink:0}.by-slider{flex:1;height:4px;cursor:pointer;accent-color:#00d4ff}.by-slider-label{font-size:var(--text-sm);color:#6b7280;text-align:center;letter-spacing:.08em;min-height:18px;padding:0 8px}.by-steps{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;padding:4px 8px 8px}.by-step-btn{font-family:Source Code Pro,Courier New,monospace;font-size:clamp(9px,1.4vw,12px);letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:2px;cursor:pointer;border:1px solid #21262d;background:transparent;color:#6b7280;transition:all .15s;white-space:nowrap}.by-step-btn:hover{border-color:#888;color:#ccc}.by-step-btn.lit{box-shadow:0 0 6px #0000004d}.by-step-btn.active{box-shadow:0 0 8px #fff3}.by-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#21262d;border-radius:6px;overflow:hidden;width:100%;aspect-ratio:1 / 1;max-width:800px;margin:0 auto}.by-panel{position:relative;overflow:hidden;background:#0a0e14;aspect-ratio:1 / 1}.by-panel canvas{position:absolute;inset:0;width:100%;height:100%}.viz-container{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:16px 12px;min-height:200px;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}.disclaimer{margin-top:24px;padding:12px 16px;font-size:var(--text-xs);color:var(--text-dim);border-left:2px solid var(--border);line-height:1.6}.viz-zoomable{position:relative;overflow:hidden;touch-action:none}.viz-zoomable .viz-container{transform-origin:0 0;overflow:visible}.zoom-hint{display:none;text-align:center;font-size:var(--text-xs);color:var(--text-dim);margin-top:6px;opacity:.6}@media(max-width:600px){.zoom-hint{display:block}}.examples-box{margin-top:32px;border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:20px}.examples-box h3{font-size:var(--text-sm);letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px}.example-item{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:var(--text-sm);color:var(--text-muted);line-height:1.7}.example-item:last-child{border-bottom:none}.example-label{display:block;color:var(--cyan-dim);font-weight:600;font-size:.8rem;letter-spacing:.08em;margin-bottom:4px}.cta-layout{display:flex;flex-direction:column;gap:0}.cta-center{position:relative;width:100%;display:flex;align-items:center;justify-content:center;padding:24px 0}.cta-left{position:absolute;left:0;width:45%;text-align:left;z-index:1}.cta-title{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:400;color:var(--text-primary);letter-spacing:.15em;text-transform:uppercase;line-height:1.4;margin:0 0 16px}.cta-lead{font-size:clamp(.85rem,2vw,1rem);color:var(--text-secondary);line-height:1.7;max-width:320px}.cta-calligraphy{width:clamp(260px,45vw,480px);height:auto;opacity:.8;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cta-bottom-right{align-self:flex-end;text-align:right;max-width:520px;font-size:clamp(.85rem,2vw,1rem);color:var(--text-secondary);line-height:1.7;margin-top:8px}.inline-link{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(0,212,255,.3);transition:all .2s}.inline-link:hover{text-shadow:var(--glow-cyan);border-bottom-color:var(--cyan)}@media(max-width:600px){.four-dimensions{grid-template-columns:1fr}.source-buttons{flex-direction:column}.act{padding:60px 16px}.contrast-callout{flex-direction:column;gap:8px}.translation-row{flex-direction:column;gap:4px}.hero-center{flex-direction:column}.hero-subtitle{position:relative;left:auto;width:100%;margin-bottom:16px}.cta-center{flex-direction:column}.cta-left{position:relative;left:auto;width:100%;text-align:center;margin-bottom:16px}.cta-lead{max-width:none}.cta-bottom-right{align-self:center;text-align:center;max-width:none}}