:root{--canvas:#ebe7df;--face:#f7f3eb;--hands:#292621;--seconds:#e05a3f;--ink:#25231f;--muted:#77736b;--line:rgba(37,35,31,.13);--clock-size:420px;--hand-weight:6px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--canvas)}button,input{font:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--canvas) 92%,white 8%);position:relative;z-index:10}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.16em;font-size:14px}.brand-mark{width:25px;height:25px;border:1.5px solid currentColor;border-radius:50%;position:relative}.brand-mark i{position:absolute;left:11px;top:4px;width:1.5px;height:8px;background:currentColor;transform-origin:bottom}.brand-mark i:first-child{transform:rotate(38deg)}.brand-mark i:last-child{top:11px;height:6px;transform:rotate(105deg)}.header-actions{display:flex;align-items:center;gap:18px}.status{font:500 10px DM Mono,monospace;letter-spacing:.15em}.status i{display:inline-block;width:6px;height:6px;background:#7e9a6a;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px rgba(126,154,106,.12)}.icon-button,.reset-button{border:0;background:transparent;cursor:pointer;color:var(--ink)}.icon-button{width:36px;height:36px;padding:8px}.icon-button svg{fill:none;stroke:currentColor;stroke-width:1.5}.reset-button{font:500 10px DM Mono,monospace;letter-spacing:.12em;border-bottom:1px solid;padding:3px 0}main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(390px,.8fr);flex:1;min-height:calc(100vh - 72px)}.clock-stage{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:650px;border-right:1px solid var(--line);background:var(--canvas);transition:background .35s}.ambient{position:absolute;border-radius:50%;filter:blur(2px);opacity:.48}.ambient-a{width:360px;height:360px;top:-130px;left:-100px;background:radial-gradient(circle,#fff8 0,transparent 70%)}.ambient-b{width:460px;height:460px;bottom:-250px;right:-150px;background:radial-gradient(circle,#c9bca955 0,transparent 70%)}.clock-wrap{position:relative;width:var(--clock-size);height:var(--clock-size);z-index:1;transition:width .25s,height .25s}.clock{width:100%;height:100%;border-radius:50%;position:relative;background:var(--face);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),inset 0 0 42px rgba(80,70,55,.045);transition:background .35s}.clock-shadow{position:absolute;z-index:-1;inset:8% 5% -4% 9%;border-radius:50%;background:rgba(60,48,34,.23);filter:blur(28px)}.tick{position:absolute;left:50%;top:4.2%;width:1px;height:2.8%;background:var(--hands);opacity:.32;transform-origin:50% calc(var(--clock-size) * .458)}.tick.major{height:4.2%;width:2px;opacity:.8}.number{position:absolute;left:50%;top:50%;font:500 clamp(11px,calc(var(--clock-size)*.034),17px) DM Mono,monospace;color:var(--hands);transform:translate(-50%,-50%)}.brand-on-clock{position:absolute;top:32%;left:50%;transform:translateX(-50%);text-align:center;font-size:8px;font-weight:700;letter-spacing:.2em;color:var(--hands);opacity:.7}.brand-on-clock small{font:400 6px DM Mono;letter-spacing:.18em}.hand{position:absolute;left:50%;bottom:50%;background:var(--hands);transform-origin:50% 100%;border-radius:5px 5px 1px 1px;will-change:transform}.hour{height:24%;width:var(--hand-weight);margin-left:calc(var(--hand-weight)/-2)}.minute{height:34%;width:calc(var(--hand-weight)*.66);margin-left:calc(var(--hand-weight)*-.33)}.second{height:38%;width:2px;margin-left:-1px;background:var(--seconds);transform-origin:50% 88%;bottom:45.5%}.pin{position:absolute;left:50%;top:50%;width:calc(var(--hand-weight)*2.25);height:calc(var(--hand-weight)*2.25);border-radius:50%;transform:translate(-50%,-50%);background:var(--seconds);box-shadow:0 0 0 3px var(--face),0 0 0 4px var(--hands)}.digital-readout{z-index:1;display:flex;gap:20px;margin-top:32px;align-items:center}.digital-readout span:first-child{font:500 13px DM Mono;letter-spacing:.1em}.digital-readout span:last-child{font:400 9px DM Mono;color:var(--muted);letter-spacing:.12em;border-left:1px solid var(--line);padding-left:20px}.panel{background:color-mix(in srgb,var(--canvas) 94%,white 6%);padding:48px clamp(28px,4vw,58px) 24px;overflow:auto}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:34px}.eyebrow,.section-label{font:500 9px DM Mono,monospace;letter-spacing:.16em;color:var(--muted)}h1{font-size:clamp(34px,3.5vw,53px);line-height:1.02;letter-spacing:-.055em;margin:14px 0 0;font-weight:500}.control-section{padding:24px 0 26px;border-top:1px solid var(--line)}.section-label{display:flex;gap:15px;margin-bottom:18px}.section-label span{color:var(--ink)}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.preset{border:1px solid transparent;background:transparent;border-radius:5px;padding:6px 5px 8px;cursor:pointer;color:var(--ink)}.preset.active{border-color:var(--ink)}.preset b{display:block;font-size:9px;margin-top:6px;font-weight:500}.swatch{height:42px;border-radius:3px;display:block;position:relative;overflow:hidden}.swatch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid currentColor}.soft{background:#e4ded2;color:#3c3831}.mono{background:#e8e8e6;color:#111}.night{background:#20242a;color:#efddaa}.pop{background:#e8694f;color:#372f91}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.color-grid label{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:7px 0}.color-control{width:30px;height:20px;border:1px solid var(--line);border-radius:10px;padding:3px;position:relative}.color-control input{position:absolute;inset:0;opacity:0;cursor:pointer}.color-control i{display:block;width:12px;height:12px;border-radius:50%;background:var(--sample)}.range-row{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:11px;margin:18px 0}.range-row output{font:400 9px DM Mono;color:var(--muted)}input[type=range]{grid-column:1/-1;width:100%;height:2px;appearance:none;background:linear-gradient(90deg,var(--ink) var(--range,50%),var(--line) var(--range,50%));outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--canvas);border:2px solid var(--ink);border-radius:50%;cursor:pointer}.option-row{min-height:38px;display:flex;align-items:center;justify-content:space-between;font-size:11px;border-top:1px solid rgba(37,35,31,.07)}.segmented{display:flex;gap:2px;background:rgba(37,35,31,.055);padding:3px;border-radius:4px}.segmented button{border:0;background:transparent;padding:5px 7px;font-size:8px;border-radius:3px;cursor:pointer;color:var(--muted)}.segmented button.active{background:var(--face);color:var(--ink);box-shadow:0 1px 4px #0001}.switch{width:30px;height:17px;position:relative}.switch input{opacity:0;position:absolute}.switch i{position:absolute;inset:0;background:#aaa59d;border-radius:12px;cursor:pointer;transition:.2s}.switch i:after{content:"";position:absolute;width:11px;height:11px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.switch input:checked+i{background:var(--ink)}.switch input:checked+i:after{transform:translateX(13px)}.save-note{font:400 8px DM Mono;color:var(--muted);text-align:center;letter-spacing:.08em;margin:10px}.save-note span{color:#7e9a6a;margin-right:7px}@media(max-width:900px){main{grid-template-columns:1fr}.clock-stage{min-height:620px;border-right:0;border-bottom:1px solid var(--line)}.panel{padding:36px max(24px,7vw)}.clock-wrap{--clock-size:min(72vw,400px)}}@media(max-width:520px){.topbar{height:60px;padding:0 20px}main{min-height:calc(100vh - 60px)}.clock-stage{min-height:480px}.panel-heading{padding-bottom:28px}.presets{gap:4px}.swatch{height:36px}.color-grid{grid-template-columns:1fr}.segmented button{padding:5px}.digital-readout{margin-top:25px}}