:root{--ink:#102826;--ink-soft:#10282694;--paper:#e7eef0;--metal:#8f9a8e;--metal-deep:#5c6a62;--signal:#c44536;--sea:#6f9e98;--sky-top:#9eb8b4;--sky-mid:#c5d5d2;--sky-low:#d9e2e0;--sky-floor:#e8ece6;--line:#10282624;--pad:clamp(1rem, 3.5vw, 2.75rem);--display:"Syne", sans-serif;--serif:"Fraunces", Georgia, serif;--mono:"JetBrains Mono", ui-monospace, monospace}*,:before,:after{box-sizing:border-box}html,body{background:var(--sky-mid);height:100%;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow:hidden}#app{isolation:isolate;width:100%;height:100dvh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);position:relative}#clock-canvas{z-index:1;cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#clock-canvas:active,#clock-canvas.is-dragging-hand{cursor:grabbing}.atmosphere{pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 55% at 50% 42%, transparent 30%, #1028261a 100%), linear-gradient(175deg, var(--sky-top) 0%, var(--sky-mid) 38%, var(--sky-low) 68%, var(--sky-floor) 100%);position:absolute;inset:0}.haze{filter:blur(70px);opacity:.5;border-radius:50%;animation:20s ease-in-out infinite alternate drift;position:absolute}.haze-a{background:radial-gradient(circle,#6f9e98b3,#0000 70%);width:min(65vw,580px);height:min(65vw,580px);top:8%;left:-10%}.haze-b{background:radial-gradient(circle,#8f9a8e8c,#0000 68%);width:min(75vw,680px);height:min(55vw,480px);animation-duration:24s;animation-delay:-8s;bottom:4%;right:-14%}.grain{opacity:.055;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.top-chrome{z-index:3;top:var(--pad);left:var(--pad);right:var(--pad);pointer-events:none;justify-content:space-between;align-items:flex-start;gap:1rem 1.25rem;animation:1s cubic-bezier(.22,1,.36,1) both rise-in;display:flex;position:absolute}.hero-copy{pointer-events:none;flex:auto;min-width:0}.brand{font-family:var(--display);letter-spacing:-.045em;color:var(--ink);text-transform:uppercase;margin:0;font-size:clamp(2.4rem,7.5vw,5.75rem);font-weight:800;line-height:.88}.readout{align-items:baseline;gap:.55rem;margin-top:.75rem;animation:1.05s cubic-bezier(.22,1,.36,1) 80ms both rise-in;display:flex}#digital-time{font-family:var(--mono);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--ink);margin:0;font-size:clamp(1.35rem,3.2vw,2.35rem);font-weight:500}.period{font-family:var(--display);letter-spacing:.16em;color:var(--signal);font-size:clamp(.7rem,1.3vw,.85rem);font-weight:700}.calendar-date{max-width:max-content;font-family:var(--serif);font-optical-sizing:auto;letter-spacing:.01em;color:var(--ink-soft);cursor:pointer;pointer-events:auto;border-bottom:1px solid #0000;align-items:baseline;margin:.5rem 0 0;font-size:clamp(.98rem,2vw,1.25rem);font-weight:500;line-height:1.35;transition:color .2s,border-color .2s;animation:1.1s cubic-bezier(.22,1,.36,1) .14s both rise-in;display:inline-flex;position:relative}.calendar-date:hover,.calendar-date:focus-within{color:var(--ink);border-bottom-color:#10282647}.calendar-date time{pointer-events:none}.calendar-date input[type=date]{opacity:0;cursor:pointer;width:100%;height:100%;font:inherit;border:0;margin:0;padding:0;position:absolute;inset:0}.cta-group{pointer-events:auto;flex-shrink:0;gap:.4rem;animation:1s cubic-bezier(.22,1,.36,1) .18s both rise-in;display:flex}.action{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;padding:.55rem .95rem;font-size:.72rem;font-weight:700;transition:background .25s,color .25s,border-color .25s,transform .2s}.action:hover{border-color:var(--ink);transform:translateY(-1px)}.action:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.action.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.hint{z-index:2;font-family:var(--serif);color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;margin:0;font-size:clamp(.85rem,1.5vw,1rem);animation:4.5s 1.5s both hint-fade;position:absolute;bottom:clamp(5.5rem,12vh,7rem);left:50%;transform:translate(-50%)}.controls{z-index:3;right:2%;bottom:var(--pad);width:min(740px, calc(100% - (var(--pad) * 2)));border-top:1px solid var(--line);background:linear-gradient(#c9d5d266 0%,#c9d5d200 100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 1.5rem;padding:.85rem;animation:1.15s cubic-bezier(.22,1,.36,1) .22s both rise-in;display:grid;position:absolute;transform:translate(-50%)}.field{cursor:pointer;grid-template-rows:auto auto;grid-template-columns:1fr auto;align-items:center;gap:.4rem .5rem;min-width:0;display:grid}.field span{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);grid-column:1;font-size:.65rem;font-weight:700}.field output{font-family:var(--mono);color:var(--metal-deep);font-variant-numeric:tabular-nums;grid-column:2;font-size:.78rem}.field input[type=range]{appearance:none;background:linear-gradient(90deg, var(--sea), var(--metal));border-radius:0;outline:none;grid-column:1/-1;width:100%;height:2px}.field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ink);border:2px solid var(--paper);cursor:grab;border-radius:50%;width:16px;height:16px;transition:transform .2s}.field input[type=range]::-moz-range-thumb{background:var(--ink);border:2px solid var(--paper);cursor:grab;border-radius:50%;width:16px;height:16px}.field input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}.field input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:4px}@keyframes drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(3%,-2.5%)scale(1.05)}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes hint-fade{0%{opacity:0;transform:translate(-50%,8px)}18%{opacity:1;transform:translate(-50%)}72%{opacity:1}to{opacity:0;transform:translate(-50%,-4px)}}@media (width<=720px){:root{--pad:max(.9rem, env(safe-area-inset-left,0px), env(safe-area-inset-right,0px))}.top-chrome{top:max(.9rem, env(safe-area-inset-top,0px));left:max(.9rem, env(safe-area-inset-left,0px));right:max(.9rem, env(safe-area-inset-right,0px));flex-wrap:wrap;row-gap:.65rem}.hero-copy{flex:calc(100% - 9rem);min-width:0}.brand{overflow-wrap:anywhere;font-size:clamp(1.85rem,9.5vw,2.55rem)}.cta-group{margin-left:auto}.readout{margin-top:.55rem}#digital-time{font-size:clamp(1.15rem,5vw,1.45rem)}.calendar-date{max-width:none;font-size:clamp(.9rem,3.5vw,1.05rem)}.action{letter-spacing:.12em;padding:.48rem .72rem;font-size:.64rem}.hint{bottom:calc(9.5rem + env(safe-area-inset-bottom,0px));white-space:normal;text-align:center;max-width:calc(100% - 2rem);font-size:.78rem}.controls{left:max(.9rem, env(safe-area-inset-left,0px));right:max(.9rem, env(safe-area-inset-right,0px));bottom:max(.75rem, env(safe-area-inset-bottom,0px));grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem .7rem;width:auto;padding:.65rem 0 0;transform:none}.field span{letter-spacing:.12em;font-size:.56rem}.field output{font-size:.72rem}.field input[type=range]::-webkit-slider-thumb{width:18px;height:18px}.field input[type=range]::-moz-range-thumb{width:18px;height:18px}}@media (width<=380px){.brand{font-size:1.7rem}.cta-group{justify-content:flex-start;width:100%;margin-left:0}.controls{gap:.45rem .5rem}}@media (width<=900px) and (height<=500px){.top-chrome{top:max(.55rem, env(safe-area-inset-top,0px))}.brand{font-size:clamp(1.35rem,5vw,1.85rem)}.readout{margin-top:.25rem}#digital-time{font-size:1.05rem}.hint{display:none}.controls{bottom:max(.4rem, env(safe-area-inset-bottom,0px));gap:.4rem .8rem;padding-top:.4rem}}@media (width>=721px) and (width<=1100px){.brand{font-size:clamp(2.6rem,6.5vw,4.2rem)}.controls{width:min(780px, calc(100% - (var(--pad) * 2)))}}@media (prefers-reduced-motion:reduce){.haze,.top-chrome,.readout,.calendar-date,.cta-group,.hint,.controls{animation:none}.hint{opacity:.65}}