.utd-examples-page{min-height:100vh;background:var(--utd-canvas);color:#f0f6fc;color-scheme:dark;--background: #060a12;--foreground: #f0f6fc;--card: rgba(255, 255, 255, .075);--card-foreground: #f0f6fc;--popover: #0b0f19;--popover-foreground: #f0f6fc;--primary: #8affc4;--primary-foreground: #071f16;--secondary: rgba(255, 255, 255, .1);--secondary-foreground: #f0f6fc;--surface-muted: rgba(255, 255, 255, .1);--muted: #9aa8ba;--accent-surface: rgba(138, 255, 196, .14);--line: rgba(255, 255, 255, .12);--ring: #8affc4;--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}.utd-examples-topbar{margin-top:32px}.utd-blueprint-page .utd-examples-topbar{margin-bottom:0}.utd-examples-page .utd-container{width:min(100%,var(--utd-container));padding-inline:var(--utd-gutter)}.utd-examples-main{position:relative;z-index:1;padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,88px)}.utd-examples-page .utd-examples-head{max-width:min(100%,1120px);margin-bottom:30px}.utd-examples-page .utd-examples-head .utd-eyebrow{min-height:auto;margin-bottom:18px;padding:8px 16px}.utd-examples-page .utd-examples-head h1{margin:0 0 14px;color:var(--utd-heading);font-size:4.5rem;font-weight:500;line-height:1.04;letter-spacing:0;text-wrap:nowrap;white-space:nowrap}.utd-examples-page .utd-examples-head p{max-width:86ch;margin:0;color:var(--utd-body);font-size:1.125rem;line-height:1.6}.utd-examples-controls{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}.utd-examples-search{display:flex;width:100%;max-width:340px;min-height:46px;align-items:center;gap:10px;flex:0 0 auto;border-radius:var(--utd-radius-full);padding:0 16px}.utd-examples-search:focus-within{border-color:#8affc48c;box-shadow:var(--utd-glass-shadow),0 0 0 3px #8affc42e}.utd-examples-search svg{width:18px;height:18px;flex:0 0 auto;color:var(--utd-body-subtle)}.utd-examples-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--utd-heading);font-size:15px}.utd-examples-search input::placeholder{color:var(--utd-body-subtle)}.utd-examples-filters{display:flex;flex-wrap:wrap;gap:7px}.utd-filter-chip{display:inline-flex;min-height:30px;align-items:center;justify-content:center;border:1px solid var(--utd-glass-border-subtle);border-radius:var(--utd-radius-full);background:var(--utd-glass-bg);padding:5px 11px;color:var(--utd-body);cursor:pointer;font:inherit;font-size:12.5px;font-weight:500;transition:background .18s var(--utd-ease),border-color .18s var(--utd-ease),color .18s var(--utd-ease)}.utd-filter-chip:hover,.utd-filter-chip:focus-visible{background:var(--utd-glass-bg-hover);color:var(--utd-heading);outline:none}.utd-filter-chip.is-active{border-color:transparent;background:var(--utd-brand);color:var(--utd-brand-on)}.utd-examples-result-count,.utd-examples-count{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;color:var(--utd-body-subtle);font-size:14px}.utd-examples-result-count a,.utd-examples-count a{display:inline-flex;align-items:center;gap:7px;color:var(--utd-brand);font-weight:500}.utd-examples-result-count svg,.utd-examples-count svg{width:16px;height:16px}.utd-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.utd-example-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border-radius:var(--utd-radius-lg);transition:background .2s var(--utd-ease),border-color .2s var(--utd-ease),transform .2s var(--utd-ease)}.utd-example-card:hover,.utd-example-card:focus-visible{border-color:#8affc452;background:var(--utd-glass-bg-hover);outline:none;transform:translateY(-3px)}.utd-example-shot{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--utd-glass-border-subtle);background:linear-gradient(150deg,#8affc429,#38bdf81a 50%,#a78bfa1f)}.utd-example-shot>img,.utd-example-shot>.utd-example-preview{width:100%;height:100%}.utd-example-shot>img{object-fit:cover;object-position:top center;transition:transform .34s var(--utd-ease)}.utd-example-card:hover .utd-example-shot>img{transform:scale(1.03)}.utd-example-cat{position:absolute;top:12px;left:12px;border:1px solid var(--utd-glass-border);border-radius:var(--utd-radius-full);background:#080c168c;padding:5px 11px;color:var(--utd-heading);font-size:12px;font-weight:500;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.utd-example-body{display:flex;flex:1;flex-direction:column;gap:9px;padding:15px 17px 17px}.utd-example-top{display:flex;align-items:center;gap:10px}.utd-example-logo{position:relative;width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;border:1px solid var(--utd-glass-border);border-radius:var(--utd-radius-sm);background:#ffffff14}.utd-example-logo img,.utd-logo-fallback{grid-area:1 / 1}.utd-example-logo img{width:18px;height:18px;object-fit:contain}.utd-logo-fallback{color:var(--utd-heading);font-size:13px;font-weight:600}.utd-example-host{flex:1;min-width:0;overflow:hidden;color:var(--utd-body);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.utd-example-card h2{margin:0;color:var(--utd-heading);font-size:18px;line-height:1.25}.utd-example-card p{margin:0;display:-webkit-box;overflow:hidden;color:var(--utd-body);font-size:13.5px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.utd-example-media-link{display:block;padding:.75rem}.utd-example-media{position:relative;aspect-ratio:16 / 10;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:linear-gradient(135deg,rgba(138,255,196,.16),transparent 42%),linear-gradient(160deg,#111827,#080b12 74%)}.utd-example-media-large{min-height:0}.utd-example-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}.utd-example-preview{height:100%;min-height:100%;padding:1rem}.utd-example-preview-large{padding:1.25rem}.utd-preview-toolbar{display:flex;gap:.4rem;margin-bottom:1rem}.utd-preview-toolbar span{width:.62rem;height:.62rem;border-radius:999px;background:#ffffff3d}.utd-preview-source{display:inline-flex;max-width:100%;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#ffffff12;padding:.35rem .6rem;color:#c9d4e5;font-size:.76rem;font-weight:700}.utd-preview-source svg{width:.9rem;height:.9rem;flex:0 0 auto;color:#8affc4}.utd-preview-source span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.utd-preview-title{max-width:16rem;margin-top:1.15rem;color:#f0f6fc;font-size:2.125rem;font-weight:700;line-height:1.05;letter-spacing:0}.utd-preview-swatches{display:flex;gap:.5rem;margin-top:1.25rem}.utd-preview-swatches span{width:2.25rem;height:2.25rem;border:1px solid rgba(255,255,255,.22);border-radius:8px}.utd-preview-lines{display:grid;gap:.55rem;margin-top:1.3rem}.utd-preview-lines span{height:.54rem;border-radius:999px;background:#ffffff24}.utd-preview-lines span:nth-child(1){width:76%}.utd-preview-lines span:nth-child(2){width:92%}.utd-preview-lines span:nth-child(3){width:58%}.utd-preview-components{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}.utd-preview-components span{display:inline-flex;max-width:100%;min-height:1.7rem;align-items:center;overflow:hidden;border:1px solid rgba(138,255,196,.2);border-radius:6px;background:#8affc414;padding:.25rem .55rem;color:#dfffea;font-size:.72rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.utd-examples-empty{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#ffffff13;padding:2rem}.utd-examples-empty h2{margin:0;color:#f0f6fc;font-size:1.25rem}.utd-examples-empty p{margin:.5rem 0 0;color:#a8b6c7}.utd-blueprint{padding:clamp(1rem,2.5vw,1.75rem) 0 5rem}.utd-bp-shell{width:min(calc(100% - 2rem),1180px);margin:0 auto}.utd-bp-shell.ex-main{width:min(calc(100% - 2rem),1160px)}.ex-breadcrumb{display:flex;align-items:center;gap:.5rem;margin-top:0;color:var(--utd-body-subtle);font-size:.82rem}.ex-breadcrumb a{color:var(--utd-body);text-decoration:none}.ex-breadcrumb a:hover,.ex-breadcrumb a:focus-visible{color:var(--utd-heading);outline:none}.ex-breadcrumb svg{width:.9rem;height:.9rem;opacity:.62}.ex-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr);gap:clamp(1.75rem,5vw,4rem);align-items:center;padding-block:clamp(1.25rem,3vw,2rem) clamp(2rem,5vw,3.25rem)}.ex-hero-copy{min-width:0}.ex-hero-eyebrow{margin:0;color:var(--utd-body);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}.ex-hero-eyebrow b{color:var(--utd-brand);font-weight:600}.ex-hero h1{margin:.9rem 0 1.1rem;max-width:13ch;color:var(--utd-heading);font-size:3.75rem;font-weight:680;letter-spacing:0;line-height:1.02;text-wrap:balance}.ex-lead{max-width:56ch;margin:0 0 1.35rem;color:var(--utd-body);font-size:1.125rem;line-height:1.65;text-wrap:pretty}.ex-host{display:inline-flex;min-height:2.5rem;align-items:center;gap:.62rem;border-radius:var(--utd-radius-full);padding:.55rem .85rem;color:var(--utd-body);font-size:.88rem}.ex-host img{width:1.125rem;height:1.125rem;border-radius:5px}.ex-host svg{width:.9rem;height:.9rem}.ex-host a{display:inline-flex;align-items:center;gap:.32rem;margin-left:.25rem;color:var(--utd-brand);text-decoration:none}.ex-source-shot{align-self:center;display:flex;min-height:17rem;flex-direction:column;overflow:hidden;border-radius:var(--utd-radius-lg);margin:0;padding:.56rem}.ex-source-frame,.ex-source-empty{position:relative;display:block;flex:0 0 auto;min-height:0;aspect-ratio:16 / 10;overflow:hidden;border:1px solid var(--utd-glass-border-subtle);border-radius:10px;background:#070b13}.ex-source-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}.ex-source-empty{display:grid;place-items:center;color:var(--utd-body);font-size:.86rem}.ex-source-shot figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.68rem .2rem .05rem;color:var(--utd-body-subtle);font-family:var(--mono);font-size:.72rem}.ex-source-shot figcaption a{display:inline-flex;align-items:center;gap:.32rem;color:var(--utd-brand);font-family:var(--utd-font, inherit);font-size:.8rem;font-weight:700;text-decoration:none}.ex-source-shot figcaption a:hover,.ex-source-shot figcaption a:focus-visible{color:var(--utd-heading);outline:none}.ex-source-shot figcaption svg{width:.86rem;height:.86rem}.ex-modebar{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 calc(var(--utd-gutter) * -1);border-bottom:1px solid var(--utd-glass-border-subtle);background:linear-gradient(180deg,#06080fdb,#06080f9e);padding:.75rem var(--utd-gutter);backdrop-filter:blur(var(--utd-blur));-webkit-backdrop-filter:blur(var(--utd-blur))}.ex-mode-toggle{display:inline-flex;gap:.25rem;border:1px solid var(--utd-glass-border);border-radius:var(--utd-radius-full);background:var(--utd-glass-bg);padding:.25rem}.ex-mode-btn{display:inline-flex;min-height:2.38rem;align-items:center;gap:.5rem;border:none;border-radius:var(--utd-radius-full);background:transparent;padding:.5rem 1.1rem;color:var(--utd-body);cursor:pointer;font:inherit;font-size:.88rem;font-weight:600;transition:background .2s var(--utd-ease),color .2s var(--utd-ease)}.ex-mode-btn svg{width:1rem;height:1rem}.ex-mode-btn[aria-selected=true]{background:var(--utd-brand);color:var(--utd-brand-on)}.ex-mode-btn:not([aria-selected=true]):hover,.ex-mode-btn:not([aria-selected=true]):focus-visible{color:var(--utd-heading);outline:none}.ex-modebar-jump{display:flex;flex:1 1 auto;justify-content:center;gap:.38rem}.ex-jump{border-radius:var(--utd-radius-full);padding:.38rem .68rem;color:var(--utd-body-subtle);font-size:.78rem;font-weight:600;text-decoration:none}.ex-jump:hover,.ex-jump:focus-visible{background:var(--utd-glass-bg);color:var(--utd-heading);outline:none}.ex-toast-inline{position:absolute;right:var(--utd-gutter);bottom:-2.2rem}.ex-view[hidden]{display:none}.ex-block{padding-block:clamp(1.75rem,3.4vw,2.75rem);border-top:1px solid var(--utd-glass-border-subtle);scroll-margin-top:5.25rem}.ex-block:first-child{border-top:none;padding-top:clamp(1.5rem,3vw,2.25rem)}.ex-block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem;margin-bottom:1.5rem}.ex-index{padding-top:.35rem;color:var(--utd-brand);font-family:var(--mono);font-size:.82rem;letter-spacing:.1em}.ex-block-head h2{margin:0;color:var(--utd-heading);font-size:2rem;letter-spacing:0;line-height:1.15}.ex-block-head p{width:100%;max-width:64ch;margin:.5rem 0 0;color:var(--utd-body);font-size:.94rem;line-height:1.6}.ex-block-head .pad{flex:1 1 20rem;min-width:0;padding-left:2.38rem}.ex-color-card{border-radius:var(--utd-radius-lg);padding:clamp(1rem,2vw,1.5rem)}.ex-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.88rem}.ex-chip{display:flex;overflow:hidden;flex-direction:column;border:1px solid var(--utd-glass-border);border-radius:8px;background:var(--utd-glass-bg);cursor:pointer;font:inherit;padding:0;text-align:left;transition:background .2s var(--utd-ease),transform .2s var(--utd-ease)}.ex-chip:hover,.ex-chip:focus-visible{background:var(--utd-glass-bg-hover);outline:none;transform:translateY(-2px)}.ex-chip-swatch{position:relative;display:flex;height:5.25rem;align-items:flex-end;padding:.7rem;box-shadow:inset 0 0 0 1px #fff3,inset 0 1.5px #ffffff47}.ex-chip-hex,.ex-chip-copy{border:1px solid rgba(255,255,255,.18);border-radius:var(--utd-radius-full);background:#04070ea8;color:#fff;font-family:var(--mono);font-size:.74rem;padding:.25rem .55rem}.ex-chip-copy{position:absolute;top:.55rem;right:.55rem;display:inline-flex;align-items:center;gap:.3rem;opacity:0;transition:opacity .18s var(--utd-ease)}.ex-chip:hover .ex-chip-copy,.ex-chip:focus-visible .ex-chip-copy{opacity:1}.ex-chip-copy svg{width:.75rem;height:.75rem}.ex-chip-body{display:flex;flex-direction:column;gap:.44rem;padding:.8rem .9rem .94rem}.ex-chip-name{color:var(--utd-heading);font-family:var(--mono);font-size:.82rem}.ex-chip-usage{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:var(--utd-body);font-size:.78rem}.ex-dot{width:.5rem;height:.5rem;border-radius:50%;flex:none}.ex-dot.d{background:var(--utd-brand)}.ex-dot.i{background:var(--utd-sky)}.ex-dot.r{background:var(--utd-orange)}.ex-type{display:grid;gap:1.1rem}.ex-specimen{position:relative;overflow:hidden;border-radius:var(--utd-radius-lg);padding:clamp(1.75rem,4vw,3rem)}.ex-specimen:after{position:absolute;inset:-40% -10% auto auto;width:60%;height:200%;background:radial-gradient(closest-side,rgba(94,106,210,.28),transparent 70%);content:"";pointer-events:none}.ex-specimen-grid{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}.ex-aa{color:var(--utd-heading);font-size:7.5rem!important;font-weight:620;letter-spacing:0;line-height:.82}.ex-specimen-line{color:var(--utd-heading);font-size:2.5rem!important;letter-spacing:0;line-height:1.1;text-wrap:balance}.ex-specimen-meta{display:flex;flex-wrap:wrap;gap:.62rem 1.38rem;margin-top:1.1rem;color:var(--utd-body);font-size:.82rem}.ex-specimen-meta b{color:var(--utd-heading);font-weight:600}.ex-scale{overflow:hidden;border-radius:var(--utd-radius-lg)}.ex-scale-cols{display:grid;grid-template-columns:minmax(0,1fr) 5.4rem 3.75rem 4rem 5.5rem;gap:1.25rem;align-items:center;padding:.82rem 1.38rem}.ex-scale-head{border-bottom:1px solid var(--utd-glass-border-subtle)}.ex-scale-head span{color:var(--utd-body-subtle);font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase}.ex-scale-head span:first-child{letter-spacing:0;text-transform:none}.ex-scale-row{width:100%;border:0;border-top:1px solid var(--utd-glass-border-subtle);background:transparent;cursor:pointer;font:inherit;text-align:left;transition:background .18s var(--utd-ease)}.ex-scale-row:hover,.ex-scale-row:focus-visible{background:var(--utd-glass-bg);outline:none}.ex-scale-sample{min-width:0;overflow:hidden;color:var(--utd-heading);text-overflow:ellipsis;white-space:nowrap}.ex-scale-num{color:var(--utd-body);font-family:var(--mono);font-size:.82rem}.ex-scale-num.tok{color:var(--utd-brand)}.ex-pairing,.ex-shape{display:grid;gap:1.1rem}.ex-pairing{grid-template-columns:1fr 1fr}.ex-pair,.ex-panel{border-radius:var(--utd-radius-lg);padding:1.62rem}.ex-pair{display:flex;flex-direction:column}.ex-pair-tag{display:inline-flex;align-self:flex-start;border:1px solid var(--utd-glass-border);border-radius:var(--utd-radius-full);color:var(--utd-body);font-size:.75rem;letter-spacing:.04em;margin-bottom:1.35rem;padding:.32rem .68rem;text-transform:uppercase}.ex-pair-sample{color:var(--utd-heading)}.ex-pair-display .ex-pair-sample{font-size:2.5rem!important;line-height:1.05}.ex-pair-body .ex-pair-sample{color:var(--utd-body);font-size:1rem!important;line-height:1.65}.ex-pair-meta{margin:auto 0 0;padding-top:1.35rem;color:var(--utd-body);font-size:.82rem;line-height:1.6}.ex-pair-meta b{color:var(--utd-heading);font-weight:600}.ex-pair-note{grid-column:1 / -1;display:flex;align-items:flex-start;gap:.75rem;border-radius:8px;color:var(--utd-body);font-size:.88rem;line-height:1.6;padding:1.1rem 1.38rem}.ex-pair-note svg{width:1.1rem;height:1.1rem;color:var(--utd-brand);flex:none;margin-top:.13rem}.ex-shape{grid-template-columns:1.4fr 1fr;align-items:start}.ex-panel h3{color:var(--utd-heading);font-size:.88rem;margin:0 0 .25rem}.ex-panel .sub{color:var(--utd-body-subtle);font-family:var(--mono);font-size:.78rem;margin:0 0 1.35rem}.ex-space-row{display:flex;align-items:center;gap:.88rem;margin-bottom:.7rem}.ex-space-bar{flex:none;height:.82rem;min-width:.25rem;border-radius:3px;background:linear-gradient(90deg,var(--utd-brand),var(--utd-sky));opacity:.9}.ex-space-val,.ex-radius-val{color:var(--utd-body);font-family:var(--mono);font-size:.78rem}.ex-radius-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));gap:.88rem}.ex-radius-cell{text-align:center}.ex-radius-box{aspect-ratio:1;border:1.5px solid var(--utd-brand);border-right:0;border-bottom:0;background:linear-gradient(135deg,rgba(138,255,196,.12),transparent 60%)}.ex-radius-val{margin-top:.5rem}.ex-comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1rem}.ex-comp{display:flex;flex-direction:column;gap:1rem;border-radius:8px;padding:1.25rem}.ex-comp-stage{display:flex;min-height:4.88rem;align-items:center;justify-content:center;border:1px solid #23252a;border-radius:8px;background:#08090a;padding:1rem}.ex-comp-shape{display:inline-flex;min-width:5.5rem;align-items:center;justify-content:center;color:#fff;font-family:var(--mono);font-size:.74rem;padding:.62rem 1rem}.ex-comp-meta h4{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .32rem;color:var(--utd-heading);font-size:.88rem}.ex-comp-kind{border:1px solid var(--utd-glass-border-subtle);border-radius:var(--utd-radius-full);color:var(--utd-body-subtle);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;padding:.18rem .44rem;text-transform:uppercase}.ex-comp-meta p{margin:0;color:var(--utd-body);font-size:.82rem;line-height:1.55}.ex-legend{display:flex;flex-wrap:wrap;gap:.62rem;margin-bottom:1.25rem}.ex-evidence{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.ex-ev{display:flex;min-height:2.75rem;align-items:flex-start;justify-content:space-between;gap:.88rem;border:1px solid var(--utd-glass-border-subtle);border-radius:8px;background:var(--utd-glass-bg);padding:1rem 1.12rem}.ex-ev-l strong{display:block;color:var(--utd-heading);font-size:.88rem;font-weight:600;margin-bottom:.25rem}.ex-ev-l span{color:var(--utd-body);font-size:.82rem;line-height:1.5}.ex-limits{display:flex;flex-wrap:wrap;gap:.62rem 1.38rem;border-radius:8px;color:var(--utd-body);font-size:.82rem;margin-top:1.38rem;padding:1rem 1.25rem}.ex-limits span{display:inline-flex;align-items:center;gap:.44rem}.ex-limits svg{width:.88rem;height:.88rem;color:var(--utd-body-subtle)}.ex-raw .utd-workbench{margin-top:1.62rem}.ex-raw .utd-workbench-body{grid-template-columns:1fr}.ex-raw .utd-output-panel{padding:1.38rem}.ex-copybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.5rem}.ex-copybar p{margin:0;color:var(--utd-body);font-size:.88rem}.ex-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;position:relative}.ex-final{position:relative;overflow:hidden;border-radius:var(--utd-radius-lg);margin-block:clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,5vw,4rem);padding:clamp(2.25rem,5vw,3.75rem);text-align:center}.ex-final:after{position:absolute;inset:auto -20% -80%;height:200%;background:radial-gradient(closest-side,rgba(138,255,196,.16),transparent 70%);content:"";pointer-events:none}.ex-final h2{position:relative;margin:0 0 .75rem;color:var(--utd-heading);font-size:2.38rem;letter-spacing:0}.ex-final p{position:relative;max-width:52ch;margin:0 auto 1.62rem;color:var(--utd-body);font-size:1rem;line-height:1.6}.utd-blueprint-page .ex-final .utd-button-ghost{border-color:#ffffffb8;background:#f5faffeb;color:#071f16}.utd-blueprint-page .ex-final .utd-button-ghost:hover,.utd-blueprint-page .ex-final .utd-button-ghost:focus-visible{border-color:#8affc4b8;background:#8affc4;color:#04150d}.utd-example-back{display:inline-flex;align-items:center;gap:.4rem;color:#c9d4e5;font-size:.86rem;font-weight:600;transition:color .16s ease}.utd-example-back:hover{color:#8affc4}.utd-example-back svg{width:1rem;height:1rem}.utd-bp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(1.5rem,3vw,2.75rem);align-items:center;margin-top:1.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.utd-bp-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;color:#94a3b8;font-family:var(--mono);font-size:.76rem;font-weight:500}.utd-bp-hero-meta span{display:inline-flex;align-items:center;gap:.3rem}.utd-bp-hero-meta span:first-child{color:#8affc4}.utd-bp-hero-meta span+span:before{content:"";width:3px;height:3px;margin-right:.55rem;border-radius:999px;background:#ffffff52}.utd-bp-hero-meta svg{width:.9rem;height:.9rem}.utd-bp-hero-text h1{margin:.8rem 0 0;color:#f0f6fc;font-size:3rem;font-weight:700;line-height:1.06;letter-spacing:0;text-wrap:balance}.utd-bp-hero-text>p{margin:.9rem 0 0;max-width:52ch;color:#c4d0df;font-size:1.02rem;line-height:1.6}.utd-bp-hero-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}.utd-bp-hero-shot{position:relative;margin:0;padding:.7rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(90deg,rgba(138,255,196,.05) 0 1px,transparent 1px 100%),linear-gradient(180deg,rgba(138,255,196,.04) 0 1px,transparent 1px 100%),#ffffff08;background-size:22px 22px,22px 22px,auto}.utd-bp-hero-shot:before,.utd-bp-hero-shot:after{content:"";position:absolute;width:12px;height:12px;border-color:#8affc480;border-style:solid}.utd-bp-hero-shot:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.utd-bp-hero-shot:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}.utd-bp-hero-shot .utd-example-media{border-radius:9px}.utd-bp-hero-shot figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem;padding:0 .15rem;color:#94a3b8;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em}.utd-bp-hero-shot figcaption a{display:inline-flex;align-items:center;gap:.3rem;color:#c9d4e5;font-weight:600}.utd-bp-hero-shot figcaption a:hover{color:#8affc4}.utd-bp-hero-shot figcaption svg{width:.85rem;height:.85rem}.utd-blueprint-page .utd-button{display:inline-flex;min-height:2.6rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:#ffffff0f;padding:0 1.05rem;color:#f0f6fc;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.utd-blueprint-page .utd-button:hover,.utd-blueprint-page .utd-button:focus-visible{border-color:#8affc457;background:#8affc41f;color:#e9fff2;outline:none}.utd-blueprint-page .utd-button svg{width:1rem;height:1rem}.utd-blueprint-page .utd-button-primary{border-color:transparent;background:#8affc4;color:#071f16}.utd-blueprint-page .utd-button-primary:hover,.utd-blueprint-page .utd-button-primary:focus-visible{background:#6befab;color:#04150d}.utd-blueprint-page .utd-button-ghost{background:transparent;color:#c9d4e5}.utd-blueprint-page .utd-button-danger{border-color:#f8717159;background:#f871711a;color:#fca5a5}.utd-blueprint-page .utd-button-danger:hover,.utd-blueprint-page .utd-button-danger:focus-visible{border-color:#f871718c;background:#f871712e;color:#fecaca}.utd-blueprint-embedded.utd-examples-page{min-height:auto}.utd-blueprint-embedded{border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}.utd-blueprint-embedded .utd-blueprint{padding:1.75rem 0 2.75rem}.utd-blueprint-embedded .utd-rise{opacity:1;transform:none;animation:none}.utd-bp-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.75rem 0 .5rem}.utd-bp-modes{display:inline-flex;gap:.25rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#ffffff0a;padding:.25rem}.utd-bp-modes button{display:inline-flex;min-height:2.1rem;align-items:center;gap:.4rem;border:0;border-radius:999px;background:transparent;padding:0 .95rem;color:#a8b6c7;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;transition:background .18s ease,color .18s ease}.utd-bp-modes button svg{width:.95rem;height:.95rem}.utd-bp-modes button.is-active{background:#8affc4;color:#071f16}.utd-bp-modes button:not(.is-active):hover{color:#e9fff2}.utd-bp-notice{display:inline-flex;align-items:center;gap:.35rem;margin:0;color:#8affc4;font-size:.82rem;font-weight:600}.utd-bp-notice svg{width:.95rem;height:.95rem}.utd-bp-section{padding:2rem 0;border-top:1px solid rgba(255,255,255,.09)}.utd-bp-section:first-of-type{border-top:0}.utd-bp-section-head{display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.25rem}.utd-bp-section-head h2{margin:0;color:#f0f6fc;font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.utd-bp-section-count{color:#5d6b7e;font-family:var(--mono);font-size:.78rem}.utd-bp-section-head:after{content:"";flex:1;height:1px;margin-bottom:.2rem;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}.utd-bp-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.85rem}.utd-bp-color{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0a;padding:0;cursor:pointer;text-align:left;font:inherit;transition:border-color .18s ease,transform .18s ease}.utd-bp-color:hover,.utd-bp-color:focus-visible{border-color:#8affc44d;outline:none;transform:translateY(-2px)}.utd-bp-color-fill{position:relative;display:block;height:104px;border-bottom:1px solid rgba(255,255,255,.08)}.utd-bp-color-action{position:absolute;top:.5rem;right:.5rem;display:inline-flex;width:1.7rem;height:1.7rem;align-items:center;justify-content:center;border-radius:8px;background:#060a12a8;color:#f0f6fc;opacity:0;transition:opacity .16s ease}.utd-bp-color-action svg{width:.9rem;height:.9rem}.utd-bp-color:hover .utd-bp-color-action,.utd-bp-color:focus-visible .utd-bp-color-action{opacity:1}.utd-bp-color-meta{display:flex;flex-direction:column;gap:.3rem;padding:.75rem .85rem .9rem}.utd-bp-color-name{display:inline-flex;align-items:center;gap:.45rem;color:#f0f6fc;font-size:.92rem;font-weight:600}.utd-bp-color-meta code{color:#8affc4;font-family:var(--mono);font-size:.8rem;text-transform:uppercase}.utd-bp-color-usage{color:#93a1b2;font-size:.8rem;line-height:1.45}.utd-bp-type-list{display:grid;gap:0}.utd-bp-type{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:1.5rem;align-items:center;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.07)}.utd-bp-type:first-child{border-top:0}.utd-bp-type-spec{display:flex;flex-direction:column;gap:.25rem}.utd-bp-type-role{display:inline-flex;align-items:center;gap:.4rem;color:#8affc4;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.utd-bp-type-spec h3{margin:0;color:#f0f6fc;font-size:.95rem;font-weight:600}.utd-bp-type-spec code,.utd-bp-spacing-meta code{color:#93a1b2;font-family:var(--mono);font-size:.78rem}.utd-bp-type-render{min-width:0;overflow:hidden;color:#eef4fb;white-space:nowrap;text-overflow:ellipsis}.utd-bp-spacing-list{display:grid;gap:0}.utd-bp-spacing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:1.5rem;align-items:center;padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.07)}.utd-bp-spacing:first-child{border-top:0}.utd-bp-spacing-meta{display:flex;flex-direction:column;gap:.25rem}.utd-bp-spacing-meta h3{margin:0;color:#f0f6fc;font-size:.95rem;font-weight:600}.utd-bp-spacing-meta p{margin:.15rem 0 0;color:#93a1b2;font-size:.82rem;line-height:1.45}.utd-bp-spacing-figure{display:flex;align-items:center;min-height:56px}.utd-bp-spacing-bar{position:relative;display:block;height:16px;min-width:4px;border-radius:4px;background:linear-gradient(90deg,#8affc4d9,#8affc459)}.utd-bp-spacing-tick:after{content:attr(data-value);position:absolute;left:calc(100% + .5rem);top:50%;transform:translateY(-50%);color:#93a1b2;font-family:var(--mono);font-size:.74rem;white-space:nowrap}.utd-bp-radius-box{display:block;width:56px;height:56px;border:1.5px solid rgba(138,255,196,.6);background:#8affc414}.utd-bp-spacing-dash{color:#5d6b7e;font-family:var(--mono)}.utd-bp-component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:.85rem}.utd-bp-component{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0a}.utd-bp-component-preview{display:flex;align-items:center;justify-content:center;min-height:96px;padding:1.1rem;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(138,255,196,.045) 0 1px,transparent 1px 100%),linear-gradient(180deg,rgba(138,255,196,.035) 0 1px,transparent 1px 100%),#060a1266;background-size:18px 18px,18px 18px,auto}.utd-bp-component-shape{display:inline-flex;min-width:84px;align-items:center;justify-content:center;padding:.5rem .9rem;color:#dfffea;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em}.utd-bp-component-meta{display:flex;flex-direction:column;gap:.3rem;padding:.85rem .95rem 1rem}.utd-bp-component-meta h3{margin:0;color:#f0f6fc;font-size:.95rem;font-weight:600}.utd-bp-component-meta p{margin:0;color:#93a1b2;font-size:.82rem;line-height:1.5}.utd-bp-evidence-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem}.utd-bp-evidence-row{display:flex;gap:.7rem;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#ffffff09;padding:.85rem 1rem}.utd-bp-evidence-row h3{margin:0;color:#f0f6fc;font-size:.9rem;font-weight:600}.utd-bp-evidence-row p{margin:.25rem 0 0;color:#93a1b2;font-size:.83rem;line-height:1.5}.utd-bp-dot{flex:0 0 auto;width:8px;height:8px;margin-top:.4rem;border-radius:999px}.utd-bp-color-name .utd-bp-dot,.utd-bp-type-role .utd-bp-dot{margin-top:0}.utd-bp-dot-detected{background:#8affc4}.utd-bp-dot-inferred{background:#7dd3fc}.utd-bp-dot-needs_review{background:#fcd34d}.utd-bp-legend{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1rem}.utd-bp-legend span{display:inline-flex;align-items:center;gap:.4rem;color:#7e8b9c;font-family:var(--mono);font-size:.74rem}.utd-bp-legend .utd-bp-dot{margin-top:0}.utd-bp-limitations{margin:0;padding:1.4rem 0 0;border-top:1px solid rgba(255,255,255,.09);color:#93a1b2;font-size:.85rem;line-height:1.6}.utd-bp-limitations span{display:inline-block;margin-right:.6rem;color:#fcd34d;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.utd-bp-raw{margin-top:.75rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0b0f19b3}.utd-bp-raw-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid rgba(255,255,255,.1)}.utd-bp-raw-tabs{display:flex;flex-wrap:wrap;gap:.4rem}.utd-bp-raw-tabs button{display:inline-flex;min-height:2.1rem;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#ffffff0d;padding:0 .85rem;color:#a8b6c7;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;transition:background .18s ease,border-color .18s ease,color .18s ease}.utd-bp-raw-tabs button svg{width:.9rem;height:.9rem}.utd-bp-raw-tabs button:hover,.utd-bp-raw-tabs button.is-active{border-color:#8affc457;background:#8affc421;color:#e9fff2}.utd-bp-raw .utd-button{min-height:2.1rem;padding:0 .85rem;font-size:.8rem}.utd-bp-code{max-height:calc(100vh - 16rem);min-height:420px;overflow:auto;margin:0;padding:1.1rem 1.25rem;color:#d7e2ef;font-family:var(--mono);font-size:.82rem;line-height:1.65;white-space:pre-wrap}.utd-confirm{margin:auto;width:calc(100% - 2rem);max-width:27rem;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#0b0f19;color:#f0f6fc}.utd-confirm::backdrop{background:#03060ca3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.utd-confirm[open]{animation:utd-confirm-in .2s cubic-bezier(.22,1,.36,1)}@keyframes utd-confirm-in{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}.utd-confirm-card{padding:1.5rem}.utd-confirm-card h2{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:0}.utd-confirm-card p{margin:.55rem 0 0;color:#a8b6c7;font-size:.9rem;line-height:1.6}.utd-confirm-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.5rem}.utd-confirm .utd-button{display:inline-flex;min-height:2.5rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:#ffffff0f;padding:0 1.05rem;color:#f0f6fc;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;transition:background .18s ease,border-color .18s ease,color .18s ease}.utd-confirm .utd-button:disabled{cursor:default;opacity:.6}.utd-confirm .utd-button-primary{border-color:transparent;background:#8affc4;color:#071f16}.utd-confirm .utd-button-ghost{background:transparent;color:#c9d4e5}.utd-confirm .utd-button-danger{border-color:#f8717166;background:#f8717124;color:#fca5a5}.utd-confirm .utd-button-danger:hover:not(:disabled),.utd-confirm .utd-button-danger:focus-visible{border-color:#f8717199;background:#f8717138;color:#fecaca}.utd-bp-view,.utd-bp-raw{animation:utd-bp-fade .26s cubic-bezier(.22,1,.36,1)}@keyframes utd-bp-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.utd-examples-page .utd-examples-head h1{font-size:3.5rem;text-wrap:balance;white-space:normal}.utd-examples-page .utd-examples-head p{max-width:58ch}.utd-examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.utd-bp-hero,.ex-hero{grid-template-columns:1fr}.ex-source-shot{min-height:0}.ex-source-frame,.ex-source-empty{aspect-ratio:4 / 3}.ex-modebar{position:static;align-items:stretch;flex-direction:column}.ex-modebar-jump{justify-content:flex-start}.utd-bp-hero-shot{order:-1}.utd-bp-type,.utd-bp-spacing{grid-template-columns:1fr;gap:.6rem}.utd-bp-spacing-figure{min-height:0}}@media(max-width:680px){.utd-examples-main{padding-top:3rem}.utd-blueprint{padding-top:1.25rem}.utd-examples-grid{grid-template-columns:1fr}.utd-examples-search{max-width:none}.utd-examples-result-count{align-items:stretch;flex-direction:column}.utd-examples-result-count a{width:100%;max-width:100%;justify-content:center}.utd-bp-bar{flex-direction:column;align-items:flex-start}.ex-hero h1{max-width:100%;font-size:3.5rem}.ex-actions .utd-button,.ex-mode-toggle,.ex-mode-btn{width:100%}.ex-mode-toggle{justify-content:stretch}.ex-mode-btn{justify-content:center}.ex-evidence,.ex-pairing,.ex-shape{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.utd-examples-page *,.utd-examples-page *:before,.utd-examples-page *:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important}}