@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Quicksand:wght@500&display=swap";*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body,#app{min-height:100%}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul,ol{margin:0;padding:0;list-style:none}body{line-height:1.5}img,picture,svg,canvas,video{max-width:100%;display:block}input,button,textarea,select{font:inherit}button,a{color:inherit}button{background:0 0;border:0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@font-face{font-family:Clock Roboto Flex;src:url(./RobotoFlex-Variable.4D153Dti.ttf);font-style:normal;font-weight:100 1000;font-stretch:25% 151%;font-display:block}:root{font-synthesis:none;color:#fff;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;font-family:Inter,sans-serif}body{background:#000;min-width:320px;min-height:100svh}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}.site-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px;margin:40px 40px 0;display:grid}.intro{align-items:center;gap:16px;min-width:0;display:flex}.intro h1,.intro p,.site-header a,.gallery-ordering button{font-size:14px;font-weight:400;line-height:18px}.intro h1{color:#fff}.intro p{color:#ffffff8f}.site-header a{color:#c4b5fd;justify-self:end;text-decoration:none}.gallery-ordering{align-items:center;gap:24px;display:flex}.gallery-ordering button{color:#ffffff70;background:0 0;padding:0}.gallery-ordering button.active{color:#fff}.gallery-wrap{padding:40px}.create-label-mobile{display:none}@media (width<=800px){.site-header{grid-template-columns:1fr auto;grid-template-areas:"intro intro""ordering create";gap:24px 16px;margin:24px 16px 0}.intro{grid-area:intro;justify-content:flex-start;justify-self:stretch;gap:16px;width:100%}.intro h1{white-space:nowrap;flex:none}.create-clock-link{grid-area:create}.gallery-ordering{grid-area:ordering;gap:20px}.create-label-desktop{display:none}.create-label-mobile{display:inline}.gallery-wrap{padding:32px 16px 24px}}.home-layer.detail-open{pointer-events:none;-webkit-user-select:none;user-select:none}.creator-page{grid-template-columns:1fr 1fr;width:100%;height:100svh;display:grid;overflow:hidden}.preview-side,.code-side{min-width:0;min-height:0;position:relative}.preview-side{background:#000;place-items:center;display:grid}.code-side{background:#111;border-left:1px solid #2a2a2a}.creator-back{z-index:5;color:#fff;text-decoration:none;position:absolute;top:24px;left:32px}.creator-back:before,.clock-back:before{content:"";position:absolute;inset:-10px}.creator-back,.creator-back img{width:24px;height:24px}.preview-frame{border-radius:14px;max-height:74svh;overflow:hidden;box-shadow:0 0 0 1px #ffffff0d}.preview-frame.full-frame{max-height:none;box-shadow:none;border-radius:0;position:absolute;inset:0;width:100%!important;height:100%!important}.editor-actions{z-index:5;gap:20px;display:flex;position:absolute;top:24px;right:32px}.editor-actions button{color:#ffffff8f;background:#11111180;border:0;padding:3px 6px;font-size:13px;line-height:18px}.editor-actions button:hover{color:#fff}.code-editor-wrap{height:100%;position:relative}.load-example-button{z-index:4;color:#0b0710;white-space:nowrap;background:#c4b5fd;border:0;border-radius:22px;height:42px;padding:0 20px;font-size:14px;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px #0000005c}.load-example-button:hover{background:#d1c5ff}.load-example-button:focus-visible{outline-offset:3px;outline:2px solid #fff}.analysis-panel{z-index:6;color:#ffffffb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#090909f0;border:1px solid #ffffff1f;border-radius:10px;width:min(430px,100% - 40px);max-height:42%;position:absolute;bottom:18px;right:20px;overflow:auto;box-shadow:0 12px 38px #00000061}.analysis-panel summary{cursor:pointer;align-items:center;gap:9px;padding:11px 13px;font-size:12px;list-style:none;display:flex}.analysis-panel summary::-webkit-details-marker{display:none}.analysis-panel summary small{color:#ffffff57;text-transform:uppercase;letter-spacing:.06em;margin-left:auto;font-size:10px}.analysis-dot{background:#a7e7b0;border-radius:50%;width:7px;height:7px}.analysis-panel.blocking .analysis-dot{background:#ff7d72}.analysis-panel.warning .analysis-dot{background:#e3bd67}.analysis-passed-dot{z-index:6;cursor:pointer;appearance:none;background:#a7e7b0;border:0;border-radius:50%;width:8px;height:8px;padding:0;position:absolute;bottom:24px;right:24px;box-shadow:0 0 0 4px #a7e7b014}.analysis-passed-dot:hover,.analysis-passed-dot:focus-visible{box-shadow:0 0 0 5px #a7e7b029}.analysis-findings{border-top:1px solid #ffffff17;gap:1px;display:grid}.analysis-findings p{background:#ffffff05;gap:2px;margin:0;padding:9px 13px;font-size:11px;line-height:16px;display:grid}.analysis-findings strong{color:#e3bd67;text-transform:uppercase;letter-spacing:.05em;font-size:9px;font-weight:500}.analysis-findings p.block strong{color:#ff958b}.preview-controls{opacity:1;gap:10px;transition:opacity .15s;display:flex;position:absolute;bottom:26px;left:28px}.preview-controls.timeline-hidden{opacity:0;pointer-events:none}.color-control,.ratio-control,.publish-control{color:#fff;height:42px}.color-control{border:0;border-radius:22px;width:64px}.color-control.black-color{border:1px solid #ffffff29}.color-control.full-color-control{border:1px solid #ffffff1a}.color-control.full-color-control.light-full-color{border-color:#0000001a}.ratio-control{opacity:1;background:#ffffff1a;border:0;border-radius:22px;align-items:center;gap:8px;padding:0 14px;transition:opacity .15s;display:flex}.ratio-control.context-hidden{opacity:0}.preview-controls.dark-full-control .ratio-control{color:#000;background:#0000001a}.ratio-icon{border:1px solid #ffffff85;border-radius:3px;width:18px;max-height:18px;display:inline-block}.publish-control{z-index:6;color:#c4b5fd;background:0 0;border:1px solid #ffffff21;border-radius:22px;height:36px;padding:0 16px;font-size:14px;position:absolute;top:26px;right:26px}.context-backdrop{z-index:100;pointer-events:none;-webkit-backdrop-filter:blur();background:0 0;transition:background-color .15s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .15s cubic-bezier(.22,1,.36,1),backdrop-filter .15s cubic-bezier(.22,1,.36,1);position:fixed;inset:0}.context-backdrop.active{pointer-events:auto;-webkit-backdrop-filter:blur(4px);background:#00000029}.context-panel{z-index:101;visibility:hidden;opacity:0;pointer-events:none;transform-origin:0 100%;transition:opacity .15s,transform .15s cubic-bezier(.22,1,.36,1),visibility 0s linear .15s;position:absolute;bottom:26px;left:28px;transform:translateY(10px)scale(.985)}.context-panel.active{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .15s,transform .15s cubic-bezier(.22,1,.36,1),visibility;transform:translateY(0)scale(1)}.ratio-context{left:102px}.context-options{align-items:center;gap:8px;display:flex}.context-swatch{border:0;border-radius:22px;width:62px;height:42px}.context-swatch.active{outline-offset:2px;outline:2px solid #fff}.context-swatch.black-swatch{border:1px solid #ffffff2e}.custom-color-button,.context-ratios button,.custom-done{color:#ffffffb8;background:#242424;border:0}.custom-color-button{border-radius:22px;height:42px;padding:0 17px;font-size:13px}.context-ratios button{background:#ffffff1a;border-radius:22px;align-items:center;gap:9px;height:42px;padding:0 17px;font-size:14px;display:flex}.context-hint{color:#ffffff80;margin:0 0 10px;font-size:12px;line-height:18px}.custom-ratio-chip{color:#fff;background:#ffffff29;border-radius:22px;align-items:center;gap:3px;height:42px;padding:0 17px;font-size:14px;display:flex}.custom-ratio-chip input{width:2ch;color:inherit;caret-color:currentColor;font:inherit;font-variant-numeric:tabular-nums;text-align:center;background:0 0;border:0;outline:0;padding:0}.context-ratios button.active{color:#fff;background:#ffffff29}.ratio-context.dark-full-control .context-ratios button{color:#000000b8;background:#0000001a}.ratio-context.dark-full-control .context-hint{color:#00000080}.ratio-context.dark-full-control .custom-ratio-chip,.ratio-context.dark-full-control .context-ratios button.active{color:#000;background:#00000029}.ratio-context.dark-full-control .ratio-icon{border-color:#00000085}.custom-context{width:min(360px,100vw - 56px)}.custom-picker{background:#181818e6;border:1px solid #ffffff1a;border-radius:16px;gap:13px;padding:16px;display:grid}.custom-color-value{align-items:center;gap:10px;display:flex}.custom-color-value>span{border:1px solid #ffffff29;border-radius:50%;flex:none;width:32px;height:32px}.custom-color-value input{color:#fff;text-transform:uppercase;background:#111;border:1px solid #ffffff1f;border-radius:7px;outline:0;width:100%;height:34px;padding:0 10px;font:12px/1 ui-monospace,monospace}.custom-picker label{color:#ffffff75;grid-template-columns:16px 1fr;align-items:center;gap:8px;font-size:11px;display:grid}.custom-picker input[type=range]{appearance:none;border-radius:5px;outline:0;width:100%;height:7px}.custom-picker input[type=range].hue-range{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.custom-picker input[type=range]::-webkit-slider-thumb{appearance:none;background:0 0;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 5px #00000073}.custom-picker input[type=range]::-moz-range-thumb{background:0 0;border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 1px 5px #00000073}.custom-done{color:#fff;border-radius:8px;height:34px;margin-top:2px;font-size:12px}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-backdrop.publish-backdrop{-webkit-backdrop-filter:blur(200px);background:#000c}.modal{color:#fff;background:#151515;border:1px solid #343434;border-radius:12px;width:min(440px,100%);padding:28px;position:relative;box-shadow:0 24px 80px #00000080}.modal.compact-modal{width:auto;min-width:280px}.modal.overlay-modal{max-height:calc(100svh - 48px);box-shadow:none;background:0 0;border:0;border-radius:0;padding:0;overflow-y:auto}.modal.api-modal{width:min(760px,100%)}.modal.checks-modal,.modal.publish-modal{width:min(560px,100%)}.checks-explanation{gap:14px;display:grid}.checks-explanation h2,.checks-explanation p{margin:0}.checks-explanation h2{font-size:20px;font-weight:400}.checks-explanation p{color:#ffffff94;font-size:13px;line-height:20px}.modal h2{margin-bottom:12px;font-size:20px;font-weight:400}.modal>p{color:#ffffff8f;margin-bottom:18px;font-size:13px;line-height:19px}.modal code,.modal pre{font-family:ui-monospace,monospace}.api-sections{gap:26px;display:grid}.api-sections h3{color:#fff;margin-bottom:9px;font-size:13px;font-weight:400}.api-sections section>p{color:#ffffff7a;margin:-3px 0 10px;font-size:12px;line-height:18px}.api-sections dl{margin:0}.api-sections dl>div{border-top:1px solid #ffffff14;grid-template-columns:minmax(180px,.45fr) 1fr;gap:18px;padding:7px 0;display:grid}.api-sections dt,.api-sections dd{margin:0;font-size:12px;line-height:18px}.api-sections dd{color:#ffffff8a}.modal pre{color:#ffffffc7;white-space:pre-wrap;margin:0;font-size:12px;line-height:20px}.publish-form,.publish-form label{display:grid}.publish-form{gap:34px;margin:0}.publish-form label{gap:5px}.publish-form label span{color:#ffffff94;font-size:12px;line-height:18px}.publish-form input{color:#fff;letter-spacing:-.025em;background:0 0;border:0;outline:0;width:100%;height:38px;padding:0;font-size:20px;line-height:1.2}.publish-form input::placeholder{color:#ffffff47;opacity:1}.publish-form input:focus::placeholder{color:#ffffff6b}.modal-primary{color:#0b0710;background:#c4b5fd;border:0;border-radius:22px;justify-self:start;height:42px;margin-top:10px;padding:0 22px;font-size:14px;font-weight:500}.modal-primary:disabled{cursor:wait;opacity:.55}.publish-error{color:#ffb4ab;margin:-16px 0 0;font-size:12px;line-height:18px}.publish-analysis{background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;gap:5px;max-height:150px;margin-top:-8px;padding:12px 14px;display:grid;overflow-y:auto}.publish-analysis.blocking{background:#ff7d720f;border-color:#ff7d7259}.publish-analysis h3,.publish-analysis p{margin:0;font-size:11px;line-height:17px}.publish-analysis h3{color:#ffffffd1;font-weight:500}.publish-analysis p{color:#ffffff7a}.publish-analysis.blocking h3,.publish-analysis.blocking strong{color:#ff958b}.clock-page{min-height:100svh;position:relative}.clock-back,.clock-credit{z-index:10;color:#ffffff8a;font-size:14px;line-height:18px;text-decoration:none;position:fixed;top:28px}.clock-back{color:#fff;left:32px}.clock-back,.clock-back img{width:24px;height:24px}.clock-credit{margin:0;right:32px}.clock-credit strong{color:#fff;font-weight:400}.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}@media (width<=800px){.creator-page{grid-template-columns:1fr;height:auto;overflow:visible}.preview-side,.code-side{height:100svh}.code-side{border-top:1px solid #2a2a2a;border-left:0}.preview-frame{width:min(78%,560px)}.editor-actions{right:20px}.api-sections dl>div{grid-template-columns:1fr;gap:2px}}