:root{--bg-color: #000000;--text-color: #e0e0e0;--accent-red: #ff2200;--hal-core-yellow: #ffee55;--hal-glow-red: #e60000}*{box-sizing:border-box;margin:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body{width:100vw;height:100vh;height:100dvh;overflow:hidden;background-color:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;position:fixed}#app{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;background-color:#000}#hal-stage{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;touch-action:manipulation}#hal-container{position:relative;display:flex;justify-content:center;align-items:center;width:100vw;height:100vw;max-width:100vh;max-height:100vh}#hal-bezel{width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;transition:opacity .5s ease-in-out}#hal-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:2;transition:opacity .12s cubic-bezier(.2,.8,.2,1);opacity:.95;background:radial-gradient(circle closest-side,#eb1400f2,#dc0a00d9 30%,#b4000094 55%,#6e000047 75%,#28000014 90%,#0000)}#hal-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:3;transition:opacity .08s ease-out;background:radial-gradient(circle closest-side,#fff,#ff8 20%,#fc0 48%,#f40 78%,#f400);opacity:.9}body.mode-desk #hal-container{width:90vw;height:90vw;max-width:90vh;max-height:90vh}body.mode-desk #hal-bezel{display:block}body.mode-desk #hal-glow{width:58%;height:58%}body.mode-desk #hal-core{width:20px;height:20px}body.mode-enclosure #hal-bezel,body.mode-enclosure #status-bar{display:none!important}body.mode-enclosure #hal-container,body.mode-enclosure #hal-glow,body.mode-enclosure #hal-core,body.mode-enclosure #hal-stage{border:none!important;outline:none!important;box-shadow:none}body.mode-enclosure #hal-container{width:100vw;height:100vh}body.mode-enclosure #hal-glow{width:160vmax;height:160vmax;max-width:none;max-height:none}body.mode-enclosure #hal-core{width:96px;height:96px}body:not(.mode-enclosure) #hal-container{width:90vw;height:90vw;max-width:90vh;max-height:90vh}body:not(.mode-enclosure) #hal-bezel{display:block}body:not(.mode-enclosure) #hal-glow{width:58%;height:58%}body:not(.mode-enclosure) #hal-core{width:20px;height:20px}.state-thinking #hal-core{animation:hal-led-thinking .8s infinite alternate ease-in-out}@keyframes hal-led-thinking{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}to{transform:translate(-50%,-50%) scale(1);opacity:1}}#status-bar{position:absolute;top:env(safe-area-inset-top,16px);right:16px;display:flex;align-items:center;gap:8px;z-index:10;opacity:.35;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;transition:opacity .3s ease}#status-bar:hover,#status-bar:active{opacity:.9}#status-dot{width:7px;height:7px;border-radius:50%;background-color:#555;transition:background-color .3s ease}#status-dot.connected{background-color:#0f6;box-shadow:0 0 6px #0f6}#status-dot.processing{background-color:var(--accent-red);box-shadow:0 0 6px var(--accent-red)}#hold-indicator{position:absolute;bottom:calc(env(safe-area-inset-bottom,20px) + 20px);left:50%;transform:translate(-50%);color:#fff6;font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10;display:none!important}#hold-indicator.visible{opacity:1}#calibration-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;flex-direction:column;transition:opacity .3s ease}#calibration-overlay.hidden{opacity:0;pointer-events:none;display:none!important}.calibration-zone{flex:1;cursor:pointer;-webkit-tap-highlight-color:transparent}#calibration-zone-up:active{background:linear-gradient(180deg,rgba(255,34,0,.08) 0%,transparent 100%)}#calibration-zone-down:active{background:linear-gradient(0deg,rgba(255,34,0,.08) 0%,transparent 100%)}#calibration-hud{position:relative;width:100%;height:0;display:flex;justify-content:center;align-items:center}#calibration-guide{position:absolute;width:60%;height:1px;background:#ff220059;box-shadow:0 0 8px #f203}#calibration-label{position:absolute;top:12px;font-size:10px;letter-spacing:4px;color:#ff220080;text-transform:uppercase}#calibration-offset{position:absolute;top:30px;font-size:11px;letter-spacing:1px;color:#ffffff73;font-family:monospace}#long-press-ring-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:280px;height:280px;max-width:85vw;max-height:85vw;pointer-events:none;z-index:50;display:flex;justify-content:center;align-items:center;transition:opacity .2s ease,transform .2s cubic-bezier(.175,.885,.32,1.275)}#long-press-ring-container.hidden{opacity:0;transform:translate(-50%,-50%) scale(.85);visibility:hidden;display:none!important}#long-press-svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ff220026;stroke-width:3}.ring-progress{fill:none;stroke:#f20;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;filter:drop-shadow(0 0 8px rgba(255,34,0,.95)) drop-shadow(0 0 16px rgba(255,68,0,.7));transition:stroke-dashoffset .03s linear}#init-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent;z-index:9999;display:flex;justify-content:center;align-items:center;transition:opacity .6s ease,visibility .6s}#init-overlay.fade-out{opacity:0;visibility:hidden;pointer-events:none;display:none!important}.init-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px;max-width:360px;width:90vw}.init-eye{width:90px;height:90px;border-radius:50%;border:3px solid #333333;display:flex;justify-content:center;align-items:center;margin-bottom:24px;background:#080808;box-shadow:0 0 20px #f003}.init-glow{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#ff2200 0%,#bb0000 60%,transparent 100%);animation:init-eye-pulse 2s infinite alternate ease-in-out}@keyframes init-eye-pulse{0%{transform:scale(.85);opacity:.5}to{transform:scale(1.15);opacity:.95}}.init-title{font-size:24px;font-weight:700;letter-spacing:5px;color:#f0f0f0;margin-bottom:6px;white-space:nowrap}.init-subtitle{font-size:10px;letter-spacing:2px;color:#777;margin-bottom:32px;white-space:nowrap}.init-btn{background:#111;color:#f0f0f0;border:1px solid #444444;padding:14px 28px;font-size:12px;letter-spacing:3px;border-radius:2px;cursor:pointer;outline:none;box-shadow:0 4px 14px #00000080;transition:all .2s ease}.init-btn:active{background:#f20;border-color:#f20;color:#fff;box-shadow:0 0 20px #f209}#diag-panel{position:fixed;bottom:0;left:0;width:100vw;max-height:70vh;background:#0c0c0cf0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #222222;z-index:1000;padding:20px;color:#ccc;font-size:12px;font-family:monospace;overflow-y:auto;transition:transform .3s ease}#diag-panel.hidden{transform:translateY(100%);pointer-events:none;display:none!important}.diag-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #222222}.diag-header h3{font-size:13px;letter-spacing:2px;color:#f31}#btn-close-diag{background:none;border:none;color:#888;font-size:18px;cursor:pointer}.diag-body{display:flex;flex-direction:column;gap:12px}.diag-row{display:flex;justify-content:space-between;align-items:center}.diag-row input{background:#1c1c1c;border:1px solid #333333;color:#fff;padding:4px 8px;font-family:monospace;font-size:11px;border-radius:3px;width:140px}.diag-row button{background:#2a2a2a;border:1px solid #444444;color:#fff;padding:4px 10px;font-size:11px;border-radius:3px;margin-left:6px}.meter-bar{width:120px;height:10px;background:#222;border-radius:5px;overflow:hidden}.meter-fill{width:0%;height:100%;background:linear-gradient(90deg,#f90,#f20);transition:width .05s linear}.diag-action-btn{background:#1f1f1f;border:1px solid #333333;color:#f31;padding:10px;font-size:11px;letter-spacing:1.5px;border-radius:4px;margin-top:8px;cursor:pointer}body.sleep-mode{background-color:#000}body.sleep-mode #hal-bezel,body.sleep-mode #hal-glow{opacity:0!important;transition:opacity 3s ease-in-out!important}body.sleep-mode #hal-core{transform:translate(-50%,-50%) scale(.15)!important;opacity:.8!important;box-shadow:none!important;transition:all 3s ease-in-out!important}
