:root{--panel-bg: #8fadc5;--settings-bg: #c5f0dd;--button-bg: #fff;--button-hover: #00ff94;--menu-bg: #e1bea5;--menu-hover: #ff9100;--ink: #000;--groovy-yellow: #ffff00;--groovy-green: #00ff94;--groovy-orange: #ff6b00;--groovy-pink: #ff00c5;--groovy-purple: #9d4edd;--groovy-blue: #0081ff;--border: 2px solid var(--ink);--border-thick: 3px solid var(--ink);--shadow: 5px 5px 0 var(--ink);--shadow-small: 3px 3px 0 var(--ink);--shadow-xs: 2px 2px 0 var(--ink);color:var(--ink);font-family:obviously,sans-serif;font-weight:500;font-style:normal;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden;background:#f0f0f0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,select{font:inherit;touch-action:manipulation}button{color:var(--ink)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--groovy-blue);outline-offset:3px}#toolbar-wrapper{position:absolute;bottom:0;left:16px;z-index:10;display:flex;flex-direction:column;max-width:calc(100vw - 32px)}#title-block{align-self:flex-start;max-width:100%;padding:8px 12px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--groovy-yellow);font-family:fat,Impact,fantasy;font-size:42px;font-weight:500;line-height:1;white-space:nowrap;text-shadow:2px 2px 0 var(--ink);animation:title-flash 6s linear infinite}#controls{position:relative;z-index:21;display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:12px;border:var(--border-thick);background:var(--panel-bg);box-shadow:var(--shadow);color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}#toolbar-wrapper.minimized #controls,#toolbar-wrapper.minimized #toolTip{display:none!important}.control-group{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.label-input-pair{display:flex;align-items:center;gap:8px}.control-button,.close-button,#miniToolbar button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 12px;border:var(--border);border-radius:0;background:var(--button-bg);box-shadow:var(--shadow-small);font-family:obviously,sans-serif;font-size:13px;font-weight:500;font-style:normal;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .06s ease,box-shadow .06s ease,background-color .06s ease}@media (hover: hover){.control-button:hover,.close-button:hover,#miniToolbar button:hover,select:hover{transform:translate(1px,1px);box-shadow:var(--shadow-xs);background:var(--button-hover)}.menu-item:hover{background:var(--menu-hover)}input[type=checkbox]:hover{transform:translate(1px,1px);box-shadow:none}}.control-button:active,.close-button:active,#miniToolbar button:active,select:active{transform:translate(3px,3px);box-shadow:none}#camBtn svg path{fill:var(--groovy-orange)}.tool.active,#miniToolbar .tool.active{transform:translate(3px,3px);box-shadow:none;background:var(--groovy-yellow)}#miniToolbar .primary{background:var(--groovy-yellow)}.burger-menu{position:relative}#burger-icon.control-button{flex-direction:column;gap:4px;width:40px;padding:7px}#burger-icon .bar{width:100%;height:3px;background:var(--ink)}.menu-content{position:absolute;bottom:calc(100% + 8px);left:0;z-index:1000;display:none;min-width:180px;border:var(--border);background:var(--menu-bg);box-shadow:var(--shadow)}.menu-content.show{display:block}.menu-item{display:block;width:100%;padding:11px 14px;border:0;border-bottom:var(--border);background:transparent;font-family:obviously,sans-serif;font-size:13px;font-weight:500;font-style:normal;letter-spacing:.05em;text-align:left;text-transform:uppercase;cursor:pointer}.menu-item:last-child{border-bottom:0}.menu-item.active{animation:groovy-background-flash 6s linear infinite}#helpBtn,#miniToolbar #miniHelpBtn{align-self:center;width:38px;min-width:38px;height:38px;padding:0;border:var(--border);border-radius:0;background:red;color:var(--groovy-yellow);box-shadow:var(--shadow-xs);font-family:obviously,sans-serif;font-size:20px;font-weight:900;cursor:help}input[type=color]{width:34px;height:34px;padding:0;overflow:hidden;border:var(--border);border-radius:0;background:transparent;box-shadow:var(--shadow-xs);cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:0}input[type=color]::-moz-color-swatch{border:0;border-radius:0}input[type=range]{width:120px;height:24px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:12px;border:var(--border);background:var(--groovy-blue)}input[type=range]::-moz-range-track{height:8px;border:var(--border);background:var(--groovy-blue)}input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);border-radius:0;background:var(--groovy-yellow);box-shadow:var(--shadow-xs)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:var(--border);border-radius:0;background:var(--groovy-yellow);box-shadow:var(--shadow-xs)}.sliderWrap{position:relative;display:flex;align-items:center}.sliderWrap .zeroDot{position:absolute;top:50%;left:50%;display:none;width:6px;height:6px;border:1px solid var(--ink);background:var(--groovy-yellow);transform:translate(-50%,-50%);pointer-events:none}.sliderWrap.twirl .zeroDot{display:block}input[type=checkbox]{position:relative;flex-shrink:0;width:24px;height:24px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);border-radius:0;background:var(--button-bg);box-shadow:var(--shadow-xs);cursor:pointer;transition:transform .06s ease,box-shadow .06s ease,background-color .06s ease}input[type=checkbox]:checked{background:var(--groovy-yellow)}input[type=checkbox]:checked:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ink);font-size:14px;font-weight:900;line-height:1;content:"✓"}select{min-height:38px;padding:0 12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);border-radius:0;background:var(--button-bg);box-shadow:var(--shadow-small);color:var(--ink);font-family:obviously,sans-serif;font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform .06s ease,box-shadow .06s ease,background-color .06s ease}#settings-panel{position:fixed;top:16px;left:16px;z-index:15;display:flex;flex-direction:column;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:hidden;border:var(--border-thick);background:var(--settings-bg);box-shadow:var(--shadow);color:var(--ink)}.settings-panel-header{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:var(--border-thick);background:var(--ink);color:var(--settings-bg);font-size:14px;font-weight:500;text-transform:uppercase}.close-button{min-width:34px;min-height:34px;padding:0;font-size:22px}.settings-panel-content{display:flex;flex-direction:column;gap:12px;padding:16px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:obviously,sans-serif;font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.settings-row>label:first-child{flex:1 1 0;min-width:112px}.settings-row>input[type=range],.settings-row>select,.settings-row>.settings-control{width:180px;flex:0 1 180px}.settings-row>select{min-width:0}.settings-control{display:flex;justify-content:flex-start}.settings-row>.control-button{flex:1}#canvasWrap{position:absolute;top:0;right:0;bottom:0;left:0;background:#f0f0f0}#glcanvas,#brushHud{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}#glcanvas{touch-action:none}#brushHud{pointer-events:none}.status-message{position:fixed;top:16px;right:16px;z-index:25;display:none;max-width:min(360px,calc(100vw - 32px));padding:10px 14px;border:var(--border);background:var(--groovy-yellow);box-shadow:var(--shadow-small);font-size:12px;font-weight:500}#videoLoading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:none;align-items:center;justify-content:center;background:var(--ink);color:var(--groovy-yellow);font-size:18px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}#helpOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;background:#000;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}#helpOverlay.open{opacity:1;visibility:visible}#helpOverlay .panel{width:100%;max-width:min(500px,calc(100vw - 40px));margin:auto;padding:24px 28px;border:var(--border-thick);background:var(--groovy-yellow);box-shadow:8px 8px 0 var(--ink);color:var(--ink);font-size:14px;font-weight:500;cursor:default}#helpOverlay h2{margin:0 0 10px;font-size:20px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}#helpOverlay h3{margin:16px 0 6px;padding-bottom:2px;border-bottom:var(--border);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}#helpOverlay p,#helpOverlay li{margin:0;font-size:13px;line-height:1.6;text-transform:uppercase}#helpOverlay ul{margin:0;padding:0;list-style:none}#helpOverlay li{padding:3px 0}#helpOverlay b{padding:2px 6px;background:var(--ink);color:var(--groovy-yellow);font-family:Menlo,Consolas,monospace;font-size:12px;font-weight:500;white-space:nowrap}#helpOverlay #helpClose{margin-top:16px}#miniToolbar{position:absolute;top:10px;left:10px;z-index:5;display:none;gap:10px}body.ui-hidden #toolbar-wrapper{display:none}body.ui-hidden #miniToolbar{display:flex}#adjustHud{position:fixed;z-index:9999;display:none;align-items:center;gap:6px;padding:4px 10px;border:2px solid var(--groovy-yellow);background:var(--ink);color:var(--groovy-yellow);font-size:13px;font-weight:500;white-space:nowrap;transform:translate(16px,-50%);pointer-events:none}#adjustHud.visible{display:flex}#adjustHud-bar{position:relative;width:60px;height:6px;overflow:hidden;border:1px solid var(--groovy-yellow);background:#333}#adjustHud-fill{position:absolute;top:0;left:0;width:0%;height:100%;background:var(--groovy-yellow)}#toolTip{position:relative;z-index:20;display:none;align-items:center;gap:6px;padding:6px 12px;border:var(--border-thick);border-bottom:none;background:var(--groovy-yellow);box-shadow:var(--shadow);color:var(--ink);font-size:12px;font-weight:500;text-transform:uppercase}#toolTip.visible{display:flex}#toolTip-text{flex:1}#toolTip-close{flex-shrink:0;padding:0 0 0 6px;border:none;background:none;font-size:12px;font-weight:900;line-height:1;cursor:pointer}@media (hover: hover){#toolTip-close:hover{text-decoration:underline}}body.drag-over:after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;border:6px dashed var(--ink);background:#00ff948c;color:var(--ink);font-family:obviously,sans-serif;font-size:48px;font-weight:900;text-transform:uppercase;pointer-events:none;content:"Drop media here"}@keyframes title-flash{0%,to{color:var(--groovy-yellow)}25%{color:var(--groovy-green)}50%{color:var(--groovy-orange)}75%{color:var(--groovy-pink)}}@keyframes groovy-background-flash{0%,to{background-color:var(--groovy-yellow)}25%{background-color:var(--groovy-green)}50%{background-color:var(--groovy-orange)}75%{background-color:var(--groovy-pink)}}@keyframes shadow-pulse{0%,to{box-shadow:var(--shadow-small)}50%{box-shadow:6px 6px 0 var(--ink)}}.pulse{animation:shadow-pulse 1.5s ease-in-out infinite}@media (max-width: 760px){#toolbar-wrapper{left:8px;max-width:calc(100vw - 16px)}#title-block{padding:7px 10px;font-size:30px}#controls{gap:8px;max-width:calc(100vw - 16px);padding:10px}#settings-panel{top:8px;left:8px;width:calc(100vw - 16px);max-height:min(75vh,calc(100vh - 16px));max-height:min(75dvh,calc(100dvh - 16px))}#helpOverlay{padding:10px}#helpOverlay .panel{max-width:calc(100vw - 20px);padding:20px 24px;font-size:12px}#helpOverlay p,#helpOverlay li{font-size:12px}}@media (max-width: 380px){#title-block{font-size:26px}}@media (pointer: coarse){.control-button,.menu-item,.close-button,#miniToolbar button,select{min-height:44px}input[type=range]{min-height:38px}#helpBtn,#miniToolbar #miniHelpBtn{width:44px;min-width:44px;height:44px;font-size:22px}}@media (hover: hover) and (pointer: fine) and (min-width: 744px){#title-block,.settings-panel-header{cursor:grab}}#camBtn{-webkit-touch-callout:none;touch-action:none}#camBtn.recording{animation:groovy-background-flash 1s linear infinite}.control-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}