:root{--page-bg: #f4f4f1;--surface: #fff;--surface-muted: #f7f7f4;--border: #d8d5c8;--ink: #10233f;--ink-muted: #516074;--accent: #fcc602;--accent-deep: #f3b400;--shadow-soft: 0 18px 48px rgba(16, 35, 63, 0.1);--shadow-card: 0 10px 26px rgba(16, 35, 63, 0.08);--radius-xl: 28px;--radius-lg: 20px;--radius-md: 14px}*{-webkit-box-sizing:border-box;box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f4f4f1;background:var(--page-bg);color:#10233f;color:var(--ink)}body{font-family:"Avenir Next","Segoe UI",sans-serif}a{color:inherit}.app-layout{display:grid;grid-template-columns:minmax(0, 1.45fr) minmax(250px, 0.62fr) minmax(320px, 0.86fr);grid-gap:16px;gap:16px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:16px}.playground-column,.editor-column{min-width:0}.playground-pane,.editor-pane,.editor-fallback{border:1px solid #d8d5c8;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius-md);background:#fff;background:var(--surface);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.playground-pane{min-height:calc(100vh - 32px);padding:12px;overflow:hidden}.editor-pane{height:calc(100vh - 76px);overflow:hidden}.editor-pane-script{margin-bottom:12px}.pane-title{margin:0 0 8px;color:#516074;color:var(--ink-muted);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.editor-fallback{display:none;margin:0;max-height:48vh;padding:14px;overflow:auto;white-space:pre-wrap}.app-layout-showcase{display:block;padding:0}.app-layout-showcase .playground-pane{min-height:100vh;padding:0;border:0;border-radius:0;background:transparent;-webkit-box-shadow:none;box-shadow:none}.showcase-page{max-width:1308px;margin:0 auto;padding:28px 24px 80px;color:#10233f;color:var(--ink)}.showcase-topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:24px;margin-bottom:28px}.showcase-brand{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;color:#10233f;color:var(--ink);text-decoration:none}.showcase-brand strong{font-family:"Iowan Old Style","Palatino Linotype",serif;font-size:30px;font-weight:700;letter-spacing:-0.03em}.showcase-brand span{color:#516074;color:var(--ink-muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}.showcase-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;gap:10px}.showcase-nav a{padding:10px 14px;border-radius:999px;border:1px solid rgba(16, 35, 63,0.08);color:#516074;color:var(--ink-muted);text-decoration:none;-webkit-transition:border-color 160ms ease,color 160ms ease,background 160ms ease,-webkit-transform 160ms ease;transition:border-color 160ms ease,color 160ms ease,background 160ms ease,-webkit-transform 160ms ease;transition:transform 160ms ease,border-color 160ms ease,color 160ms ease,background 160ms ease;transition:transform 160ms ease,border-color 160ms ease,color 160ms ease,background 160ms ease,-webkit-transform 160ms ease}.showcase-nav a:hover{color:#10233f;color:var(--ink);border-color:rgba(16, 35, 63,0.18);background:rgba(255, 255, 255,0.72);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.hero-shell{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(360px, 0.92fr);grid-gap:24px;gap:24px;padding:24px 0 36px}.hero-copy,.hero-aside,.gallery-hero,.gallery-toolbar,.story-section,.featured-panel{background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);border-radius:28px;border-radius:var(--radius-xl);-webkit-box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);-webkit-box-shadow:var(--shadow-soft);box-shadow:var(--shadow-soft)}.hero-copy{padding:34px 36px}.hero-aside{padding:24px;display:grid;grid-gap:18px;gap:18px}.eyebrow{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(252, 198, 2,0.18);color:#7a5a00;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-title,.gallery-title,.section-title{margin:0;font-family:"Iowan Old Style","Palatino Linotype",serif;font-weight:700;letter-spacing:-0.04em}.hero-title{max-width:12ch;font-size:max(48px, min(6vw, 74px));line-height:.96}.gallery-title{font-size:max(38px, min(5vw, 58px));line-height:1}.section-title{font-size:max(30px, min(4vw, 42px));line-height:1.04}.hero-copy p,.gallery-subtitle,.section-text,.metric-card p,.ttf-panel p,.demo-card-description,.demo-card-meta,.gallery-caption,.spec-caption{color:#516074;color:var(--ink-muted);line-height:1.68}.hero-copy p{max-width:64ch;margin:18px 0 0;font-size:18px}.hero-actions,.section-actions{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;margin-top:28px}.showcase-button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:10px;min-width:184px;padding:15px 20px;border-radius:999px;background:#fcc602;background:var(--accent);color:#332700;font-weight:700;text-decoration:none;-webkit-box-shadow:0 14px 28px rgba(252, 198, 2,0.24);box-shadow:0 14px 28px rgba(252, 198, 2,0.24);-webkit-transition:background 180ms ease,-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:background 180ms ease,-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease,-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease}.showcase-button:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);background:#f3b400;background:var(--accent-deep);-webkit-box-shadow:0 18px 32px rgba(252, 198, 2,0.28);box-shadow:0 18px 32px rgba(252, 198, 2,0.28)}.showcase-button-ghost{background:transparent;color:#10233f;color:var(--ink);border:1px solid rgba(16, 35, 63,0.12);-webkit-box-shadow:none;box-shadow:none}.showcase-button-ghost:hover{background:rgba(16, 35, 63,0.04)}.hero-note{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px 18px;margin-top:18px;color:#516074;color:var(--ink-muted);font-size:14px}.hero-note strong{color:#10233f;color:var(--ink)}.spec-card{padding:18px 18px 14px;border-radius:20px;border-radius:var(--radius-lg);background:-webkit-gradient(linear, left top, left bottom, from(#152640), to(#0f1c31));background:linear-gradient(180deg, #152640 0%, #0f1c31 100%);color:#f6f7fb}.spec-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;gap:12px;margin-bottom:10px}.spec-card-header strong{font-size:18px}.spec-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(252, 198, 2,0.18);color:#ffe48b;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.spec-code{margin:0;font-family:SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.74;white-space:pre-wrap}.spec-caption{margin:12px 0 0;color:rgba(255, 255, 255,0.72)}.hero-preview-grid,.gallery-grid,.featured-grid,.metrics-grid,.ttf-grid{display:grid;grid-gap:18px;gap:18px}.hero-preview-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}.mini-demo-card{display:grid;overflow:hidden;border-radius:18px;border:1px solid rgba(16, 35, 63,0.1);background:#f7f7f4;background:var(--surface-muted);text-decoration:none;-webkit-transition:-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease,-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease}.mini-demo-card img,.demo-preview img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.mini-demo-preview{aspect-ratio:1/1;background:#d6d8df}.mini-demo-caption{padding:12px 12px 14px}.mini-demo-caption strong{display:block;font-size:15px}.mini-demo-caption span{color:#516074;color:var(--ink-muted);font-size:12px}.metrics-grid{grid-template-columns:repeat(4, minmax(0, 1fr));margin:16px 0 22px}.metric-card,.ttf-panel{padding:20px 22px;border-radius:20px;border-radius:var(--radius-lg);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.metric-card strong{display:block;margin-bottom:4px;font-size:38px;line-height:1}.metric-card span{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a00}.metric-card p,.ttf-panel p{margin:0}.ttf-grid{grid-template-columns:repeat(4, minmax(0, 1fr));margin:0 0 24px}.ttf-panel h3{margin:0 0 10px;font-size:22px}.story-section{display:grid;grid-template-columns:minmax(320px, 0.82fr) minmax(0, 1fr);grid-gap:28px;gap:28px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:24px;padding:24px}.story-media{overflow:hidden;border-radius:calc(20px + 2px);border-radius:calc(var(--radius-lg) + 2px);border:1px solid rgba(16, 35, 63,0.08);background:-webkit-gradient(linear, left top, left bottom, from(#fafaf4), to(#fff));background:linear-gradient(180deg, #fafaf4 0%, #fff 100%)}.story-media img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.story-media video{display:block;width:100%;height:auto;background:#0f1c31}.story-copy{padding:8px 4px}.story-copy .eyebrow{margin-bottom:16px}.story-section-reverse{grid-template-columns:minmax(0, 1fr) minmax(320px, 0.82fr)}.story-section-reverse .story-media{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.story-section-reverse .story-copy{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.featured-panel,.gallery-hero,.gallery-toolbar{padding:28px 30px}.featured-panel{margin-top:24px}.featured-grid,.gallery-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}.gallery-hero{margin-bottom:18px}.compose-hero code{padding:2px 6px;border-radius:999px;background:rgba(16, 35, 63,0.06);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.compose-panel{margin-top:0}.compose-grid{grid-template-columns:repeat(auto-fit, minmax(320px, 420px))}.gallery-subtitle{max-width:74ch;margin:16px 0 18px;font-size:18px}.gallery-caption{margin:0;font-size:14px}.gallery-toolbar{display:grid;grid-gap:18px;gap:18px;margin-bottom:22px}.gallery-results{display:grid;grid-gap:24px;gap:24px}.gallery-section{padding:28px 30px;border-radius:28px;border-radius:var(--radius-xl);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.gallery-section-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:18px;-ms-flex-wrap:wrap;flex-wrap:wrap}.gallery-section-copy{max-width:82ch}.gallery-section-notes{display:grid;grid-gap:10px;gap:10px;margin-top:12px}.gallery-section-notes p{margin:0;color:#516074;color:var(--ink-muted);line-height:1.68}.gallery-section-count{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:8px 12px;border-radius:999px;background:rgba(16, 35, 63,0.06);color:#10233f;color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap}.gallery-section .gallery-grid{margin-top:20px}.toolbar-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:16px;-ms-flex-wrap:wrap;flex-wrap:wrap}.gallery-count{color:#516074;color:var(--ink-muted);font-size:14px}.gallery-search{width:min(420px,100%);padding:13px 16px;border:1px solid rgba(16, 35, 63,0.12);border-radius:999px;background:#fbfbf8;color:#10233f;color:var(--ink);font:inherit}.gallery-search:focus{outline:2px solid rgba(252, 198, 2,0.3);outline-offset:2px}.filter-block{display:grid;grid-gap:10px;gap:10px}.filter-label{color:#10233f;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.filter-row,.demo-tags,.demo-card-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px}.filter-chip,.demo-tag{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(16, 35, 63,0.1);background:#fbfbf8;color:#516074;color:var(--ink-muted);font-size:13px;font-weight:700;cursor:pointer;-webkit-transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease;transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease}.filter-chip:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);border-color:rgba(16, 35, 63,0.18)}.filter-chip.is-active{background:#fcc602;background:var(--accent);color:#332700;border-color:transparent}.demo-card{display:grid;grid-template-rows:210px auto;overflow:hidden;border-radius:20px;border-radius:var(--radius-lg);border:1px solid rgba(16, 35, 63,0.08);background:#fff;background:var(--surface);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card);-webkit-transition:-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease;transition:transform 180ms ease,box-shadow 180ms ease,-webkit-transform 180ms ease,-webkit-box-shadow 180ms ease}.demo-card-compare{border-color:rgba(34, 47, 66,0.85);background:-webkit-gradient(linear, left top, left bottom, from(rgba(42, 53, 70,0.96)), to(rgba(30, 40, 54,1)));background:linear-gradient(180deg, rgba(42, 53, 70,0.96) 0%, rgba(30, 40, 54,1) 100%);color:#f4f7fb;-webkit-box-shadow:0 18px 40px rgba(16, 35, 63,0.16),inset 0 0 0 1px rgba(104, 132, 171,0.22);box-shadow:0 18px 40px rgba(16, 35, 63,0.16),inset 0 0 0 1px rgba(104, 132, 171,0.22)}.demo-card-compare .demo-preview{background:radial-gradient(circle at top left, rgba(121, 154, 214,0.28) 0%, transparent 42%),linear-gradient(135deg, #314157 0%, #42526a 52%, #2a3647 100%)}.demo-card-compare .demo-preview::after{background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,0)), to(rgba(12, 21, 36,0.14)));background:linear-gradient(180deg, rgba(255, 255, 255,0) 0%, rgba(12, 21, 36,0.14) 100%)}.demo-card-compare .demo-card-body{background:transparent}.demo-card-compare .demo-card-title,.demo-card-compare .demo-card-meta,.demo-card-compare .demo-card-description,.demo-card-compare .demo-link{color:#f4f7fb}.demo-card-compare .demo-card-meta{color:rgba(196, 208, 224,0.78)}.demo-card-compare .demo-card-description{color:rgba(221, 228, 237,0.88)}.demo-card-compare .demo-card-mode{background:rgba(160, 186, 230,0.18);color:#dfe9ff}.demo-card-compare .demo-tag{border-color:rgba(255, 255, 255,0.14);background:rgba(255, 255, 255,0.08);color:rgba(230, 237, 246,0.92)}.demo-card-compare .demo-tag-accent{background:rgba(252, 198, 2,0.18);color:#ffd24d}.demo-card-compare .demo-link{color:#ffd24d}.demo-card-compare .demo-link::after{color:#ffd24d}.mini-demo-card:hover,.demo-card:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px);-webkit-box-shadow:0 18px 32px rgba(16, 35, 63,0.12);box-shadow:0 18px 32px rgba(16, 35, 63,0.12)}.demo-preview{position:relative;overflow:hidden;background:linear-gradient(135deg, #dad9d1 0%, #f4f4ef 100%)}.demo-compare-badge{position:absolute;top:14px;left:14px;z-index:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:7px 10px;border:1px solid rgba(255, 255, 255,0.5);border-radius:999px;background:rgba(16, 35, 63,0.76);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.demo-preview::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:-webkit-gradient(linear, left top, left bottom, from(rgba(16, 35, 63,0.04)), to(rgba(16, 35, 63,0.12)));background:linear-gradient(180deg, rgba(16, 35, 63,0.04) 0%, rgba(16, 35, 63,0.12) 100%);pointer-events:none}.demo-preview-fallback{display:grid;-webkit-box-align:end;-ms-flex-align:end;align-items:end;justify-items:start;place-items:end start;height:100%;padding:18px;color:#fff}.demo-preview-fallback strong{max-width:12ch;font-size:26px;line-height:1}.demo-preview-fallback span{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(255, 255, 255,0.16);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.demo-preview[data-tone=gold] .demo-preview-fallback,.mini-demo-preview[data-tone=gold]{background:linear-gradient(135deg, #ffcf24 0%, #f49e00 100%)}.demo-preview[data-tone=navy] .demo-preview-fallback,.mini-demo-preview[data-tone=navy]{background:linear-gradient(135deg, #163255 0%, #315d8d 100%)}.demo-preview[data-tone=ink] .demo-preview-fallback,.mini-demo-preview[data-tone=ink]{background:linear-gradient(135deg, #172432 0%, #3c495a 100%)}.demo-card-body{display:grid;grid-gap:14px;gap:14px;padding:20px 20px 22px}.demo-card-heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px}.demo-card-mode{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(252, 198, 2,0.16);color:#7a5a00;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.demo-card-title{margin:0;font-size:24px;line-height:1.08;letter-spacing:-0.03em}.demo-card-meta{margin:0;font-size:14px}.demo-card-description{margin:0;font-size:15px}.demo-tag{cursor:default}.demo-tag-accent{background:rgba(252, 198, 2,0.16);color:#7a5a00;border-color:transparent}.demo-link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-top:2px;color:#10233f;color:var(--ink);font-weight:700;text-decoration:none}.demo-link::after{content:"->"}.compare-hero{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(320px, 0.8fr);grid-gap:20px;gap:20px;margin-bottom:24px}.compare-hero-copy,.compare-hero-meta,.compare-panel{background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);border-radius:28px;border-radius:var(--radius-xl);-webkit-box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);-webkit-box-shadow:var(--shadow-soft);box-shadow:var(--shadow-soft)}.compare-hero-copy{padding:30px 32px}.compare-hero-meta{display:grid;grid-gap:14px;gap:14px;padding:22px}.compare-meta-card{display:grid;grid-gap:6px;gap:6px;padding:16px 18px;border:1px solid rgba(16, 35, 63,0.08);border-radius:16px;background:#f7f7f4;background:var(--surface-muted)}.compare-meta-card strong{font-size:14px}.compare-meta-card span,.compare-panel-note,.compare-panel-status{color:#516074;color:var(--ink-muted);line-height:1.6}.compare-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-gap:20px;gap:20px}.compare-panel{display:grid;grid-gap:18px;gap:18px;padding:22px}.compare-panel-head{display:block}.compare-panel-title{margin:0;font-size:26px;line-height:1.1;letter-spacing:-0.03em}.compare-panel-section{display:grid;grid-gap:10px;gap:10px}.compare-panel-section--stage{gap:0}.compare-panel-section--code{gap:0}.compare-section-label{color:#516074;color:var(--ink-muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.compare-panel-stage{display:grid;-webkit-box-align:start;-ms-flex-align:start;align-items:start;justify-items:start;place-items:start;-ms-flex-line-pack:start;align-content:start;min-height:390px;padding:12px;overflow:hidden;border:1px solid rgba(16, 35, 63,0.08);border-radius:18px;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,0.96)), to(rgba(247, 247, 244,0.96))),repeating-linear-gradient(90deg, rgba(16, 35, 63,0.02) 0, rgba(16, 35, 63,0.02) 1px, transparent 1px, transparent 24px);background:linear-gradient(180deg, rgba(255, 255, 255,0.96), rgba(247, 247, 244,0.96)),repeating-linear-gradient(90deg, rgba(16, 35, 63,0.02) 0, rgba(16, 35, 63,0.02) 1px, transparent 1px, transparent 24px)}.compare-panel-stage svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.compare-panel-stage .vega-embed,.compare-panel-stage .vega-embed>div{width:100%}.compare-panel-stage .vega-embed,.compare-panel-stage .vega-embed>div,.compare-panel-stage canvas{max-width:100%;max-height:100%}.compare-panel-status{margin:0;font-size:14px}.compare-panel-status.is-error{display:block;color:#a61d24}.compare-panel-status[hidden]{display:none}.compare-code-editor{height:100%;min-height:0;-webkit-box-shadow:none;box-shadow:none}.compare-code-editor .monaco-editor,.compare-code-editor .overflow-guard{border-radius:0}.compare-code-editor .compare-code-highlight{background:rgba(255, 214, 10,0.28);border-bottom:1px solid rgba(178, 124, 0,0.7)}.compare-code-fallback{height:100%;max-height:none;min-height:0;margin:0;display:none}.showcase-page--compare{max-width:none;padding:0;height:100vh;display:grid;grid-template-rows:auto minmax(0, 1fr);overflow:hidden}.showcase-page--compare .showcase-topbar{margin-bottom:0;padding:16px 20px;border-bottom:1px solid rgba(16, 35, 63,0.1);background:#fff;background:var(--surface)}.showcase-page--compare .showcase-nav a,.showcase-page--compare .eyebrow,.showcase-page--compare .compare-panel-tag,.showcase-page--compare .compare-meta-card,.showcase-page--compare .compare-panel,.showcase-page--compare .compare-panel-stage,.showcase-page--compare .compare-code-editor,.showcase-page--compare .compare-code-fallback{border-radius:0}.showcase-page--compare .compare-hero{display:none}.showcase-page--compare .compare-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:0;min-height:0;height:100%;overflow:hidden}.showcase-page--compare .compare-panel{gap:4px;min-height:0;height:100%;padding:16px;border-top:0;border-right:0;-webkit-box-shadow:none;box-shadow:none;grid-template-rows:auto minmax(0, 0.76fr) minmax(0, 1.24fr);overflow:hidden}.showcase-page--compare .compare-panel:first-child{border-left:0}.showcase-page--compare .compare-panel-head{display:block}.showcase-page--compare .compare-panel-section{min-height:0}.showcase-page--compare .compare-panel-section:first-of-type{display:grid;grid-template-rows:minmax(0, 1fr) auto}.showcase-page--compare .compare-panel-section:last-of-type{display:grid;grid-template-rows:minmax(0, 1fr);grid-gap:0;gap:0}.showcase-page--compare .compare-panel-stage{min-height:0;height:auto;padding:8px;background:#fff;overflow:hidden}.showcase-page--compare .compare-code-editor,.showcase-page--compare .compare-code-fallback{height:auto;min-height:0}#ComposedDoubleGroupDslMount,#ComposedDoubleGroupLibraMount{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden}#ComposedDoubleGroupDslMount>*,#ComposedDoubleGroupLibraMount>*{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;max-width:100%;max-height:100%;margin-right:auto}.empty-state{padding:42px 24px;border-radius:20px;border-radius:var(--radius-lg);border:1px dashed rgba(16, 35, 63,0.16);background:rgba(255, 255, 255,0.72);color:#516074;color:var(--ink-muted);text-align:center}.tutorial-hero,.tutorial-callout,.tutorial-code-panel{background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);border-radius:28px;border-radius:var(--radius-xl);-webkit-box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);box-shadow:0 18px 48px rgba(16, 35, 63, 0.1);-webkit-box-shadow:var(--shadow-soft);box-shadow:var(--shadow-soft)}.tutorial-hero{display:grid;grid-template-columns:minmax(0, 1.05fr) minmax(360px, 0.95fr);grid-gap:24px;gap:24px;margin-bottom:24px;padding:24px}.tutorial-hero-copy{padding:10px 8px 10px 4px}.tutorial-hero-copy p code,.tutorial-copy p code,.tutorial-note p code{padding:2px 6px;border-radius:999px;background:rgba(16, 35, 63,0.06);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.tutorial-code-shell,.tutorial-code-panel{padding:22px}.tutorial-code-shell{border-radius:20px;border-radius:var(--radius-lg);background:-webkit-gradient(linear, left top, left bottom, from(#152640), to(#0f1c31));background:linear-gradient(180deg, #152640 0%, #0f1c31 100%);color:#f6f7fb}.tutorial-code{margin:0;overflow:auto;font-family:SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.8;white-space:pre-wrap}.tutorial-code-compact{color:#10233f;color:var(--ink)}.tutorial-step-grid,.tutorial-grid,.tutorial-note-grid{display:grid;grid-gap:18px;gap:18px}.tutorial-target-layout,.tutorial-target-config{display:grid;grid-gap:18px;gap:18px}.tutorial-target-layout{grid-template-columns:minmax(0, 1.08fr) minmax(320px, 0.92fr);margin-top:18px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tutorial-target-config{grid-template-columns:minmax(280px, 0.84fr) minmax(0, 1fr);margin-top:18px}.tutorial-target-visual,.tutorial-target-code,.tutorial-target-editor{padding:22px;border-radius:20px;border-radius:var(--radius-lg);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.tutorial-target-visual{display:grid;grid-template-rows:minmax(320px, 1fr) auto;grid-gap:18px;gap:18px;height:100%}.tutorial-target-layout>.tutorial-code-panel{height:100%}.tutorial-target-stage{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;min-height:320px;padding:16px;border-radius:18px;border:1px solid rgba(16, 35, 63,0.08);background:linear-gradient(rgba(16, 35, 63,0.03), rgba(16, 35, 63,0.03)),linear-gradient(90deg, rgba(16, 35, 63,0.04) 1px, transparent 1px),linear-gradient(rgba(16, 35, 63,0.04) 1px, transparent 1px);background-size:auto,36px 36px,36px 36px}.tutorial-target-svg{display:block;max-width:100%;max-height:100%;width:100%;height:auto}.tutorial-layer-list{display:grid;grid-gap:10px;gap:10px;margin-top:16px}.tutorial-layer-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:#fbfbf8;border:1px solid rgba(16, 35, 63,0.08)}.tutorial-layer-item strong{font-size:15px}.tutorial-layer-item span{color:#516074;color:var(--ink-muted);font-size:13px}.tutorial-layer-item.is-target{border-color:rgba(16, 35, 63,0.16);background:rgba(16, 35, 63,0.04)}.tutorial-target-code{display:grid;grid-gap:12px;gap:12px;margin-top:18px}.tutorial-target-editor{display:grid;grid-gap:14px;gap:14px}.tutorial-target-visual .tutorial-target-editor{padding:0;border:0;border-radius:0;background:transparent;-webkit-box-shadow:none;box-shadow:none}.tutorial-target-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;-ms-flex-wrap:wrap;flex-wrap:wrap}.tutorial-target-head strong{font-size:20px}.tutorial-target-badge{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(252, 198, 2,0.16);color:#7a5a00;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tutorial-target-label{color:#10233f;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tutorial-target-input{width:100%;padding:13px 14px;border:1px solid rgba(16, 35, 63,0.12);border-radius:14px;background:#fbfbf8;color:#10233f;color:var(--ink);font:inherit}.tutorial-target-input:focus{outline:2px solid rgba(252, 198, 2,0.3);outline-offset:2px}.tutorial-target-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px}.tutorial-target-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:112px;padding:11px 16px;border:1px solid rgba(16, 35, 63,0.18);border-radius:999px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f5f8));background:linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);color:#10233f;color:var(--ink);font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;-webkit-box-shadow:0 4px 12px rgba(16, 35, 63,0.08);box-shadow:0 4px 12px rgba(16, 35, 63,0.08);-webkit-transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease}.tutorial-target-button:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);border-color:rgba(16, 35, 63,0.28);-webkit-box-shadow:0 8px 18px rgba(16, 35, 63,0.12);box-shadow:0 8px 18px rgba(16, 35, 63,0.12)}.tutorial-target-button.focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-target-button.focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-target-button:focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-target-button.is-active{background:-webkit-gradient(linear, left top, left bottom, from(#ffd95a), to(#fcc602));background:linear-gradient(180deg, #ffd95a 0%, #fcc602 100%);background:-webkit-gradient(linear, left top, left bottom, from(#ffd95a), to(var(--accent)));background:linear-gradient(180deg, #ffd95a 0%, var(--accent) 100%);color:#2f2500;border-color:rgba(172, 126, 0,0.28);-webkit-box-shadow:0 0 0 3px rgba(252, 198, 2,0.18),0 10px 20px rgba(252, 198, 2,0.22);box-shadow:0 0 0 3px rgba(252, 198, 2,0.18),0 10px 20px rgba(252, 198, 2,0.22)}.tutorial-target-help,.tutorial-target-status{margin:0;color:#516074;color:var(--ink-muted);line-height:1.7}.tutorial-target-help code{padding:2px 6px;border-radius:999px;background:rgba(16, 35, 63,0.06);color:#10233f;color:var(--ink);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.tutorial-table-shell{overflow:auto;margin-top:18px;border:1px solid rgba(16, 35, 63,0.08);border-radius:20px;border-radius:var(--radius-lg)}.tutorial-table{width:100%;border-collapse:collapse;background:#fff;background:var(--surface)}.tutorial-table th,.tutorial-table td{padding:14px 16px;border-bottom:1px solid rgba(16, 35, 63,0.08);text-align:left;vertical-align:top;line-height:1.6}.tutorial-table thead th{background:rgba(16, 35, 63,0.04);color:#10233f;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.05em}.tutorial-table tbody td{color:#516074;color:var(--ink-muted);font-size:14px}.tutorial-table tbody tr:last-child td{border-bottom:0}.tutorial-table code{padding:3px 7px;border-radius:999px;background:rgba(16, 35, 63,0.06);color:#10233f;color:var(--ink);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.tutorial-step-grid{grid-template-columns:repeat(4, minmax(0, 1fr));margin-bottom:24px}.tutorial-step,.tutorial-card,.tutorial-note{padding:20px 22px;border-radius:20px;border-radius:var(--radius-lg);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.tutorial-step-index,.tutorial-pill{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tutorial-step-index{min-width:40px;padding:8px 10px;background:rgba(252, 198, 2,0.16);color:#7a5a00}.tutorial-step p,.tutorial-card p,.tutorial-detail-list li span,.tutorial-note p{margin:12px 0 0;color:#516074;color:var(--ink-muted);line-height:1.7}.tutorial-grid,.tutorial-note-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.tutorial-example-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-gap:18px;gap:18px;margin-top:18px}.tutorial-example-card{padding:20px 22px;border-radius:20px;border-radius:var(--radius-lg);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.tutorial-example-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;margin-bottom:14px}.tutorial-example-head strong{font-size:16px;line-height:1.2}.tutorial-example-head code{padding:3px 7px;border-radius:999px;background:rgba(16, 35, 63,0.06);color:#10233f;color:var(--ink);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.tutorial-playground-shell{display:grid;grid-template-columns:minmax(0, 1fr);grid-gap:18px;gap:18px;margin-top:18px}.tutorial-playground-stage,.tutorial-playground-status,.tutorial-editor-card{padding:22px;border-radius:20px;border-radius:var(--radius-lg);background:#fff;background:var(--surface);border:1px solid rgba(16, 35, 63,0.08);-webkit-box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);box-shadow:0 10px 26px rgba(16, 35, 63, 0.08);-webkit-box-shadow:var(--shadow-card);box-shadow:var(--shadow-card)}.tutorial-playground-stage{display:grid;grid-gap:16px;gap:16px;-ms-flex-line-pack:start;align-content:start}.tutorial-playground-canvas{min-height:420px}.tutorial-playground-toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:14px;-ms-flex-wrap:wrap;flex-wrap:wrap}.tutorial-playground-actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap}.tutorial-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:148px;padding:12px 18px;border:1px solid rgba(172, 126, 0,0.22);border-radius:999px;background:-webkit-gradient(linear, left top, left bottom, from(#ffd95a), to(#fcc602));background:linear-gradient(180deg, #ffd95a 0%, #fcc602 100%);background:-webkit-gradient(linear, left top, left bottom, from(#ffd95a), to(var(--accent)));background:linear-gradient(180deg, #ffd95a 0%, var(--accent) 100%);color:#2f2500;font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;-webkit-box-shadow:0 8px 20px rgba(252, 198, 2,0.2);box-shadow:0 8px 20px rgba(252, 198, 2,0.2);-webkit-transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease,color 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease}.tutorial-action-button:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 12px 24px rgba(252, 198, 2,0.26);box-shadow:0 12px 24px rgba(252, 198, 2,0.26)}.tutorial-action-button.focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-action-button.focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-action-button:focus-visible{outline:2px solid rgba(252, 198, 2,0.45);outline-offset:2px}.tutorial-action-button-ghost{background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f5f8));background:linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);color:#10233f;color:var(--ink);border-color:rgba(16, 35, 63,0.18);-webkit-box-shadow:0 6px 16px rgba(16, 35, 63,0.1);box-shadow:0 6px 16px rgba(16, 35, 63,0.1)}.tutorial-playground-status{display:grid;grid-gap:10px;gap:10px;padding:16px 18px}.tutorial-playground-toggles{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px}.tutorial-toggle-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-height:42px;padding:10px 14px;border-radius:999px;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f5f8));background:linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);border:1px solid rgba(16, 35, 63,0.18);color:#10233f;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;-webkit-box-shadow:0 4px 12px rgba(16, 35, 63,0.08);box-shadow:0 4px 12px rgba(16, 35, 63,0.08);-webkit-transition:border-color 160ms ease,background 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:border-color 160ms ease,background 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease;transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease,background 160ms ease,-webkit-transform 160ms ease,-webkit-box-shadow 160ms ease}.tutorial-toggle-chip:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px);border-color:rgba(16, 35, 63,0.28);-webkit-box-shadow:0 8px 18px rgba(16, 35, 63,0.12);box-shadow:0 8px 18px rgba(16, 35, 63,0.12)}.tutorial-toggle-chip input{width:16px;height:16px;accent-color:#fcc602}.tutorial-toggle-chip[\:has\(input\:checked\)]{background:-webkit-gradient(linear, left top, left bottom, from(#fff4b8), to(#ffe070));background:linear-gradient(180deg, #fff4b8 0%, #ffe070 100%);border-color:rgba(172, 126, 0,0.28);-webkit-box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18);box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18)}.tutorial-toggle-chip[\:has\(input\:checked\)]{background:-webkit-gradient(linear, left top, left bottom, from(#fff4b8), to(#ffe070));background:linear-gradient(180deg, #fff4b8 0%, #ffe070 100%);border-color:rgba(172, 126, 0,0.28);-webkit-box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18);box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18)}.tutorial-toggle-chip:has(input:checked){background:-webkit-gradient(linear, left top, left bottom, from(#fff4b8), to(#ffe070));background:linear-gradient(180deg, #fff4b8 0%, #ffe070 100%);border-color:rgba(172, 126, 0,0.28);-webkit-box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18);box-shadow:0 0 0 3px rgba(252, 198, 2,0.14),0 10px 20px rgba(252, 198, 2,0.18)}.tutorial-playground-status .tutorial-code{min-height:96px;max-height:220px}.tutorial-playground-editors{display:grid;grid-gap:18px;gap:18px;-ms-flex-line-pack:start;align-content:start}.tutorial-editor-grid,.tutorial-playground-links{display:grid;grid-gap:18px;gap:18px}.tutorial-editor-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.tutorial-editor-card{display:grid;grid-gap:14px;gap:14px}.tutorial-editor-card--link{-ms-flex-line-pack:start;align-content:start}.tutorial-editor-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;-ms-flex-wrap:wrap;flex-wrap:wrap}.tutorial-editor-toggle{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;color:#10233f;color:var(--ink);cursor:pointer}.tutorial-editor-toggle input{width:16px;height:16px;accent-color:#fcc602}.tutorial-editor-toggle strong,.tutorial-editor-head strong{font-size:16px;line-height:1.2}.tutorial-editor-toggle code,.tutorial-editor-head code{padding:3px 7px;border-radius:999px;background:rgba(16, 35, 63,0.06);color:#10233f;color:var(--ink);font-family:SFMono-Regular,Menlo,monospace;font-size:.92em}.tutorial-editor-hint{margin:0;color:#516074;color:var(--ink-muted);line-height:1.7}.tutorial-editor-textarea{width:100%;min-height:220px;padding:16px;border:1px solid rgba(16, 35, 63,0.1);border-radius:16px;background:#fbfbf8;color:#10233f;color:var(--ink);font-family:SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.75;resize:vertical}.tutorial-editor-textarea:focus{outline:2px solid rgba(252, 198, 2,0.3);outline-offset:2px}.tutorial-card-head{display:grid;grid-gap:10px;gap:10px}.tutorial-card-head strong,.tutorial-note strong{font-size:20px;line-height:1.2}.tutorial-pill{justify-self:start;padding:7px 12px;background:rgba(16, 35, 63,0.07);color:#10233f;color:var(--ink)}.tutorial-story{grid-template-columns:minmax(0, 1fr) minmax(320px, 0.88fr)}.tutorial-copy{padding-right:8px}.tutorial-list,.tutorial-detail-list{margin:18px 0 0;padding-left:20px;color:#516074;color:var(--ink-muted)}.tutorial-list li,.tutorial-detail-list li{margin:0;line-height:1.75}.tutorial-detail-list{display:grid;grid-gap:14px;gap:14px}.tutorial-detail-list li strong{display:block;font-size:16px;color:#10233f;color:var(--ink)}.tutorial-callout{margin-top:24px;padding:28px 30px}.tutorial-note-grid{margin-top:18px;grid-template-columns:repeat(3, minmax(0, 1fr))}.showcase-page--user-study .hero-title{max-width:10ch;font-size:max(42px, min(5.4vw, 64px));line-height:1.02}.showcase-page--user-study{max-width:none;height:100vh;padding:8px;display:block;overflow:hidden}.user-study-workbench{height:100%;min-height:0;padding:0}.user-study-workbench-grid{display:grid;grid-template-columns:minmax(230px, 0.58fr) minmax(360px, 0.86fr) minmax(500px, 1.16fr);grid-gap:8px;gap:8px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:100%}.user-study-template-column,.user-study-preview-column,.user-study-side-column{min-width:0;min-height:0}.user-study-template-column{display:grid;grid-template-rows:auto auto minmax(0, 1fr);height:100%}.user-study-template-column-head{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:12px;min-height:0;margin-bottom:8px;padding:2px 4px}.user-study-template-column-head strong{font-size:18px}.user-study-template-column-head span{color:#516074;color:var(--ink-muted);font-size:13px}.user-study-template-tabs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:6px;margin-bottom:8px;padding:0 4px}.user-study-template-tab{padding:8px 12px;border:1px solid rgba(16, 35, 63,0.1);background:#fbfbf8;color:#516074;border-radius:999px;font:inherit;font-size:12px;line-height:1.2;cursor:pointer}.user-study-template-tab.is-active{background:#10233f;color:#fff;border-color:#10233f}.user-study-template-list{min-height:0;overflow:hidden}.user-study-library-card{-ms-flex-line-pack:start;align-content:start;height:100%}.user-study-library-card:not(.is-active){display:none}.user-study-template-stage{display:grid;grid-gap:12px;gap:12px}.user-study-template-mount{min-height:220px}.user-study-template-code{min-height:0;max-height:none;padding:10px 12px;border-radius:16px;background:#fbfbf8;border:1px solid rgba(16, 35, 63,0.08);overflow:visible;white-space:pre-wrap;word-break:break-word}.user-study-preview-column{display:grid;grid-template-rows:minmax(0, 1fr);min-height:0;height:100%}.user-study-side-column{display:grid;grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);grid-gap:8px;gap:8px;min-height:0;height:100%}.user-study-composer-card{display:grid;min-height:0;grid-gap:14px;gap:14px;grid-template-rows:auto minmax(0, 1fr);-ms-flex-line-pack:stretch;align-content:stretch}.user-study-preview-panel,.user-study-editor-panel,.user-study-static-panel{min-height:0;height:100%;border-radius:0}.user-study-preview-panel{display:grid;grid-gap:14px;gap:14px;grid-template-rows:auto minmax(0, 1fr) auto}.user-study-preview-panel .tutorial-target-stage{min-height:0;height:100%}.user-study-editor-panel{grid-template-rows:auto minmax(0, 1fr)}.user-study-static-panel{display:grid;grid-gap:14px;gap:14px;grid-template-rows:auto minmax(0, 1fr)}.user-study-static-code{min-height:0;height:100%;padding:0;border-radius:10px;border:1px solid rgba(16, 35, 63,0.08);overflow:hidden}.user-study-editor{min-height:0;height:100%;border:1px solid rgba(16, 35, 63,0.08);border-radius:10px;overflow:hidden}.user-study-monaco{min-height:0;height:100%;background:#fff}.user-study-monaco .monaco-editor,.user-study-monaco .overflow-guard{border-radius:10px}.user-study-monaco-highlight{background:rgba(255, 214, 10,0.14);border-left:3px solid #f0a400}.user-study-monaco-glyph{width:4px !important}.user-study-monaco-glyph{background:#f0a400;margin-left:3px}.user-study-preview-status{gap:10px}.showcase-page--user-study .tutorial-playground-status{gap:12px}.showcase-page--user-study .tutorial-playground-status .tutorial-code{min-height:66px;max-height:140px;padding:10px 12px;border-radius:14px;background:#fbfbf8;border:1px solid rgba(16, 35, 63,0.08)}.dsl-highlight{background-color:rgba(255, 255, 0,0.2);border-left:3px solid orange}.dsl-highlight-inline{background-color:rgba(255, 255, 0,0.1)}@media(max-width: 1180px){.app-layout{grid-template-columns:minmax(0, 1fr)}.editor-column{display:none}.hero-shell,.tutorial-hero,.tutorial-target-layout,.tutorial-target-config,.story-section,.story-section-reverse{grid-template-columns:minmax(0, 1fr)}.story-section-reverse .story-media,.story-section-reverse .story-copy{-webkit-box-ordinal-group:initial;-ms-flex-order:initial;order:initial}.metrics-grid,.ttf-grid,.featured-grid,.gallery-grid,.tutorial-step-grid,.tutorial-grid,.tutorial-playground-shell,.tutorial-editor-grid,.tutorial-example-grid,.tutorial-note-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.user-study-workbench-grid{grid-template-columns:minmax(0, 1fr)}.user-study-template-list{max-height:none;overflow:visible}.user-study-compose-column{grid-template-columns:minmax(0, 1fr);grid-column:auto}.user-study-preview-column{grid-template-rows:minmax(0, 1fr) minmax(240px, auto)}}@media(max-width: 760px){.showcase-page{padding:22px 16px 56px}.showcase-page--user-study{height:auto;min-height:100vh;padding:8px;overflow:visible}.showcase-topbar,.toolbar-head{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.hero-title{max-width:none;font-size:max(42px, min(14vw, 58px))}.hero-copy,.hero-aside,.gallery-hero,.gallery-toolbar,.featured-panel,.tutorial-callout,.tutorial-code-panel{padding:22px 20px}.hero-preview-grid,.metrics-grid,.ttf-grid,.featured-grid,.gallery-grid,.compare-hero,.compare-grid,.tutorial-step-grid,.tutorial-grid,.tutorial-playground-shell,.tutorial-editor-grid,.tutorial-example-grid,.tutorial-note-grid{grid-template-columns:minmax(0, 1fr)}.tutorial-playground-stage,.tutorial-editor-card{padding:18px}.user-study-editor{min-height:420px;height:auto;resize:vertical}.user-study-template-editor{min-height:220px}.story-section{padding:18px}.tutorial-hero{padding:18px}.demo-card{grid-template-rows:188px auto}.compare-panel-head{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.compare-panel-stage{min-height:340px;padding:10px}.showcase-page--compare{overflow-x:auto;overflow-y:hidden}.showcase-page--compare .compare-grid{grid-template-columns:repeat(4, minmax(320px, 1fr));min-width:1280px;height:100%}.showcase-page--compare .compare-panel{min-height:0}.showcase-page--compare .compare-code-editor,.showcase-page--compare .compare-code-fallback{height:auto}}

/*# sourceMappingURL=app.d3e414ac.css.map*/