:root{font-family:Noto Sans JP,sans-serif;color:#dce9e9;background:#09151b;font-synthesis:none}*{box-sizing:border-box}body{margin:0}canvas{display:block;width:100%;height:100%;touch-action:none}button,input{font:inherit}button{cursor:pointer}#viewport{position:absolute;inset:0}#app{height:100dvh;min-height:620px;position:relative;overflow:hidden}.overlay{position:absolute;pointer-events:none;inset:0;padding:32px 40px;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b6d9df25;padding-bottom:22px}.brand{display:flex;gap:14px;align-items:center}.name{font-size:21px;letter-spacing:5px;font-weight:700}.mono,.eyebrow{font-family:IBM Plex Mono,monospace;font-size:10px;letter-spacing:2px}.muted{color:#779299}.online{color:#8ce6c4;display:flex;align-items:center;gap:9px}.dot{width:6px;height:6px;border-radius:50%;background:#8ce6c4;box-shadow:0 0 12px #8ce6c4}.content{display:flex;justify-content:space-between;flex:1;padding-top:38px;gap:24px}.intro{max-width:260px}h1{font-size:34px;line-height:1.4;font-weight:400;margin:13px 0 16px;letter-spacing:-1px}.description{color:#8ca5aa;font-size:12px;line-height:2}.tag{display:inline-block;border:1px solid #759b9d45;padding:7px 10px;margin-top:12px;color:#8cf0d4}.panel{pointer-events:auto;width:246px;align-self:center;background:#0d2029d9;border:1px solid #789da12c;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:24px}.panel h2{font-size:12px;font-weight:500;margin:0 0 24px}.rule{height:1px;background:#87a9ae24;margin:22px 0}.row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#91a9ad;margin-bottom:13px}.value{color:#deeeed;font-family:IBM Plex Mono,monospace;font-size:11px}input[type=range]{width:100%;accent-color:#93e4cb;margin:0 0 22px;cursor:pointer}button{width:100%;border:1px solid #8bb3b54a;background:#b6d9d909;padding:12px;color:#dce9e9;font-size:11px}button:hover{background:#8ce6c421;border-color:#8ce6c4}footer{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #b6d9df25;padding-top:20px}.controls{display:flex;gap:28px;font-size:10px;color:#94aaad}.controls b{display:block;color:#cbdcdc;font-weight:400;margin-bottom:6px}.status{color:#93e4cb}.specimen-label{position:absolute;bottom:132px;left:50%;transform:translate(-50%);text-align:center;color:#98b1b6;line-height:2.3}.specimen-label strong{color:#d9eae7;font-weight:400;font-size:12px;letter-spacing:3px}.error{position:absolute;inset:30%;background:#102631;padding:30px;z-index:5;line-height:2}a{color:#93e4cb}@media(max-width:850px){.overlay{padding:20px}.intro{max-width:180px}h1{font-size:25px}.panel{width:200px;padding:16px}.description{font-size:10px}.controls{gap:15px}.specimen-label{left:40%}}@media(max-width:600px){#app{min-height:740px}.overlay{padding:16px}.name{font-size:16px}.connection{display:none}.content{padding-top:18px}.intro{max-width:180px}.description{display:none}h1{font-size:22px}.panel{position:absolute;bottom:95px;right:16px;width:170px;padding:13px}.panel h2,.panel .rule{margin:0 0 12px}.row{margin-bottom:7px}input[type=range]{margin-bottom:12px}.specimen-label{left:20%;bottom:150px}.controls{font-size:9px;gap:12px}}.panel{max-height:calc(100dvh - 210px);overflow-y:auto;align-self:flex-start}.panel h2{margin-bottom:14px}.panel .row{margin-bottom:7px}.panel input[type=range]{margin-bottom:12px}.panel .rule{margin:12px 0}.model-note{font-size:10px;line-height:1.6;color:#91a9ad}.specimen-label{bottom:100px}@media(max-width:600px){.panel{max-height:40dvh;bottom:90px}.intro{max-width:150px}.specimen-label{display:none}}.wireframe-control{cursor:pointer;gap:12px;min-height:28px}.wireframe-control input{accent-color:#93e4cb;cursor:pointer;width:16px;height:16px;margin:0;flex-shrink:0}.touch-controls{display:none}@media(pointer:coarse){.mouse-controls{display:none}.touch-controls{display:flex}}@media(max-width:600px){#app{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;height:auto;min-height:100dvh;padding:16px;overflow:visible}.overlay,.content{display:contents}header{grid-row:1;padding-bottom:16px}.intro{grid-row:2;max-width:none}.intro h1{margin:8px 0}.intro h1 br{display:none}.intro .tag{margin-top:4px}#viewport{position:relative;inset:auto;grid-row:3;height:clamp(280px,45dvh,400px);min-width:0}.panel{position:static;grid-row:4;width:100%;max-height:none;overflow:visible;padding:16px}footer{grid-row:5;padding-top:16px;align-items:start}.controls{flex-wrap:wrap;gap:16px;font-size:10px}.error{position:fixed;inset:20% 16px}}footer{flex-wrap:wrap;gap:16px 24px}.creator-credit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:11px;color:#94aaad}.creator-credit a{pointer-events:auto;display:inline-flex;align-items:center;min-height:32px;padding:4px 8px;text-underline-offset:4px}.creator-credit a:hover{color:#dce9e9}.creator-credit a:focus-visible{outline:2px solid #93e4cb;outline-offset:3px}@media(max-width:850px){.creator-credit{flex-basis:100%}}