*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;width:100%;height:100%;font-family:Consolas,Monaco,Courier New,monospace}body{background:radial-gradient(circle at center,#000,#0a0a0a,#050505);color:#0f0;position:fixed;inset:0;transition:background .6s ease}body:before{content:"";position:fixed;inset:-50%;background:radial-gradient(circle at center,var(--ambilight-color, transparent) 0%,transparent 60%);opacity:var(--ambilight-intensity, 0);pointer-events:none;z-index:0;transition:opacity .6s ease,background .6s ease;filter:blur(60px)}.mobile-container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.console-log{position:fixed;left:10px;top:50%;transform:translateY(-50%);width:180px;max-height:60vh;overflow:hidden;font-family:Consolas,Monaco,Courier New,monospace;font-size:9px;color:#00ff004d;pointer-events:none;z-index:5;line-height:1.4}.console-entry{opacity:0;transform:translate(-10px);margin-bottom:4px;white-space:nowrap;animation:fadeInLog .3s ease forwards}.console-entry.fade-out{animation:fadeOutLog 2s ease forwards}@keyframes fadeInLog{to{opacity:.4;transform:translate(0)}}@keyframes fadeOutLog{0%{opacity:.4}to{opacity:0;transform:translateY(-5px)}}.console-timestamp{color:#64646480;margin-right:6px}.console-message{color:#00ff0059}.mobile-controls{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:100}.mobile-power-button{width:70px;height:70px;border:none;border-radius:50%;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:3px solid rgba(255,255,255,.4);background:radial-gradient(circle,#141414f2,#000000e6);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 30px #0009;position:relative;overflow:hidden}.mobile-power-button:before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:linear-gradient(135deg,#fff6,#ffffff1a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}.mobile-power-button.off{box-shadow:0 0 40px #ff0000b3,0 0 60px #f006,inset 0 0 25px #ff000040,0 6px 30px #0009;border-color:#f009;color:#f44;animation:pulse-red 2s ease-in-out infinite}.mobile-power-button.on{box-shadow:0 0 40px #00ff00b3,0 0 60px #0f06,inset 0 0 25px #00ff0040,0 6px 30px #0009;border-color:#0f09;color:#4f4;animation:pulse-green 2s ease-in-out infinite}.mobile-power-button:active{transform:scale(.92)}@keyframes pulse-red{0%,to{box-shadow:0 0 40px #ff0000b3,0 0 60px #f006,inset 0 0 25px #ff000040,0 6px 30px #0009}50%{box-shadow:0 0 50px #ff0000e6,0 0 80px #ff000080,inset 0 0 35px #ff00004d,0 6px 30px #0009}}@keyframes pulse-green{0%,to{box-shadow:0 0 40px #00ff00b3,0 0 60px #0f06,inset 0 0 25px #00ff0040,0 6px 30px #0009}50%{box-shadow:0 0 50px #00ff00e6,0 0 80px #00ff0080,inset 0 0 35px #00ff004d,0 6px 30px #0009}}.mobile-camera-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90vw,90vh);height:min(90vw,90vh);max-width:500px;max-height:500px;display:flex;justify-content:center;align-items:center}.emotion-wheel{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}#video{display:none}#canvas{width:100%;height:100%;border-radius:50%;background:#000;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 60px #ffffff80,0 0 100px #ffffff4d,inset 0 0 30px #ffffff26,inset 0 0 60px #00ffff0d;position:relative;z-index:2}.emotion-indicator{position:absolute;top:50%;left:50%;width:calc(180px + var(--beam-length, 0px));height:8px;transform-origin:left center;pointer-events:none;z-index:1;transition:all .3s cubic-bezier(.4,0,.2,1)}.emotion-indicator[data-angle="0"]{transform:translateY(-50%) rotate(0)}.emotion-indicator[data-angle="51.4"]{transform:translateY(-50%) rotate(51.4deg)}.emotion-indicator[data-angle="102.8"]{transform:translateY(-50%) rotate(102.8deg)}.emotion-indicator[data-angle="154.2"]{transform:translateY(-50%) rotate(154.2deg)}.emotion-indicator[data-angle="205.6"]{transform:translateY(-50%) rotate(205.6deg)}.emotion-indicator[data-angle="257"]{transform:translateY(-50%) rotate(257deg)}.emotion-indicator[data-angle="308.4"]{transform:translateY(-50%) rotate(308.4deg)}.emotion-beam{position:relative;width:100%;height:100%;display:flex;align-items:center}.beam-core{position:absolute;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent 0%,transparent 180px,var(--beam-color) 180px,var(--beam-color) 100%);opacity:var(--beam-intensity, .3);transition:all .3s cubic-bezier(.4,0,.2,1)}.beam-glow{position:absolute;left:0;width:100%;height:12px;background:linear-gradient(90deg,transparent 0%,transparent 180px,var(--beam-color) 180px,transparent 100%);opacity:calc(var(--beam-intensity, .3) * .5);filter:blur(8px);transition:all .3s cubic-bezier(.4,0,.2,1)}.emotion-indicator.active .beam-core{height:6px;box-shadow:0 0 20px var(--beam-color)}.emotion-indicator.active .beam-glow{opacity:calc(var(--beam-intensity, .3) * .8);filter:blur(12px)}.emotion-label{position:absolute;left:calc(100% + 10px);top:50%;font-size:11px;font-weight:700;letter-spacing:1.2px;text-shadow:0 0 8px currentColor;white-space:nowrap;opacity:var(--beam-intensity, .3);transition:all .3s ease}.emotion-indicator[data-angle="0"] .emotion-label{transform:translateY(-50%) rotate(0)}.emotion-indicator[data-angle="51.4"] .emotion-label{transform:translateY(-50%) rotate(-51.4deg)}.emotion-indicator[data-angle="102.8"] .emotion-label{transform:translateY(-50%) rotate(-102.8deg)}.emotion-indicator[data-angle="154.2"] .emotion-label{transform:translateY(-50%) rotate(-154.2deg)}.emotion-indicator[data-angle="205.6"] .emotion-label{transform:translateY(-50%) rotate(-205.6deg)}.emotion-indicator[data-angle="257"] .emotion-label{transform:translateY(-50%) rotate(-257deg)}.emotion-indicator[data-angle="308.4"] .emotion-label{transform:translateY(-50%) rotate(-308.4deg)}.emotion-indicator.active .emotion-label{font-size:13px;letter-spacing:1.5px;text-shadow:0 0 15px currentColor,0 0 30px currentColor}.mobile-emotion-display{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#000000f2,#0a0a0ae6);color:#0f0;padding:12px 24px;border-radius:24px;font-size:.9em;font-weight:500;box-shadow:0 0 25px #0f06,0 0 50px #0f03,inset 0 0 15px #00ff0026,0 8px 32px #0009;border:2px solid rgba(0,255,0,.4);text-shadow:0 0 10px rgba(0,255,0,.7);z-index:10;max-width:85vw;text-align:center;word-wrap:break-word;white-space:normal;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.emotion-result{text-align:center;width:100%}.dominant-emotion{font-size:1.3em;margin-bottom:10px;display:block;white-space:nowrap;font-weight:700;text-transform:uppercase;letter-spacing:2px}.dominant-emotion .emotion-label{display:none}.emotion-label{opacity:.9;font-weight:400}.emotion-value{font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.emotion-value.happy,.emotion-name.happy{color:#90ee90}.emotion-value.sad,.emotion-name.sad{color:#87ceeb}.emotion-value.angry,.emotion-name.angry{color:#ffb6c1}.emotion-value.surprise,.emotion-name.surprise{color:#ffffe0}.emotion-value.fear,.emotion-name.fear{color:gold}.emotion-value.disgust,.emotion-name.disgust{color:plum}.emotion-value.neutral,.emotion-name.neutral{color:#f5f5f5}.all-emotions-list{margin:8px 0;font-size:.8em}.emotion-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;padding:2px 0}.emotion-row:last-child{margin-bottom:0}.emotion-name{font-weight:600;font-size:.85em}.emotion-percentage{font-weight:700;font-family:Consolas,Monaco,Courier New,monospace;font-size:.8em;color:#ffffffe6;text-shadow:0 0 5px rgba(255,255,255,.3)}.detection-info{opacity:.8;font-size:.7em;margin-top:3px}.status{display:block;font-size:1em;margin-bottom:3px}@media screen and (orientation: landscape) and (max-height: 500px){.mobile-controls{top:10px}.mobile-power-button{width:50px;height:50px}.mobile-camera-container{width:min(80vh,80vw);height:min(80vh,80vw);max-width:400px;max-height:400px}.emotion-wheel{width:min(90vh,90vw);height:min(90vh,90vw);max-width:450px;max-height:450px}.mobile-emotion-display{bottom:10px;font-size:.8em;padding:8px 15px}.emotion-label{font-size:9px}}@media screen and (max-width: 320px),(max-height: 400px){.mobile-camera-container{width:min(85vw,85vh);height:min(85vw,85vh);max-width:350px;max-height:350px}.emotion-wheel{width:min(95vw,95vh);height:min(95vw,95vh);max-width:400px;max-height:400px}.emotion-label{font-size:8px;margin-left:6px}.emotion-beam{width:20px;height:6px}}.container,.main-content,.camera-container,.sidebar,.controls,.power-button,.stats-display,.emotion-display{display:none!important}