.mag-display-wrapper{display:inline-block}.size-small{transform-origin:50%;transform:scale(.5)}.size-medium{transform-origin:50%;transform:scale(.8)}.size-large{transform-origin:50%;transform:scale(1.2)}.mag-board{background:#0a0a0a;border:6px solid #1f1f1f;border-radius:12px;gap:16px;padding:24px;display:flex;box-shadow:inset 0 0 30px #000000e6,0 10px 25px #000c}.mag-digit{width:80px;height:140px;position:relative}.mag-segment{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.4,0,.2,1);position:absolute}.mag-segment:before{content:"";background-color:var(--segment-off,#1a1a1a);backface-visibility:hidden;position:absolute;inset:0;box-shadow:inset 0 0 4px #000c}.mag-segment:after{content:"";background-color:var(--segment-on,#fde047);backface-visibility:hidden;box-shadow:0 0 15px var(--segment-glow,#fde04766);position:absolute;inset:0}.mag-seg-h{width:54px;height:16px;left:13px}.mag-seg-h:before,.mag-seg-h:after{clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%)}.mag-seg-h:after,.mag-seg-h.on{transform:rotateX(180deg)}.mag-seg-v{width:16px;height:54px}.mag-seg-v:before,.mag-seg-v:after{clip-path:polygon(50% 0,100% 10%,100% 90%,50% 100%,0 90%,0 10%)}.mag-seg-v:after,.mag-seg-v.on{transform:rotateY(180deg)}.mag-seg-a{top:0}.mag-seg-g{top:62px}.mag-seg-d{bottom:0}.mag-seg-f{top:10px;left:0}.mag-seg-b{top:10px;right:0}.mag-seg-e{bottom:10px;left:0}.mag-seg-c{bottom:10px;right:0}.mag-colon{flex-direction:column;justify-content:center;align-items:center;gap:30px;width:30px;height:140px;display:flex;position:relative}.mag-colon-dot{background-color:var(--segment-on,#fde047);width:16px;height:16px;box-shadow:0 0 10px var(--segment-glow,#fde04766);border-radius:50%}.mag-fractional-container{opacity:0;max-width:0;transition:max-width 1.4s cubic-bezier(.175,.885,.32,1.1),opacity .8s;display:flex;overflow:hidden}.mag-fractional-container.open{opacity:1;max-width:300px}.mag-fractional-inner{gap:16px;margin-left:16px;display:flex}:root{--bg-color:#0f172a;--panel-bg:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent:#3b82f6;--accent-hover:#2563eb;--danger:#ef4444;--danger-hover:#dc2626}body,html{background-color:var(--bg-color);height:100%;color:var(--text-primary);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app-container{flex-direction:column;min-height:100vh;display:flex}.header{flex-direction:column;align-items:center;padding:2rem 1rem 0;display:flex}.header h1{letter-spacing:2px;text-transform:uppercase;color:var(--text-primary);text-shadow:0 0 15px #fff3;margin:0 0 1.5rem;font-size:2.5rem}.tabs{background:var(--panel-bg);border-radius:12px;gap:1rem;padding:.5rem;display:flex;box-shadow:0 4px 6px -1px #00000080}.tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.tab:hover{color:var(--text-primary);background:#ffffff0d}.tab.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px #3b82f666}.main-content{flex:1;justify-content:center;align-items:center;padding:2rem;display:flex}.mode-container{flex-direction:column;align-items:center;gap:3rem;animation:.4s ease-out fadeIn;display:flex}.mode-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:4px;margin:0;font-size:1.5rem}.controls{align-items:center;gap:1.5rem;display:flex}.btn{cursor:pointer;border:none;border-radius:12px;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.25rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 6px #0000004d}.btn:active{transform:translateY(2px);box-shadow:0 1px 3px #00000080}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 6px 12px #3b82f666}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-hover);box-shadow:0 6px 12px #ef444466}.btn-secondary{background:var(--panel-bg);color:var(--text-primary);border:1px solid #ffffff1a}.btn-secondary:hover{background:#ffffff1a}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.laps-container{background:var(--panel-bg);border-radius:12px;width:100%;max-width:400px;padding:1.5rem;animation:.4s ease-out fadeIn;box-shadow:inset 0 2px 4px #0000004d,0 4px 10px #00000080}.laps-title{color:var(--text-secondary);border-bottom:2px solid #ffffff1a;margin:0 0 1rem;padding-bottom:.5rem;font-size:1.2rem}.laps-list{flex-direction:column;gap:.5rem;max-height:250px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.laps-list::-webkit-scrollbar{width:8px}.laps-list::-webkit-scrollbar-track{background:#0003;border-radius:4px}.laps-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.lap-item{background:#0003;border-radius:6px;justify-content:space-between;padding:.5rem;font-family:monospace;font-size:1.1rem;display:flex}.lap-number{color:var(--text-secondary);width:60px}.lap-split{color:var(--accent);text-align:center;flex:1}.lap-total{color:var(--text-primary);font-weight:700}.timer-type-toggle{background:var(--panel-bg);border-radius:8px;gap:1rem;padding:.5rem;display:flex;box-shadow:inset 0 2px 4px #0000004d}.toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.5rem 1rem;font-weight:700;transition:all .2s}.toggle-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 4px #3b82f666}.countdown-inputs{align-items:center;gap:.5rem;margin-bottom:-1rem;display:flex}.time-input{text-align:center;background:var(--panel-bg);color:#fff;border:2px solid #ffffff1a;border-radius:8px;width:60px;padding:.5rem;font-size:1.5rem;font-weight:700}.time-input:focus{border-color:var(--accent);outline:none}.time-colon{color:var(--text-secondary);font-size:1.5rem;font-weight:700}html.obs-mode-transparent,body.obs-mode-transparent{background-color:#0000!important}body.obs-mode-solid{background-color:var(--bg-color)}.obs-container{min-height:auto;background-color:#0000!important}.obs-container .main-content{justify-content:flex-start;align-items:flex-start;padding:0}.obs-controls{opacity:0;transition:opacity .3s;position:absolute;bottom:-60px}.obs-container:hover .obs-controls{opacity:1}