@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;600&display=swap";:root{color:#f4f1e7;background:#15191b;font-family:Noto Serif JP,serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font:inherit}.app-shell{flex-direction:column;min-height:100vh;padding:clamp(1.5rem,4vw,4rem);display:flex}.panel-label{color:#d9ac69;letter-spacing:.16em;margin:0 0 .7rem;font:500 .67rem/1.2 DM Mono,monospace}h1,h2,p{margin-top:0}h1{letter-spacing:.08em;margin-bottom:.4rem;font-size:clamp(2.4rem,6vw,5.5rem);font-weight:500;line-height:1.1}.intro{color:#aeb8ba;letter-spacing:.08em;margin:0;font-size:clamp(.88rem,1.3vw,1.02rem)}.viewer-layout{flex:1;grid-template-columns:minmax(0,1fr) minmax(16rem,21rem);align-items:stretch;gap:clamp(1.25rem,3vw,3.5rem);min-height:min(62vh,44rem);display:grid}.stage-wrap{background:#15191b;border:1px solid #344044;min-height:30rem;position:relative;overflow:hidden}.stage{width:100%;height:100%;min-height:30rem}.stage canvas{width:100%;height:100%;display:block}.stage-message{color:#d7d2c5;text-align:center;background:#15191bdb;place-items:center;padding:2rem;display:grid;position:absolute;inset:0}.gesture-hint{color:#ced3ce;letter-spacing:.08em;pointer-events:none;margin:0;font:.64rem/1.4 DM Mono,monospace;position:absolute;bottom:.9rem;left:1rem}.control-panel{flex-direction:column;justify-content:center;align-items:stretch;padding:1.2rem 0;display:flex}.control-panel h2{letter-spacing:.08em;margin-bottom:.7rem;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:500}.panel-copy{color:#adb5b5;font-size:.86rem;line-height:1.9}.direction-grid{grid-template-columns:repeat(2,1fr);gap:.55rem;margin:1.4rem 0 1rem;display:grid}.direction-button,.reset-button{color:#e7e5dd;cursor:pointer;background:0 0;border:1px solid #3c4749;transition:background .2s,border-color .2s,color .2s}.direction-button{text-align:left;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:4.3rem;padding:.7rem;display:flex}.direction-button span{font-size:.9rem}.direction-button small{color:#8e9a9a;font:.65rem DM Mono,monospace}.direction-button:hover,.direction-button:focus-visible{border-color:#d9ac69;outline:none}.direction-button.is-active{color:#172023;background:#d9ac69;border-color:#e0b16b}.direction-button.is-active small{color:#394243}.reset-button{letter-spacing:.04em;padding:.75rem;font-size:.78rem}.reset-button:hover,.reset-button:focus-visible{color:#172023;background:#e7e5dd;border-color:#e7e5dd;outline:none}.reset-button.is-active-control{color:#172023;background:#d9ac69;border-color:#d9ac69}@media (width<=760px){.app-shell{padding:1.4rem}.viewer-layout{grid-template-columns:1fr;min-height:auto}.stage-wrap,.stage{min-height:min(73vh,36rem)}.control-panel{padding:.5rem 0 1.5rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}