:root{--bg: #050508;--panel-bg: rgba(8, 8, 15, .92);--panel-border: rgba(255, 255, 255, .08);--accent: #8098c0;--accent-dim: rgba(100, 140, 200, .12);--text: #d8dce4;--text-dim: rgba(255, 255, 255, .4);--font: "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;--mono: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.app{position:relative;width:100%;height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,rgba(180,200,240,.02) 0%,transparent 50%),radial-gradient(ellipse at 30% 70%,rgba(120,100,60,.015) 0%,transparent 40%),radial-gradient(ellipse at 70% 60%,rgba(60,80,140,.01) 0%,transparent 40%),var(--bg)}.watch-viewport{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.watch-3d-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:auto}.watch-3d-surface{width:100%;height:100%;will-change:transform}.brand-watermark{position:fixed;bottom:28px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;opacity:.45;z-index:5;animation:fadeIn 2s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:.45;transform:translate(-50%) translateY(0)}}.brand-name{display:block;font-size:15px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:#c0c8d8;text-shadow:0 0 20px rgba(180,200,240,.15)}.brand-sub{display:block;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#b4c8dc59;margin-top:3px}.controls-container{position:fixed;top:20px;right:20px;z-index:100;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ctrl-toggle{width:42px;height:42px;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.ctrl-toggle:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px #d4a84326}.fps-badge{font-family:var(--mono);font-size:11px;color:#60a0ff;background:#3c78ff0f;border:1px solid rgba(60,120,255,.18);padding:4px 10px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ctrl-panel{width:320px;max-height:calc(100vh - 120px);overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 20px 60px #00000080,0 0 1px #ffffff1a;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ctrl-panel::-webkit-scrollbar{width:4px}.ctrl-panel::-webkit-scrollbar-track{background:transparent}.ctrl-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.ctrl-tabs{display:flex;border-bottom:1px solid var(--panel-border);padding:4px}.ctrl-tab{flex:1;padding:10px 8px;background:none;border:none;color:var(--text-dim);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:10px;transition:all .2s}.ctrl-tab:hover{color:var(--text)}.ctrl-tab.active{background:var(--accent-dim);color:var(--accent)}.ctrl-content{padding:16px}.ctrl-group{margin-bottom:18px}.ctrl-group label{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}.ctrl-btn-group{display:flex;gap:6px}.ctrl-btn-group button{flex:1;padding:8px 12px;background:#ffffff0a;border:1px solid var(--panel-border);border-radius:8px;color:var(--text-dim);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.ctrl-btn-group button:hover{background:#ffffff14;color:var(--text)}.ctrl-btn-group button.active{background:var(--accent-dim);border-color:#d4a8434d;color:var(--accent)}.color-btns button{width:36px;height:36px;border-radius:50%;flex:none;position:relative}.color-btns button:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:2px solid transparent;transition:border-color .2s}.color-btns button.active:after{border-color:var(--accent)}.color-gold{background:linear-gradient(135deg,#d4a843,#8b6914)!important}.color-silver{background:linear-gradient(135deg,silver,gray)!important}.color-rose-gold{background:linear-gradient(135deg,#b76e79,#8b4a52)!important}.color-black{background:linear-gradient(135deg,#404040,#111)!important}.ctrl-toggles{display:flex;flex-direction:column;gap:6px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;cursor:pointer}.toggle-row span{font-size:13px;color:var(--text)}.toggle-switch{width:38px;height:22px;border-radius:11px;border:1px solid var(--panel-border);background:#ffffff0f;cursor:pointer;position:relative;transition:all .25s ease}.toggle-switch.on{background:#d4a8434d;border-color:#d4a84380}.toggle-knob{display:block;width:16px;height:16px;border-radius:50%;background:var(--text-dim);position:absolute;top:2px;left:2px;transition:all .25s ease}.toggle-switch.on .toggle-knob{left:18px;background:var(--accent)}input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 10px #d4a8434d}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}.ctrl-reset{width:100%;padding:10px;background:#ffffff0a;border:1px solid var(--panel-border);border-radius:8px;color:var(--text-dim);font-size:12px;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:all .2s}.ctrl-reset:hover{background:#ffffff14;color:var(--text)}.ctrl-hint{font-size:12px;color:var(--text-dim);line-height:1.6}.chrono-toggle-btn{position:fixed;top:20px;left:20px;width:42px;height:42px;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100}.chrono-toggle-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px #d4a84326}.sound-toggle-btn{position:fixed;top:20px;left:72px;width:42px;height:42px;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100}.sound-toggle-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px #d4a84326}.chrono-overlay{position:fixed;top:70px;left:20px;z-index:99;animation:slideIn .3s ease}.chrono-panel{width:280px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:0 20px 60px #00000080;overflow:hidden}.chrono-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--panel-border)}.chrono-header h3{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}.chrono-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:0;line-height:1}.chrono-close:hover{color:var(--text)}.chrono-display{text-align:center;padding:20px 16px}.chrono-time{font-family:var(--mono);font-size:42px;font-weight:200;letter-spacing:.05em;color:var(--text);text-shadow:0 0 20px rgba(212,168,67,.2)}.chrono-hands{display:flex;justify-content:center;gap:20px;padding:0 16px 16px}.chrono-subdial{display:flex;flex-direction:column;align-items:center;gap:6px}.chrono-subdial-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.chrono-buttons{display:flex;gap:8px;padding:0 16px 16px}.chrono-btn{flex:1;padding:10px;border-radius:8px;border:1px solid var(--panel-border);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s}.chrono-btn.start{background:#00c86426;border-color:#00c8644d;color:#40ff80}.chrono-btn.start:hover{background:#00c86440}.chrono-btn.stop{background:#ff3c3c26;border-color:#ff3c3c4d;color:#ff6060}.chrono-btn.stop:hover{background:#ff3c3c40}.chrono-btn.lap{background:var(--accent-dim);border-color:#d4a8434d;color:var(--accent)}.chrono-btn.reset{background:#ffffff0a;color:var(--text-dim)}.chrono-btn.reset:hover{background:#ffffff14}.chrono-laps{border-top:1px solid var(--panel-border);max-height:200px;overflow-y:auto}.chrono-laps-header,.chrono-lap-row{display:grid;grid-template-columns:40px 1fr 1fr;padding:8px 16px;font-family:var(--mono);font-size:11px}.chrono-laps-header{color:var(--text-dim);font-weight:500;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--panel-border)}.chrono-lap-row{color:var(--text);border-bottom:1px solid rgba(255,255,255,.03)}.chrono-lap-row:last-child{border-bottom:none}@media(max-width:640px){.controls-container{top:10px;right:10px}.ctrl-panel{width:calc(100vw - 20px);max-width:320px}.chrono-toggle-btn{top:10px;left:10px;width:36px;height:36px}.sound-toggle-btn{top:10px;left:54px;width:36px;height:36px}.chrono-overlay{top:55px;left:10px}.chrono-panel{width:calc(100vw - 20px);max-width:280px}.brand-watermark{bottom:12px}.brand-name{font-size:11px}}