:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Noto Sans JP,Meiryo,sans-serif;color:#e7f0f4;background:#081320;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:radial-gradient(circle at 51% 11%,#172a3c 0,#0b1929 32%,#081320 74%);overflow:hidden}.topbar{height:65px;border-bottom:1px solid #284057;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1320px)/2));background:#0b1725bd}.brand{display:flex;gap:13px;align-items:center;font-size:13px;letter-spacing:.24em;font-weight:700;color:#eef7f7}.brand b{font-weight:400;color:#7b9bae}.brand-symbol{display:grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:3px;transform:rotate(45deg)}.brand-symbol i{background:#83dce1;border-radius:2px}.brand-symbol i:nth-child(2),.brand-symbol i:nth-child(3){opacity:.42}.topbar-meta{font-size:10px;letter-spacing:.19em;color:#91a9b8;font-weight:700;display:flex;align-items:center;gap:10px}.topbar-dot,.live-indicator{width:6px;height:6px;background:#68ddda;border-radius:50%;box-shadow:0 0 12px #68ddda}.topbar-index{margin-left:22px;border-left:1px solid #385064;padding-left:24px;color:#b8cad2}main{max-width:1320px;margin:auto;padding:0 28px}.intro{padding:54px 3px 38px}.eyebrow{display:flex;align-items:center;gap:15px;color:#7fd7dd;font-size:11px;font-weight:800;letter-spacing:.2em}.eyebrow span:last-child{color:#b6c8d1;letter-spacing:.12em}.eyebrow-rule{height:1px;width:48px;background:#506d7d}h1,h2,p{margin-top:0}.intro h1{font-size:clamp(38px,5vw,70px);line-height:1.23;letter-spacing:-.06em;font-weight:650;margin:21px 0 15px}.intro h1 span{color:#8fdde2}.intro p{color:#a9bdcb;font-size:15px;line-height:1.9;max-width:720px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch}.viewer,.readout,.control-panel,.cylinder-panel{border:1px solid #294158;background:#101d2d;border-radius:18px;box-shadow:0 19px 55px #030c1659}.viewer{position:relative;min-height:570px;overflow:hidden;background:#0b1726}.viewer canvas{display:block}.viewer-caption,.viewer-guide,.angle-badge{position:absolute;z-index:2;pointer-events:none}.viewer-caption{top:23px;left:25px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.18em;color:#bed0d8;font-weight:750}.caption-rule{width:1px;height:14px;background:#496174}.viewer-guide{bottom:20px;left:24px;color:#9eb4c0;font-size:11px;letter-spacing:.04em}.angle-badge{bottom:20px;right:22px;background:#142538e8;border:1px solid #3b566f;border-radius:12px;padding:12px 15px;min-width:100px}.angle-badge span{display:block;color:#89a7b6;font-size:9px;letter-spacing:.12em;font-weight:700}.angle-badge strong{display:block;font-size:24px;line-height:1.25;font-weight:650;font-variant-numeric:tabular-nums}.angle-badge small{font-size:14px;color:#9fc5d0}.readout{padding:27px;display:flex;flex-direction:column}.readout-kicker,.section-kicker{font-size:10px;letter-spacing:.17em;color:#7fcbd1;font-weight:800}.readout-kicker{display:flex;justify-content:space-between}.readout-kicker span{color:#748fa0}.power-callout{display:flex;align-items:center;gap:18px;margin:26px 0 15px}.power-symbol{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#ffd6a2;background:radial-gradient(circle,#8b6045 0,#3b3d46 43%,#1b2838 72%);border:1px solid #9e7656;box-shadow:0 0 22px #ffaf6940}.power-callout span{display:block;color:#b5c2cc;font-size:11px}.power-callout strong{display:block;font-size:27px;line-height:1.35;letter-spacing:-.02em}.power-explain,.selected-summary{color:#a8bdc8;font-size:12px;line-height:1.8}.power-explain strong{color:#f3d1a5}.readout-divider{height:1px;background:#2c4356;margin:14px 0 22px}.selected-head{display:flex;justify-content:space-between;color:#9db4bf;font-size:11px}.selected-head span:last-child{color:#7e9aaa}.selected-title{display:flex;align-items:center;gap:16px;margin:18px 0 12px}.selected-letter{width:51px;height:54px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:11px;background:color-mix(in srgb,var(--accent) 15%,#15283b);color:#ecf7f7;font-size:28px;font-weight:750}.selected-title div>span{font-size:10px;letter-spacing:.17em;font-weight:800}.selected-title h2{margin:4px 0 0;font-size:25px;letter-spacing:-.04em}.selected-summary{min-height:43px;margin-bottom:18px}.status-grid{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:9px}.status-grid div{background:#162538;border:1px solid #2b4357;border-radius:9px;padding:10px 11px;display:flex;justify-content:space-between;gap:4px}.status-grid dt{color:#8ca8b6;font-size:11px}.status-grid dd{margin:0;color:#d5e5eb;font-weight:700;font-size:11px}.status-grid dd.is-open{color:#86dfe3}.status-grid dd.is-firing{color:#ffc68f}.insight{border-left:2px solid #63c9d1;padding:4px 0 4px 13px;margin-top:auto}.insight span{color:#77d0d5;font-size:9px;font-weight:800;letter-spacing:.16em}.insight p{color:#9fb9c5;font-size:11px;line-height:1.7;margin:8px 0 0}.control-panel,.cylinder-panel{padding:25px 28px;margin-top:16px}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.section-top h2{font-size:22px;letter-spacing:-.04em;margin:6px 0 0}.cycle-note{color:#8ea8b7;font-size:11px}.control-row{display:flex;gap:11px;align-items:center;margin:22px 0 26px}.control-row button{border-radius:9px;padding:11px 17px;min-height:43px;font-size:12px;font-weight:750}.play-button{display:flex;align-items:center;gap:10px;color:#12313d;background:#93dfe1;border:1px solid #abe9e9;box-shadow:0 5px 20px #59c8d235}.play-button:hover{background:#b2eeeb}.play-button span{font-size:14px}.quiet-button{color:#b6cbd3;background:#17283a;border:1px solid #395268}.quiet-button:hover{background:#20374b}.speed-control{margin-left:auto;display:flex;align-items:center;gap:15px;color:#9eb8c6;font-size:11px}.speed-control label{white-space:nowrap}.speed-control strong{color:#9cdee0;margin-left:4px}input[type=range]{accent-color:#8bdce1;cursor:pointer}.speed-control input{width:135px}.range-wrap{position:relative}.range-wrap>input{appearance:none;width:100%;height:7px;margin:0;border-radius:5px;background:linear-gradient(to right,#8edce1 0 var(--fill),#354d61 var(--fill) 100%)}.range-wrap>input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;border:4px solid #e6fcfa;background:#76cbd2;box-shadow:0 0 0 4px #7bd8df34}.range-wrap>input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid #e6fcfa;background:#76cbd2}.range-ticks{display:flex;justify-content:space-between;margin-top:14px;color:#7691a2;font-size:10px;font-variant-numeric:tabular-nums}.ignition-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:23px}.ignition-step{background:#172538;border:1px solid #334b60;border-radius:10px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:6px;color:#dbe8ec;transition:border-color .2s,background .2s,transform .2s}.ignition-step:hover{transform:translateY(-2px);border-color:#8ccdd5}.ignition-step.active{border-color:#e9b47f;background:linear-gradient(135deg,#3b3440,#233145);box-shadow:inset 0 2px #f8bc84}.ignition-step span{font-size:9px;color:#92abba;letter-spacing:.08em}.ignition-step strong{font-size:16px}.ignition-step small{font-size:10px;color:#93cdd0}.cylinder-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px}.cylinder-card{min-height:128px;background:#162538;border:1px solid #344e63;border-radius:12px;padding:14px;text-align:left;color:#eaf3f3;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,border-color .2s,background .2s}.cylinder-card:hover{transform:translateY(-2px);border-color:var(--card-accent)}.cylinder-card.selected{background:color-mix(in srgb,var(--card-accent) 12%,#142438);border-color:var(--card-accent)}.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px}.card-top strong{font-size:22px;line-height:1}.card-top small{color:#8da8b7;font-size:10px}.card-state{font-weight:750;font-size:17px;color:var(--card-accent)}.card-bottom{font-size:9px;color:#91a9b6;letter-spacing:.08em}.card-bottom em{font-style:normal;color:#f9c08d;background:#7e5a3b40;padding:3px 6px;border-radius:4px;letter-spacing:0}.view-options{border-top:1px solid #2a4255;margin-top:22px;padding-top:17px;display:flex;align-items:center;gap:12px}.view-options button{display:flex;align-items:center;gap:11px;background:#18293a;color:#c6d9df;border:1px solid #3c5568;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700}.switch{position:relative;display:block;width:29px;height:16px;border-radius:20px;background:#526576}.switch:after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#d6e7e8;transition:transform .2s}.switch.on{background:#5aaab3}.switch.on:after{transform:translate(13px)}.view-options p{margin:0 0 0 auto;color:#8ba5b2;font-size:10px;line-height:1.5;text-align:right;max-width:460px}footer{padding:26px 2px 35px;display:flex;justify-content:space-between;gap:15px;color:#708e9f;font-size:10px;line-height:1.7;border-top:1px solid #1f384b;margin-top:28px}@media(max-width:950px){.workspace{grid-template-columns:1fr}.viewer{min-height:550px}.readout{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.readout-kicker,.power-callout,.power-explain,.readout-divider{grid-column:1}.selected-head,.selected-title,.selected-summary,.status-grid{grid-column:2}.selected-head{grid-row:1}.selected-title{grid-row:2}.selected-summary{grid-row:3}.status-grid{grid-row:4}.insight{grid-column:1/-1;margin-top:20px}.readout-divider{display:none}}@media(max-width:650px){.topbar{padding:0 18px;height:58px}.brand{font-size:11px}.topbar-meta{font-size:8px}.topbar-index{display:none}main{padding:0 14px}.intro{padding:37px 4px 30px}.intro h1{font-size:clamp(35px,8vw,48px)}.intro p{font-size:13px}.workspace{gap:10px}.viewer{min-height:410px;border-radius:13px}.viewer-caption{top:14px;left:13px;font-size:8px;gap:7px}.viewer-guide{left:13px;bottom:13px;font-size:9px}.angle-badge{right:10px;bottom:10px;padding:8px 10px;min-width:80px}.angle-badge strong{font-size:20px}.readout{display:flex;padding:21px;border-radius:13px}.readout-divider{display:block}.selected-summary{min-height:0}.insight{margin-top:20px}.control-panel,.cylinder-panel{border-radius:13px;padding:21px 17px;margin-top:10px}.section-top h2{font-size:19px}.cycle-note{font-size:9px;text-align:right}.control-row{flex-wrap:wrap;margin-bottom:24px}.speed-control{margin-left:0;width:100%;justify-content:space-between}.speed-control input{width:50%}.ignition-steps,.cylinder-cards{grid-template-columns:repeat(2,1fr)}.view-options{flex-wrap:wrap}.view-options p{margin:3px 0 0;text-align:left;max-width:none}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0s!important;animation-duration:0s!important}}.embed-mode .topbar{display:none}.embed-mode .app-shell{min-height:0}.embed-mode main{padding-top:1px}.embed-mode .intro{padding-top:36px}