:root{--mirror-bg:#000;--mirror-ink:#fff;--mirror-muted:#a6a6a6;--mirror-subtle:#686868;--mirror-surface:#ffffff0f;--mirror-line:#fff3;--mirror-focus:#b9ffe9;background:var(--mirror-bg);color:var(--mirror-ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0;overflow:hidden}button,input{font:inherit}.mirror{background:var(--mirror-bg);width:100vw;height:100vh;padding:0;font-size:clamp(14px,1vw,22px);position:relative;overflow:hidden}.mirror-viewport{width:100vw;height:100vh;position:relative;overflow:hidden}.mirror-viewport>*{width:100%;height:100%}.mirror-viewport.portrait>*{transform-origin:50%;width:100vh;height:100vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.mirror-viewport.portrait>.pairing{max-width:none;margin:0}.status{display:none}.dot{background:var(--mirror-subtle);border-radius:50%;width:.5rem;height:.5rem}.dot.online{background:var(--mirror-focus);box-shadow:0 0 1rem var(--mirror-focus)}.canvas{width:100%;height:100%;position:relative;inset:0}.widget{color:var(--mirror-ink);background:0 0;border:0;border-radius:0;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0;display:flex;position:absolute;overflow:visible}.widget-label{color:var(--mirror-ink);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .35em;font-size:.75em}.widget-value{color:var(--mirror-ink);font-variant-numeric:tabular-nums;letter-spacing:-.06em;margin:0;font-size:4em;font-weight:300;line-height:1}.widget-detail{color:var(--mirror-ink);margin:.5em 0 0;font-size:1em}.clock-widget{justify-content:flex-start;align-items:flex-start;width:100%;height:100%;display:flex}.clock-digital{gap:.25em;display:grid}.clock-date,.clock-week{color:var(--mirror-muted);letter-spacing:.06em;text-transform:capitalize;margin:0;font-size:.82em}.clock-week{text-transform:uppercase;font-size:.7em}.clock-time{color:var(--mirror-ink);font-variant-numeric:tabular-nums;letter-spacing:-.06em;white-space:nowrap;font-size:4em;font-weight:300;line-height:.95}.clock-separator{opacity:.8}.clock-seconds,.clock-period{color:var(--mirror-muted);letter-spacing:0;vertical-align:top;margin-left:.25em;font-size:.3em;font-weight:500}.clock-period{color:var(--mirror-ink);font-size:.22em}.clock-face{border:.08em solid var(--mirror-ink);border-radius:50%;flex:none;width:min(100%,10em);min-width:4em;height:min(100%,10em);min-height:4em;position:relative}.clock-hand{transform-origin:bottom;border-radius:1em;width:.1em;position:absolute;bottom:50%;left:calc(50% - .05em)}.clock-hour-hand{background:var(--mirror-ink);height:26%}.clock-minute-hand{background:var(--mirror-ink);height:38%}.clock-second-hand{background:var(--mirror-focus);width:.04em;height:42%}.clock-center{background:var(--mirror-ink);border-radius:50%;width:.35em;height:.35em;position:absolute;top:calc(50% - .175em);left:calc(50% - .175em)}.clock-display-both{gap:.8em}.clock-analog-meta{gap:.25em;margin-left:.8em;display:grid}.clock-placement-top,.clock-placement-bottom{flex-direction:column}.clock-placement-bottom .clock-digital{order:2}.clock-placement-right,.clock-placement-left{flex-direction:row}.clock-placement-right .clock-digital{order:2}.weather-widget{color:var(--mirror-ink);width:100%}.weather-status{color:var(--mirror-muted);margin:0;font-size:1em}.weather-temperature{align-items:center;gap:.3em;display:flex}.weather-temperature strong{font-variant-numeric:tabular-nums;letter-spacing:-.06em;font-size:4em;font-weight:300;line-height:1}.weather-icon{font-size:2.5em;line-height:1}.weather-condition{color:var(--mirror-muted);margin:.3em 0 0;font-size:.9em}.weather-details{color:var(--mirror-muted);flex-wrap:wrap;gap:.35em .8em;margin-top:.65em;font-size:.76em;display:flex}.weather-days{gap:.45em;display:grid}.weather-day{grid-template-columns:2.8em 1.2em 2.6em 2.6em minmax(0,1fr);align-items:center;gap:.55em;display:grid}.weather-day>strong{text-align:center;font-size:1.35em;font-weight:400}.weather-day>small{color:var(--mirror-muted);font-size:.78em}.empty{color:var(--mirror-subtle);font-size:clamp(.8rem,1.2vw,1.1rem);position:absolute;bottom:0;left:0}.snapshot-test,.snapshot-test input,.recognition{display:none}.status-screen,.pairing{background:var(--mirror-bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.welcome-screen{background:var(--mirror-bg);opacity:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .5s;display:flex}.welcome-screen.fading{opacity:0}.welcome-screen p{color:var(--mirror-ink);font-size:clamp(calc(1.3rem * var(--welcome-scale)), calc(3vw * var(--welcome-scale)), calc(2.5rem * var(--welcome-scale)));margin:0 0 .4rem}.welcome-screen h1{font-size:clamp(calc(4rem * var(--welcome-scale)), calc(12vw * var(--welcome-scale)), calc(11rem * var(--welcome-scale)));letter-spacing:-.075em;margin:0;font-weight:300}.status-screen p,.pairing .overline{color:var(--mirror-muted)}.monogram{border:2px solid var(--mirror-ink);border-radius:1rem;justify-content:center;align-items:center;width:4rem;height:4rem;margin-bottom:1.5rem;font-size:1.5rem;font-weight:800;display:flex}.pairing{max-width:28rem;margin:auto;padding:2rem}.pairing h1{letter-spacing:-.04em;font-size:2.5rem}.pairing label{color:var(--mirror-muted);text-align:left;gap:.45rem;width:100%;margin-bottom:1rem;display:grid}.pairing input{background:var(--mirror-surface);border:1px solid var(--mirror-line);color:var(--mirror-ink);border-radius:.75rem;min-height:3rem;padding:.75rem}.pairing button{background:var(--mirror-ink);color:#000;cursor:pointer;border:0;border-radius:.75rem;width:100%;min-height:3rem;padding:.75rem;font-weight:800}.error{color:#f99}