:root{font-family:Inter,system-ui,Arial,sans-serif;color:#e8f1ff;background:#0d1729}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{border:1px solid #354a68;background:#213451;color:#edf4ff;border-radius:9px;padding:8px 10px;cursor:pointer}button:hover{background:#35577d}button.active{background:#138cc8;border-color:#42c6fc}button:disabled{opacity:.45}input,select{background:#13253d;border:1px solid #405575;border-radius:7px;color:#fff;padding:7px;max-width:100%}input[type=color]{padding:1px;width:42px;height:32px}input[type=range]{width:100%}header{height:62px;display:flex;align-items:center;gap:9px;padding:8px 13px;background:#14223b;border-bottom:1px solid #31425e;white-space:nowrap}header strong{font-size:17px}header small{color:#9fc5e5}.brand{min-width:200px}.group{display:flex;gap:5px;align-items:center}.grow{flex:1}main{display:flex;height:calc(100dvh - 96px)}nav{width:64px;background:#14223b;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 5px;overflow:auto}nav button{width:48px;min-height:43px;font-size:21px;padding:6px}.stage{flex:1;position:relative;overflow:hidden;background:#1e3e32;touch-action:none}#board{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.panel{width:275px;background:#19283f;border-left:1px solid #32455e;padding:12px;overflow:auto}.panel h3{margin:6px 0 12px;font-size:15px}.panel label{display:block;margin:9px 0 4px;color:#b8cce5;font-size:12px}.panel .row{display:flex;gap:5px;flex-wrap:wrap}.panel .row button{font-size:12px}.panel input:not([type=color]):not([type=range]),.panel select{width:100%}.hint{font-size:12px;color:#9fb3ce;line-height:1.5}.hidden{display:none!important}.status{height:34px;background:#16243b;border-top:1px solid #31425e;display:flex;align-items:center;gap:12px;padding:0 12px;color:#b5cbe5;font-size:12px}.status button{padding:2px 9px}.pill{border-radius:99px;padding:4px 8px;background:#294563}.symbol{font-family:Georgia,serif;font-size:20px!important;min-width:38px}.toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#132239;color:#fff;padding:10px 15px;border-radius:12px;pointer-events:none;box-shadow:0 4px 24px #0006}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:5}.modal>div{width:min(500px,94vw);background:#1b2d48;padding:22px;border-radius:15px}.modal textarea{width:100%;height:110px;background:#0e2039;color:white;border:1px solid #59718f;border-radius:8px;padding:10px}#simControls{padding:9px;background:#253c55;border-radius:10px}.swatches{display:flex;gap:5px;flex-wrap:wrap}.swatches button{width:28px;height:28px;padding:0;border:2px solid #ffffff77}#board text{user-select:none}#board .hit{cursor:move}#board .handle{cursor:nwse-resize}#board .rotate-handle{cursor:grab}@media(max-width:850px){.brand{min-width:0}.brand small{display:none}header{overflow:auto}.panel{position:absolute;right:0;top:62px;bottom:34px;z-index:3;box-shadow:-8px 0 20px #0005}main{height:calc(100dvh - 96px)}nav{width:52px}nav button{width:43px}.stage{min-width:0}}@media(max-width:550px){header{height:57px;padding:5px}.brand strong{font-size:12px}.group button{padding:7px;font-size:12px}main{height:calc(100dvh - 91px)}.panel{top:57px;width:min(270px,80vw)}}
#hatInkCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}#hatInkOptions{position:absolute;top:8px;left:12px;z-index:5;background:#12263cdd;padding:5px 10px;border-radius:9px;display:flex;gap:12px;align-items:center;font-size:12px;color:#eef}#hatInkOptions input{vertical-align:middle}#hatInkStats{font-variant-numeric:tabular-nums;color:#9fe4fd}#hatInkOptions label{white-space:nowrap}@media(max-width:720px){#hatInkOptions{top:46px;max-width:calc(100% - 24px);flex-wrap:wrap}}


#hatLibrary{margin-top:8px}#hatSearch{width:100%;margin:0 0 10px}.hat-cats{display:grid;grid-template-columns:1fr 1fr;gap:5px}.hat-cat{font-size:11px;padding:9px 5px;text-align:left;white-space:normal;line-height:1.3}.hat-cat.active{background:#087fb7;border-color:#51c7f3}.hat-items{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.hat-group-title{grid-column:1/-1;color:#b5d5ed;font-size:12px;padding:5px 0;line-height:1.5}.hat-item{font-size:12px;min-height:46px;text-align:left;white-space:normal;line-height:1.3;background:#263e5b}.hat-item:hover{background:#176d99}#hatForceDetails{margin:10px 0;border:1px solid #415c79;border-radius:9px;padding:8px}#hatForceDetails summary{cursor:pointer;font-size:13px;font-weight:600}#hatForceDetails #forceTools{padding-top:5px}@media(min-width:950px){.panel{width:325px}}@media(max-width:550px){.hat-cats{grid-template-columns:1fr 1fr}.hat-item{min-height:42px}}

/* V0.2.9 - realistic board presets, decorative frame, touch-safe */
.hat-board-settings{border:1px solid #47647b;border-radius:12px;padding:11px;margin:10px 0;background:#152b42}
.hat-board-settings h3{margin:0 0 10px;font-size:14px}.hat-board-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hat-board-preset{padding:5px 3px;font-size:11px;min-width:0;white-space:normal}.hat-board-preset.active{outline:2px solid #52d7ff;background:#145d7c}
.hat-board-sample{height:51px;margin-bottom:5px;border:4px ridge #a0a9a8;display:flex;align-items:center;justify-content:center;font:italic 12px Georgia,serif;border-radius:3px;white-space:nowrap}
.hat-board-sample.green{background:#204533;color:#f4f4e4}.hat-board-sample.white{background:#f9fafc;color:#172d41}.hat-board-sample.black{background:#101215;color:#fafafa}
.hat-check{display:flex!important;align-items:center;gap:8px;font-size:12px!important}.hat-check input{width:auto!important;accent-color:#35b3e7}
.hat-real-frame{position:absolute;inset:7px;z-index:4;pointer-events:none;border:12px ridge #b9c6ce;border-radius:5px;box-shadow:inset 0 0 8px #0007,0 3px 12px #0009}
.hat-real-frame.wood{border-color:#9b6033;border-style:ridge;box-shadow:inset 0 0 12px #000a,0 3px 12px #0009}
.hat-real-frame.dark{border-color:#303b42;border-style:solid;box-shadow:inset 0 0 9px #0009,0 3px 12px #0009}
.hat-frame-tray{position:absolute;bottom:-17px;left:15%;right:15%;height:13px;border-radius:2px 2px 7px 7px;background:linear-gradient(#e6ebec,#889ba6 65%,#596e7d);box-shadow:0 3px 6px #0006}
.hat-real-frame.wood .hat-frame-tray{background:linear-gradient(#c48b4b,#75431f)}.hat-real-frame.dark .hat-frame-tray{background:linear-gradient(#657079,#1d252a)}
.hat-real-frame.no-tray .hat-frame-tray{display:none}.hat-chalk{display:inline-block;background:#f8f7eb;width:25px;height:5px;margin:3px 8px;border-radius:2px;transform:rotate(-3deg)}.hat-chalk.short{width:13px;background:#e7a5b5;margin-left:0}.hat-eraser{display:inline-block;width:34px;height:8px;background:#3b4854;border-radius:3px;border-bottom:3px solid #d5cbb6}
@media(max-width:650px){.hat-real-frame{inset:4px;border-width:7px}.hat-frame-tray{bottom:-11px;height:9px}}

/* V0.2.9 Classroom Pro */
.hat-028-section{background:#122a42;border:1px solid #3c617e;border-radius:12px;padding:11px;margin:12px 0}.hat-028-section h3{margin:0 0 9px}.hat-028-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.hat-028-actions button{font-size:12px;padding:9px 4px}.hat-thumb{width:48px;height:42px;flex-shrink:0;background:#213e56;border:1px solid #55758e;border-radius:6px;display:grid;place-items:center}.hat-thumb svg{width:44px;height:38px;overflow:visible}.hat-item{display:flex!important;align-items:center;gap:8px;text-align:left!important}.hat-item span:last-child{flex:1}.hat-028-section input[type=range]{width:100%}.hat-presentation header,.hat-presentation #toolbar,.hat-presentation #panel,.hat-presentation footer,.hat-presentation #hatInkOptions{display:none!important}.hat-presentation main{height:100vh!important}.hat-presentation .stage{width:100%!important;height:100vh!important}.hat-present-exit{position:fixed;right:15px;top:14px;z-index:9999;opacity:.22;background:#15283b;color:white;border:1px solid #789;border-radius:9px;padding:9px}.hat-present-exit:hover,.hat-present-exit:focus{opacity:1}.hat-present-exit.hidden{display:none}.hat-item[draggable=true]{cursor:grab}.hat-locked{opacity:.85}.hat-028-status{font-size:11px;color:#a9c6dc;padding:5px 0}.hat-028-section .hat-check{margin-top:8px}


.hat-029-section{background:#122a42;border:1px solid #427c9b;border-radius:12px;padding:11px;margin:12px 0}.hat-029-section h3{margin:0 0 8px}.hat-029-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.hat-029-actions button{font-size:12px;padding:10px 5px}.hat-029-hint{color:#b6d4ea;font-size:12px;line-height:1.5;margin:8px 0}.hat-029-count{font-weight:bold;color:#75e4ef}.hat-029-outline{pointer-events:none}


#hat030{margin:12px 0;padding:12px;border:1px solid #4b7292;border-radius:12px;background:#203550}#hat030 h3{margin:0 0 9px;font-size:14px}#hat030 .actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}#hat030 .actions button{font-size:12px;min-height:37px}#hat030 .tiny{font-size:11px;color:#b7d0e9;line-height:1.5}#hat030 label{margin-top:9px}#hat030 select{width:100%}#hat030 .full{grid-column:1/-1}

#hat031Panel{padding:10px;border:1px solid #6483a6;border-radius:10px;margin:12px 0;background:#213650}#hat031Panel h3{margin:0 0 8px}.hat031-grip{cursor:grab;pointer-events:all}.hat031-box{pointer-events:none}.hat031-grip:active{cursor:grabbing}
#hat032Panel{margin:12px 0;padding:10px;border:1px solid #6284a5;border-radius:10px;background:#203852}#hat032Panel select,#hat032Panel input{width:100%;margin:4px 0 8px}#hat032Panel .hat032row{display:grid;grid-template-columns:1fr 1fr;gap:7px}#hat032Panel .hat032row button{min-height:35px}#hat032Panel label{font-size:12px}#hat032Panel .hint{line-height:1.5}


#hatInputBar{position:absolute;left:12px;bottom:14px;z-index:2;background:#13243ce8;border:1px solid #44617b;border-radius:12px;padding:7px 10px;display:flex;gap:12px;align-items:center;font-size:12px;color:#e2f0ff;box-shadow:0 4px 20px #0004;pointer-events:auto}#hatInputBar label{display:flex;align-items:center;gap:5px;white-space:nowrap}#hatInputBar input{accent-color:#35b3e7}#hatInputBar small{color:#b3d3ed}#board{touch-action:none;overscroll-behavior:contain}#hatLibrary .hat-item{min-height:54px}#hatLibrary .hat-item:focus-visible{outline:2px solid #5de0ff}@media(max-width:600px){#hatInputBar{left:5px;bottom:5px;right:5px;gap:7px;flex-wrap:wrap;font-size:10px}}
#hatLibrary .hat-item::before{content:'◇';display:inline-grid;place-items:center;margin-right:7px;width:27px;height:27px;border:1px solid #6385a6;border-radius:7px;background:#142b45;color:#7fd7ff;font-size:18px}#hatLibrary .hat-item[data-shape="force"]::before{content:'F⃗'}#hatLibrary .hat-item[data-shape="chargePlus"]::before{content:'⊕'}#hatLibrary .hat-item[data-shape="chargeMinus"]::before{content:'⊖'}#hatLibrary .hat-item[data-shape="lensConvex"]::before{content:'()'}#hatLibrary .hat-item[data-shape="gasPiston"]::before{content:'▤'}#hatLibrary .hat-item[data-shape="spring"]::before{content:'〰'}

@page{size:landscape;margin:8mm}body{margin:0}svg{width:100%;height:95vh}
@page{size:landscape;margin:8mm}body{margin:0}svg{width:100%;height:95vh}