*{box-sizing:border-box}body{margin:0;color:#29423f;background:#f4efe6;font:14px system-ui,sans-serif}header{height:77px;display:flex;justify-content:space-between;align-items:center;padding:0 34px;border-bottom:1px solid #d7d4c6;background:#fbf8f0}.brand{font:600 27px Georgia,serif;letter-spacing:-.8px}.brand span{color:#3d7d76}header p{font:italic 14px Georgia,serif;color:#7b8575}main{display:grid;grid-template-columns:minmax(0,1fr) 305px;height:calc(100dvh - 77px);min-height:530px}#stage{position:relative;min-width:0;background:#f4efe6}#threeContainer{width:100%;height:100%;touch-action:none}#threeContainer canvas{display:block;width:100%;height:100%}.stage-note{position:absolute;left:26px;top:25px;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;color:#637d70;margin:0 0 9px}.stage-note h1{font:400 42px Georgia,serif;letter-spacing:-1px;margin:0}.stage-note p:last-child{font-size:12px;color:#7b8978;max-width:360px;line-height:1.6}aside{background:#fffcf5;border-left:1px solid #dbd9ca;overflow:auto;padding:25px 23px}aside h2{font:25px Georgia,serif;margin:0 0 16px}label{display:block;font-size:11px;font-weight:600;margin:17px 0 7px}select,button{font:inherit;color:inherit;border:1px solid #c6d1bd;border-radius:7px;background:#f9f8ef;padding:10px;cursor:pointer}select{width:100%;font-size:12px}button:hover{background:#e8eddd}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b69043;outline-offset:3px}.row{display:flex;gap:8px}.row button{flex:1;font-size:11px}.presets{margin-top:10px}.presets button{padding:6px}.row+.row{margin-top:8px}.primary{background:#3d7b70;color:#fffef2;border-color:#3d7b70}.primary:hover{background:#30695f}input[type=range]{width:100%;accent-color:#3d7b70}.fold-label{display:flex;justify-content:space-between;margin-top:22px}.fold-label label{margin:0}.fold-label output{font:22px Georgia,serif;color:#45766b}.helper{font-size:11px;line-height:1.6;color:#7c8778}.section{border-top:1px solid #dddccb;margin-top:22px;padding-top:20px}.toggle{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:12px}.toggle input{accent-color:#3d7b70}.stats{display:flex;gap:10px;margin-top:20px;border-top:1px solid #e1e1d2;padding-top:15px}.stats>div{flex:1}.stats strong{display:block;font-size:19px;font-weight:500}.stats span{font-size:8px;letter-spacing:1px;color:#7c8778}#status{font-size:11px;line-height:1.6;color:#4d7b62;min-height:36px;margin-top:14px}details{font-size:11px;line-height:1.65;margin-top:20px;color:#7b8777}summary{cursor:pointer;font-weight:600;color:#365a51}details a{color:#3d7b70}.view-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:10px;background:#fffcf1de;border:1px solid #d1d8bf;border-radius:20px;padding:9px 16px;white-space:nowrap}#svgViewer{display:none}#gpuMathCanvas{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}.thumb{width:44px;height:44px;border-radius:7px;object-fit:cover;float:right;margin:0 0 7px 12px}#about{display:none}@media(max-width:760px){header{height:63px;padding:0 18px}.brand{font-size:24px}header p{display:none}main{grid-template-columns:1fr;height:auto;min-height:0}#stage{height:58dvh;min-height:370px}aside{border-left:0;border-top:1px solid #dbd9ca;padding:20px}.stage-note{left:20px;top:18px}.stage-note h1{font-size:31px}.stage-note p:last-child{font-size:10px;max-width:250px}.view-hint{font-size:8px;bottom:12px;padding:8px 11px}.view-hint .keys{display:none}aside h2{font-size:24px}.stats{margin-top:16px}.section{margin-top:18px;padding-top:17px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}