@font-face{font-family:Rajdhani;src:url('./vanguard/fonts/Rajdhani-SemiBold.ttf') format('truetype');font-weight:600;font-display:block}
.watch-demo{padding:74px 0 20px}.demo-intro{max-width:670px;margin-bottom:42px}.demo-intro h1{font-size:clamp(42px,6vw,76px);letter-spacing:-.055em;line-height:1.03;margin:15px 0 20px}.demo-intro>p:last-child{max-width:510px;color:var(--muted);font-size:17px;line-height:1.7}.demo-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px;align-items:start}.demo-stage{position:sticky;top:24px;border:1px solid #f7f5ee17;border-radius:20px;background:radial-gradient(ellipse at 50% 43%,#2a2b26 0,#1a1b18 48%,#191a17 75%);overflow:hidden;min-width:0}.demo-stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:25px 26px 0;font-size:13px;font-weight:600}.demo-badge{font-size:9px;font-weight:500;letter-spacing:.1em;color:#9c9d93;border:1px solid #f7f5ee1a;border-radius:20px;padding:5px 8px;white-space:nowrap}.demo-hardware{position:relative;width:min(87%,430px);aspect-ratio:1/.99;margin:57px auto 36px;isolation:isolate}.demo-strap{position:absolute;left:25.5%;width:49%;z-index:-1;background:linear-gradient(90deg,#10110f,#292b25 18%,#20221d 52%,#1a1c17 82%,#0f100e);border:1px solid #44463b;border-radius:27px;box-shadow:inset 4px 0 3px #0a0b08,inset -4px 0 3px #0a0b08}.demo-strap-top{height:44%;top:-25%}.demo-strap-bottom{height:44%;bottom:-25%;background-image:repeating-linear-gradient(0deg,transparent 0 14px,#171913 14px 17px),linear-gradient(90deg,#10110f,#292b25 18%,#20221d 52%,#1a1c17 82%,#0f100e)}.demo-crown{position:absolute;right:-2.5%;top:45%;width:5%;height:12%;background:repeating-linear-gradient(0deg,#5f6158 0 2px,#252720 2px 4px);border:1px solid #080a07;border-radius:4px;z-index:-1}.demo-watch-case{width:100%;aspect-ratio:1;box-sizing:border-box;border:2px solid #74766b;border-radius:50%;padding:2.65%;background:linear-gradient(130deg,#6d7067,#252822 21%,#12140f 58%,#6b6d65);box-shadow:0 26px 48px #0008,0 0 0 2px #080a07,inset 0 1px 1px #c2c4b8}.demo-watch-glass{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#000;border:1px solid #000;box-shadow:0 0 0 2px #080a07,0 0 0 3px #4b4e42}.demo-watch-glass>div{width:100%;height:100%}#demo-watch-face{display:flex;align-items:center;justify-content:center}#demo-watch-face>svg{display:block;width:100%;height:100%;border-radius:50%;overflow:visible}.demo-loading{font-size:13px;color:#999}.demo-stage-bottom{position:relative;z-index:2;text-align:center;margin:53px 16px 0;background:linear-gradient(0deg,#191a17 65%,transparent);padding:25px 0 0}.demo-stage-bottom p{margin:0;font-size:12px;color:#adafa4;line-height:1.6}.demo-stage-bottom .demo-stage-hint{font-size:12px;color:#969c8c;margin-top:3px}.demo-download{display:inline-flex;align-items:center;gap:30px;justify-content:center;border:1px solid #f7f5ee30;color:#eeeede;background:#24261f;font-size:14px;min-height:44px;border-radius:7px;padding:10px 18px;margin-top:19px;cursor:pointer}.demo-download:disabled{opacity:.4;cursor:wait}.demo-status{min-height:18px;margin:10px 20px 14px;text-align:center;font-size:12px;color:#a8af9c;line-height:1.4}.demo-editor{min-width:0}.demo-editor fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}.demo-editor legend{display:flex;align-items:center;gap:12px;width:100%;padding:0;margin-bottom:16px;font-size:10px;font-weight:400;color:#85877b;font-variant-numeric:tabular-nums;letter-spacing:.03em}.demo-editor legend span{font-size:14px;color:#f7f5ee;letter-spacing:0;font-weight:500}.demo-face-options{display:grid;gap:8px}.demo-face-card{display:flex;align-items:center;gap:15px;width:100%;border:1px solid #f7f5ee19;background:#1b1c18;color:#f7f5ee;padding:12px 14px;border-radius:10px;text-align:left;cursor:pointer}.demo-face-card[aria-pressed=true]{border-color:#d9dcc17a;background:#292b24}.demo-face-thumb{width:53px;height:53px;border-radius:50%;overflow:hidden;background:#000;flex-shrink:0}.demo-face-thumb svg{display:block;width:100%;height:100%}.demo-face-card strong{display:block;font-size:14px;font-weight:600;letter-spacing:.01em}.demo-face-card small{display:block;margin-top:4px;font-size:12px;color:#a4ab96}.demo-choice-mark{margin-left:auto;opacity:0;color:#dddcc9;font-size:14px}.demo-face-card[aria-pressed=true] .demo-choice-mark{opacity:1}.demo-label-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b5b8aa;margin-bottom:8px}.demo-label-line span{color:#929987;font-size:12px}.demo-editor select{width:100%;color:#eeeee4;background:#20221b;border:1px solid #f7f5ee2a;min-height:44px;border-radius:6px;font-family:inherit;font-size:14px;padding:8px 28px 8px 10px;cursor:pointer;color-scheme:dark}.demo-swatches{display:flex;flex-wrap:wrap;gap:2px;margin-top:9px;padding:2px}.demo-swatch{border:0;background:transparent;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;padding:3px;cursor:pointer;outline:1px solid transparent;outline-offset:0}.demo-swatch svg{width:18px;height:18px}.demo-swatch[aria-pressed=true]{outline-color:#e8e8d7}.demo-segment{display:flex;padding:3px;background:#1c1e18;border:1px solid #f7f5ee17;border-radius:7px;gap:3px}.demo-segment[hidden]{display:none}.demo-segment button{flex:1;color:#919586;background:transparent;border:0;font-family:inherit;font-size:14px;min-height:44px;padding:8px;border-radius:4px;cursor:pointer}.demo-segment button[aria-pressed=true]{color:#f7f5ee;background:#37392e;box-shadow:0 1px 3px #0003}.demo-inline-controls{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:15px}.demo-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;min-height:30px;color:#b6b8aa;cursor:pointer;line-height:1.8}.demo-check input{accent-color:#d9dcc1;cursor:pointer;width:14px;height:14px;margin:0}.demo-check[hidden]{display:none}#demo-aod-context-label{margin-top:9px}.demo-fields{border-top:1px solid #f7f5ee19;padding-top:17px}.demo-fields summary{display:flex;justify-content:space-between;list-style:none;font-size:14px;min-height:32px;cursor:pointer;color:#f0f0e4}.demo-fields summary::-webkit-details-marker{display:none}.demo-fields summary span{color:#878b7a;font-size:17px;line-height:1}.demo-fields[open] summary span{transform:rotate(45deg)}.demo-fields>p{color:#a0a792;font-size:12px;line-height:1.6;margin:10px 0 15px}.demo-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-field-label{display:block;color:#b2b9a5;font-size:12px;line-height:1.5;min-width:0}.demo-field-label select{margin-top:5px;font-size:14px;min-height:44px}.demo-gauges{padding-top:15px;margin-top:15px;border-top:1px solid #f7f5ee13}.demo-gauges[hidden]{display:none}.demo-editor-footer{margin-top:22px;padding-top:17px;border-top:1px solid #f7f5ee19;display:flex;justify-content:space-between;gap:15px;font-size:12px}.demo-text-button{font:inherit;background:none;border:0;padding:0;color:#a5ab96;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.demo-editor-footer a{font-size:12px;color:#dddcc7;text-decoration:none}.demo-note{display:flex;gap:18px;margin:48px 0 0;padding:24px 0;border-top:1px solid #f7f5ee18;align-items:flex-start}.demo-note-icon{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border:1px solid #f7f5ee26;border-radius:50%;font-size:15px;color:#b4b8a4}.demo-note p{font-size:13px;line-height:1.8;color:#a2aa94;max-width:800px;margin:0}.demo-note strong{display:block;color:#d0d5c2;font-size:14px;font-weight:500;margin-bottom:4px}.demo-no-script{border:1px solid #f7f5ee40;padding:15px;color:#ddd}.watch-demo button,.watch-demo input,.watch-demo select,.watch-demo summary{-webkit-tap-highlight-color:transparent}.watch-demo button:focus-visible,.watch-demo input:focus-visible,.watch-demo select:focus-visible,.watch-demo summary:focus-visible,.watch-demo a:focus-visible{outline:2px solid #e3e5ce;outline-offset:4px}.watch-demo [data-slot]{cursor:pointer;outline:none}.watch-demo [data-slot]:focus-visible [data-role=slot-hit],.watch-demo [data-slot].demo-field-selected [data-role=slot-hit]{stroke:#f7f5ee!important;stroke-width:2px!important}.watch-demo [data-slot]:focus-visible>rect:first-child,.watch-demo [data-gauge]:focus-visible>rect:first-child{stroke:#f7f5ee;stroke-width:1.5}.watch-demo [data-slot]:focus-visible{filter:drop-shadow(0 0 2px #ddd8)}
@media(min-width:1400px){.demo-layout{gap:70px}.demo-hardware{width:430px}}
@media(max-width:850px){.demo-layout{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.demo-stage-top{padding:20px 16px 0;font-size:11px}.demo-badge{font-size:8px;padding:4px 6px}.demo-hardware{width:86%;margin-top:65px}.demo-stage-bottom{margin-top:50px}.demo-face-card{gap:10px;padding:10px}.demo-face-thumb{width:43px;height:43px}.demo-face-card strong{font-size:14px}.demo-face-card small{font-size:12px}}
@media(max-width:680px){.watch-demo{padding-top:44px}.demo-intro{margin-bottom:28px}.demo-intro h1{font-size:48px}.demo-intro>p:last-child{font-size:14px}.demo-layout{display:flex;flex-direction:column;gap:32px}.demo-stage{position:relative;top:auto;width:100%;max-width:500px;align-self:center}.demo-stage-top{padding:22px 22px 0;font-size:12px}.demo-hardware{width:76%;max-width:350px;margin-top:50px;margin-bottom:25px}.demo-stage-bottom{margin-top:36px;padding-top:26px}.demo-stage-hint{display:none}.demo-download{margin-top:14px}.demo-status{margin-bottom:10px}.demo-editor{width:100%}.demo-face-options{grid-template-columns:1fr 1fr;gap:9px}.demo-face-card{flex-wrap:wrap;gap:10px;padding:13px;position:relative}.demo-face-thumb{width:48px;height:48px}.demo-face-card>span:nth-child(2){flex-basis:100%}.demo-face-card strong{font-size:14px}.demo-face-card small{font-size:12px;line-height:1.5}.demo-choice-mark{position:absolute;right:13px;top:15px}.demo-editor fieldset{margin-bottom:27px}.demo-swatches{gap:2px}.demo-swatch{width:44px;height:44px}.demo-editor select,.demo-field-label select{font-size:16px}.demo-note{margin-top:30px;gap:13px}.demo-note p{font-size:12px}.demo-note strong{font-size:14px}.demo-field-grid{gap:12px 15px}}
@media(max-width:380px){.demo-intro h1{font-size:42px}.demo-stage-top{padding:19px 14px 0;font-size:11px;gap:8px}.demo-badge{font-size:7px}.demo-hardware{width:80%;margin-top:42px}.demo-stage-bottom{margin-top:25px}.demo-stage-bottom p{font-size:12px}.demo-face-card{padding:11px}.demo-face-card strong{font-size:13px}.demo-face-card small{font-size:12px}.demo-editor-footer{font-size:12px}.demo-editor-footer a{font-size:12px}.demo-field-grid{column-gap:10px}.demo-field-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.watch-demo *{scroll-behavior:auto;animation:none!important;transition:none!important}}