:root{color:#1b1c1a;background:#000;font-family:Google Sans,Google Sans Text,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#root{min-height:100%}body{background:#000;margin:0}button,a{font:inherit}button{cursor:pointer}.monitor{flex-direction:column;align-items:center;display:flex}.monitor__bezel{background:linear-gradient(145deg,#383a37,#141514 46%,#272927);border:1px solid #090a09;border-radius:20px;width:100%;padding:11px;position:relative;box-shadow:0 26px 38px #13161338,inset 0 1px #fff3}.monitor__screen{color:#e8ebe3;background:linear-gradient(#030303 0%,#070807 100%);border-radius:11px;min-height:292px;position:relative;overflow:hidden}.monitor__screen:after{content:"";z-index:10;pointer-events:none;border-radius:inherit;opacity:.9;background:radial-gradient(at 85% 12%,#ffffff12 0%,#0000 55%),linear-gradient(132deg,#ffffff2b 0%,#fff1 24%,#ffffff04 44%,#0000 58%);transition:opacity .42s;position:absolute;inset:0;box-shadow:inset 0 1px 1px #fff3,inset 0 -1px 1px #00000059,inset 1px 0 1px #ffffff14}.timeless-page--dark .monitor__screen:after{opacity:.35}.monitor__toolbar{border-bottom:1px solid #ffffff1a;grid-template-columns:1fr auto;align-items:center;min-height:54px;padding:10px 20px;display:grid}.monitor__lights{gap:6px;display:flex}.monitor__lights span{aspect-ratio:1;border-radius:50%;width:8px}.monitor__lights span:first-child{background:#ff5f56}.monitor__lights span:nth-child(2){background:#ffbd2e}.monitor__lights span:nth-child(3){background:#27c93f}.install-tabs{border:1px solid #ffffff1f;border-radius:8px;gap:2px;padding:3px;display:flex}.install-tabs button,.copy-button{color:#e8ebe3;background:0 0;border:0;font-size:12px;font-weight:600}.install-tabs button{border-radius:5px;min-height:27px;padding:0 10px}.install-tabs button.is-active{color:#141514;background:#e8ebe3}.copy-button{border:1px solid #ffffff38;border-radius:6px;justify-self:end;place-items:center;width:36px;min-height:36px;padding:0;transition:background-color .18s,border-color .18s,color .18s;display:inline-grid}.copy-button:hover,.copy-button:focus-visible{color:#111211;background:#e8ebe3}.copy-button.is-copied{color:#79bd84;border-color:#5f9e69b8}.copy-button__icon{width:18px;height:18px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.monitor pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;color:#dce5d5;text-align:left;min-height:234px;margin:0;padding:24px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:clamp(12px,1.4vw,13px);line-height:1.65;overflow-x:auto}.syntax-comment{color:#7f897d}.syntax-keyword{color:#38bdf8}.syntax-component{color:#fb7185}.syntax-function{color:#f8faf7}.syntax-property{color:#f472b6}.syntax-string{color:#2dd4bf}.site-footer{flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding-block:100px 36px;display:flex}.footer-built{letter-spacing:-.01em;color:#e8e7e1bf;margin:0 0 4px;font-size:14px;font-weight:500}.footer-socials{justify-content:flex-end;align-items:center;gap:16px;margin-top:0;display:flex}.timeless-page{color:#e8e7e1;background:linear-gradient(#101110 0%,#000 100%);min-height:100vh;padding:clamp(12px,2.5vw,36px) clamp(18px,4vw,48px)}.timeless-page--dark{color:#e8e7e1;background:linear-gradient(#101110 0%,#000 100%)}.timeless-frame{width:min(800px,100%);min-height:0;box-shadow:none;background:0 0;border:0;border-radius:0;margin:0 auto;overflow:visible}.timeless-page .timeless-frame{box-shadow:none}.site-header,.intro{width:100%}.site-header{justify-content:center;align-items:center;padding-block:0 80px;display:flex}.site-logo-link{justify-content:center;align-items:center;display:inline-flex}.header-logo{object-fit:contain;width:auto;height:48px}.intro{text-align:center;padding:0 0 88px}.intro h1{color:#d8d7d2;letter-spacing:0;margin:0;font-size:52px;font-weight:500;line-height:66px}.intro>p:last-child{color:#e8e7e194;max-width:310px;margin:18px auto 0;font-size:14px}.wall-scene{--clock-top:clamp(54px, 8vw, 92px);--clock-size:clamp(210px, 26vw, 280px);--clock-monitor-gap:120px;--monitor-height:374px;width:100%;min-height:0;height:max(clamp(760px, 64vw, 800px), calc(var(--clock-top) + var(--clock-size) + var(--clock-monitor-gap) + var(--monitor-height)));background-color:#e7e2d9;background-image:url(/plaster-wall-morning-cropped.webp),url(/plaster-wall-daylight.webp);background-position:top,50%;background-repeat:no-repeat;background-size:100%,cover;border:none;border-radius:40px;scroll-margin-top:24px;display:block;position:relative;overflow:hidden;box-shadow:0 20px 48px #0000003d}.wall-scene:before{z-index:5;content:"";pointer-events:none;border-radius:inherit;-webkit-mask-composite:xor;background:linear-gradient(#817c7373 0%,#00000073 100%);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.wall-scene:after{z-index:4;content:"";pointer-events:none;background:#17181500;transition:background-color .5s;position:absolute;inset:0}.timeless-page--dark .wall-scene{background-color:#4b4740;background-image:url(/plaster-wall-moonlight-matched.webp),url(/plaster-wall-dark.webp);background-position:top,50%;background-repeat:no-repeat;background-size:100%,cover}.timeless-page--dark .wall-scene:after{background:#14151214}.wall-clock{z-index:2;top:var(--clock-top);width:var(--clock-size);filter:drop-shadow(16px 20px 17px #2a251d42);position:absolute;left:50%;transform:translate(-50%)}.timeless-page--dark .wall-clock{filter:drop-shadow(16px 20px 18px #0000007a)}.wall-scene .pull-cord{--pullcord-top:0px;--pullcord-right:clamp(38px, calc(8% + 10px), 102px);--pullcord-z:7;--pullcord-ink:#34312cd1;transform:translateX(-32px) rotate(var(--cord-swing,0deg));transform-origin:top;will-change:transform;z-index:7!important;position:absolute!important}.wall-scene .pull-cord svg{filter:drop-shadow(1px 2px 1px #ffffff75)}.wall-scene .pull-cord path{stroke-width:2px}.timeless-page--dark .wall-scene .pull-cord{--pullcord-ink:#d5d1c4b3;filter:brightness(.72)}.wall-scene .monitor{z-index:5;filter:drop-shadow(0 3px 3px #27231c47)drop-shadow(0 18px 24px #27231c4d);width:80%;display:block;position:absolute;top:auto;bottom:-30px;left:50%;transform:translate(-50%)}.wall-scene .monitor__bezel{border-radius:18px 18px 0 0}.wall-scene .monitor__screen{min-height:350px}.monitor__statusbar{color:#e8ebe38c;background:#171916;border-bottom:1px solid #ffffff17;grid-template-columns:1fr auto 1fr;align-items:center;min-height:34px;padding:0 14px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:10px;display:grid}.monitor__statusbar .monitor__lights{gap:6px}.monitor__statusbar .monitor__lights span{width:8px}.monitor__statusbar .monitor__lights span:first-child{background:#ff5f56}.monitor__statusbar .monitor__lights span:nth-child(2){background:#ffbd2e}.monitor__statusbar .monitor__lights span:nth-child(3){background:#27c93f}.monitor__statusbar-title{justify-self:center}.wall-scene .monitor__toolbar{grid-template-columns:1fr auto;min-height:50px}.wall-scene .install-tabs{justify-self:start}.wall-scene .monitor pre{scrollbar-width:none;min-height:242px}.wall-scene .monitor pre::-webkit-scrollbar{display:none}.code-cursor{vertical-align:-.22em;background:#e9aa17;width:.58ch;height:1.18em;margin-left:2px;animation:1s step-end infinite code-cursor-blink;display:inline-block}@keyframes code-cursor-blink{50%{opacity:0}}.site-footer{flex-direction:column;width:100%;margin-top:60px;padding-bottom:30px;display:flex}.footer-divider{background:#ffffff14;width:100%;height:1px;margin-bottom:28px}.footer-attribution{color:#e8e7e1b3;text-align:center;letter-spacing:.02em;margin-top:0;margin-bottom:24px;font-size:12px;font-weight:400;line-height:1.5}.footer-attribution-link{color:#ffffffe6;text-decoration:none;transition:color .18s,opacity .18s}.footer-attribution-link:hover{color:#edb22f;opacity:1}.footer-content{flex-direction:row;justify-content:space-between;align-items:center;width:100%;display:flex}.footer-info{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.footer-signature-link{transition:opacity .18s;display:inline-block}.footer-signature-link:hover{opacity:.85}.footer-signature{object-fit:contain;filter:brightness(.92)contrast(1.08);width:auto;height:40px;margin-bottom:6px}.footer-website-link{color:#e8e7e170;font-size:11px;font-weight:400;text-decoration:none;transition:color .18s,opacity .18s}.footer-website-link:hover{color:#fff;opacity:.95;text-decoration:underline}.footer-socials{justify-content:flex-end;align-items:center;gap:16px;display:flex}.footer-social-link{color:#e8e7e1e0;background:#ffffff14;border:1px solid #ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .2s,border-color .2s,transform .2s,color .2s;display:inline-flex}.footer-social-link:hover{color:#fff;background:#ffffff29;border-color:#ffffff2e;transform:translateY(-2px)}.footer-social-icon{fill:currentColor;width:23px;height:23px}@media (width<=720px){.site-footer{margin-top:24px;padding-bottom:16px}.footer-divider{margin-bottom:20px}.footer-attribution{margin-bottom:20px;font-size:10px}.footer-website-link{font-size:9px}.timeless-page{padding:20px 14px}.header-logo{height:36px}.site-header{padding:0 0 56px}.intro{padding:0 0 48px}.intro h1{font-size:clamp(32px,8.8vw,42px);line-height:1.22}.wall-scene{--clock-top:48px;--clock-size:clamp(160px, calc(66.6667vw - 70px), 220px);--clock-monitor-gap:55.2px;--monitor-height:218px;height:max(500px, calc(var(--clock-top) + var(--clock-size) + var(--clock-monitor-gap) + var(--monitor-height)));border-radius:34px}.wall-clock{top:var(--clock-top);width:var(--clock-size);left:50%;transform:translate(-50%)}.wall-scene .pull-cord{--pullcord-top:-16px;--pullcord-right:18px;transform:translateX(-6px) scale(.72) rotate(var(--cord-swing,0deg));transform-origin:100% 0}.wall-scene .pull-cord path{stroke-width:1.8px}.wall-scene .monitor{top:auto;bottom:var(--monitor-bottom,-30px);width:570px;transform:translateX(-50%) scale(var(--monitor-scale,.58));transform-origin:bottom;left:50%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}.pullcord-inner{position:absolute;inset:0}.pullcord-inner--drop{animation:.6s cubic-bezier(.45,0,.9,.5) .4s both pullcord-drop}@keyframes pullcord-drop{0%{opacity:0;transform:translateY(-230px)}20%{opacity:1}to{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.pullcord-inner--drop{animation:none}}.pullcord-knob{-webkit-tap-highlight-color:transparent;border-radius:50%}.pullcord-knob:active{cursor:grabbing}.pullcord-knob:focus-visible{outline:2px solid var(--pullcord-ink,#7f7f7f99);outline-offset:-9px}.timeless-clock-shell{aspect-ratio:1;-webkit-user-select:none;user-select:none;border-radius:50%;width:100%;position:relative;container-type:inline-size}.timeless-clock-shell img,.timeless-clock-shell svg{-webkit-user-drag:none;user-drag:none;pointer-events:none}.timeless-clock-face-layer,.timeless-clock-hands-layer,.timeless-clock-seconds-assembly,.timeless-clock-second-pivot{position:absolute;inset:0}.timeless-clock-hands-layer{pointer-events:none;justify-content:center;align-items:center;display:flex}.timeless-clock-seconds-assembly{z-index:30}.timeless-clock-rim{z-index:0;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:-2.5%}.timeless-clock-rim__image{object-fit:contain;width:100%;height:100%}.timeless-clock-dial{z-index:10;border-radius:50%;transition:background .28s;position:absolute;inset:0;overflow:hidden}.timeless-clock-logo{pointer-events:none;justify-content:center;align-items:center;width:8%;display:flex;position:absolute;top:22%;left:50%;transform:translate(-50%)}.timeless-clock-logo__image{width:100%;height:auto;transition:filter .28s,opacity .28s}.timeless-clock-number{justify-content:center;align-items:center;width:12%;height:12%;font-size:4.5cqi;font-weight:500;line-height:1;transition:color .28s;display:flex;position:absolute;transform:translate(-50%,-50%)}.timeless-clock-tick{transform-origin:50%;width:max(.6px,.15cqi);height:2.5%;transition:background-color .28s,opacity .28s;position:absolute}.timeless-clock-hand{z-index:20;box-shadow:clamp(2.724px, 1.6026cqi, 5px) clamp(4.904px, 2.8846cqi, 9px) clamp(6.538px, 3.8462cqi, 12px) var(--timeless-clock-hand-shadow-color);transform-origin:bottom;border-radius:999px;justify-content:center;padding-top:1%;transition:background-color .28s,box-shadow .28s;display:flex;position:absolute;bottom:50%;left:50%}.timeless-clock-hand--hour{width:3%;height:26%}.timeless-clock-hand--minute{width:2.5%;height:36%}.timeless-clock-hand__insert{opacity:.88;border-radius:999px;transition:background-color .28s}.timeless-clock-hand__insert--hour{width:16.666%;height:23.08%}.timeless-clock-hand__insert--minute{width:25%;height:19.45%}.timeless-clock-second-needle{width:.75%;height:34%;filter:drop-shadow(clamp(2.724px, 1.6026cqi, 5px) 0 clamp(1.635px, .9615cqi, 3px) var(--timeless-clock-second-shadow-color));border-radius:999px 999px 0 0;margin-bottom:2%;position:absolute;bottom:50%;left:50%;transform:translate(-50%)}.timeless-clock-second-tail{border-radius:0 0 999px 999px;width:2.5%;height:4%;position:absolute;top:52.5%;left:50%;transform:translate(-50%)}.timeless-clock-center-cap{z-index:40;aspect-ratio:1;width:5.5%;box-shadow:clamp(1.09px, .641cqi, 2px) clamp(2.724px, 1.6026cqi, 5px) clamp(4.359px, 2.5641cqi, 8px) var(--timeless-clock-center-cap-shadow-color);border-radius:50%;justify-content:center;align-items:center;transition:background-color .28s,box-shadow .28s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.timeless-clock-center-cap__inner{aspect-ratio:1;width:54.55%;box-shadow:inset 0 clamp(.545px, .3205cqi, 1px) clamp(.545px, .3205cqi, 1px) var(--timeless-clock-center-cap-inset-color);border-radius:50%}.timeless-clock-glass-filter{width:0;height:0;position:absolute;overflow:hidden}.timeless-clock-glass{z-index:50;pointer-events:none;isolation:isolate;border-radius:50%;transition:background .28s,box-shadow .28s;position:absolute;inset:clamp(-6px,-2.3529cqi,-4px);overflow:hidden;transform:translateZ(0)}.timeless-clock-glass--light{background:radial-gradient(circle at 72% 74%,#fff0 0 52%,#d6dfe714 80%,#ffffff2e 100%),linear-gradient(136deg,#fff3 0%,#ffffff09 35%,#fff0 58%);box-shadow:inset 0 0 0 clamp(.545px,.3205cqi,1px) #ffffffc2,inset clamp(4.359px,2.5641cqi,8px) clamp(5.449px,3.2051cqi,10px) clamp(10.897px,6.4103cqi,20px) #ffffff1f,inset clamp(-8px,-2.5641cqi,-4.359px) clamp(-10px,-3.2051cqi,-5.449px) clamp(10.897px,6.4103cqi,20px) #6e7c8814}.timeless-clock-glass--dark{background:radial-gradient(circle at 72% 75%,#fff0 0 54%,#7d8b9709 78%,#d9e2e91a 100%),linear-gradient(136deg,#ffffff1b 0%,#ffffff06 36%,#fff0 58%);box-shadow:inset 0 0 0 clamp(.545px,.3205cqi,1px) #e0e8ee42,inset clamp(3.814px,2.2436cqi,7px) clamp(4.904px,2.8846cqi,9px) clamp(9.808px,5.7692cqi,18px) #ffffff0e,inset clamp(-9px,-2.8846cqi,-4.904px) clamp(-12px,-3.8462cqi,-6.538px) clamp(13.077px,7.6923cqi,24px) #00000029}.timeless-clock-glass__upper-reflection{filter:blur(clamp(4.359px,2.5641cqi,8px));border-radius:50%;width:69%;height:28%;position:absolute;top:-8%;left:4%;transform:rotate(-12deg)}.timeless-clock-glass--light .timeless-clock-glass__upper-reflection{opacity:var(--timeless-clock-glass-upper-reflection-opacity);background:linear-gradient(#ffffff5c,#fff0)}.timeless-clock-glass--dark .timeless-clock-glass__upper-reflection{opacity:var(--timeless-clock-glass-upper-reflection-opacity);background:linear-gradient(#ffffff40,#fff0)}.timeless-clock-glass__left-curve{inset:var(--timeless-clock-glass-left-curve-inset);clip-path:inset(0 46% 0 0);opacity:var(--timeless-clock-glass-left-curve-opacity);border-radius:50%;position:absolute;overflow:hidden}.timeless-clock-glass__left-curve:before{content:"";border-radius:inherit;border-left:var(--timeless-clock-glass-left-curve-thickness) solid transparent;position:absolute;inset:0}.timeless-clock-glass--light .timeless-clock-glass__left-curve:before{border-left-color:#ffffffc2}.timeless-clock-glass--dark .timeless-clock-glass__left-curve:before{border-left-color:#dee6ea8a}