@import"https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap";:root{--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--text-main: #17222f;--text-muted: #5f7286;--text-subtle: #7e8fa2;--surface-1: rgba(255, 255, 255, .86);--surface-2: rgba(255, 255, 255, .68);--surface-3: rgba(243, 247, 251, .9);--line-soft: rgba(105, 133, 160, .24);--line-strong: rgba(85, 119, 149, .42);--accent: #8be6a9;--accent-strong: #67d28a;--accent-ink: #f4f9ff;--success: #149e73;--warning: #b16a00;--danger: #b84242;--bg-top: #f7f9fc;--bg-mid: #e9f0f7;--bg-bottom: #dce8f3;--panel-shadow: 0 18px 44px rgba(34, 62, 88, .16);--field-bg: rgba(255, 255, 255, .92);--focus-ring: rgba(47, 128, 237, .55);--overlay: rgba(15, 24, 34, .55);--code-bg: #edf3f9;--code-text: #184d3b}:root[data-theme=dark]{color-scheme:dark;--text-main: #dde3ea;--text-muted: #8a96a4;--text-subtle: #68757f;--surface-1: rgba(30, 33, 37, .96);--surface-2: rgba(24, 27, 31, .9);--surface-3: rgba(36, 40, 45, .96);--line-soft: rgba(148, 158, 168, .16);--line-strong: rgba(148, 158, 168, .3);--accent: #74c994;--accent-strong: #52b57c;--accent-ink: #091a10;--success: #3fcca0;--warning: #f0b35f;--danger: #f08a8a;--bg-top: #16181b;--bg-mid: #1a1d21;--bg-bottom: #121417;--panel-shadow: 0 8px 28px rgba(0, 0, 0, .38);--field-bg: rgba(18, 21, 25, .96);--focus-ring: rgba(120, 185, 255, .5);--overlay: rgba(0, 0, 0, .64);--code-bg: #0f1419;--code-text: #74c994}:root[data-theme=light]{color-scheme:light}*{box-sizing:border-box}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Archivo,Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--text-main);background:linear-gradient(170deg,var(--bg-top) 0%,var(--bg-mid) 55%,var(--bg-bottom) 100%);min-height:100vh;transition:background .2s ease,color .2s ease}button,input,select{font:inherit}input::placeholder{color:var(--text-subtle)}input:focus,select:focus,button:focus{outline:2px solid var(--focus-ring);outline-offset:2px}.app-root{min-height:100vh;position:relative;overflow-x:hidden}.app-root:before{display:none}.app-grid>*{content-visibility:auto;contain-intrinsic-size:700px}.app-main{max-width:1440px;margin:0 auto;padding:24px;position:relative;z-index:1}.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding:6px 0}.app-header h1,.app-main h2{font-family:Archivo,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600}.app-grid{display:grid;gap:16px;grid-template-columns:minmax(300px,360px) 1fr}@media(max-width:920px){.app-main{padding:16px}.app-header{flex-direction:column;align-items:flex-start}.app-grid{grid-template-columns:1fr}}.theme-toggle{border:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface-2) 92%,transparent);color:var(--text-main);border-radius:10px;width:38px;height:38px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter .14s ease}.app-root button{transition:filter .14s ease}.app-root button.btn-primary:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-ink)}.app-root button:hover:not(:disabled){filter:brightness(.94)}.app-root button.logo-button{background:transparent;border-color:transparent;box-shadow:none;color:inherit}.app-root button.logo-button:hover{filter:none}@keyframes demo-draw-in{to{stroke-dashoffset:0}}.demo-draw{stroke-dasharray:9999;stroke-dashoffset:9999;animation:demo-draw-in .55s ease forwards;animation-delay:calc(var(--demo-i, 0) * 65ms)}.demo-draw-px{stroke-dasharray:9999;stroke-dashoffset:9999;animation:demo-draw-in .4s ease forwards;animation-delay:calc(var(--demo-i, 0) * 60ms)}.demo-draw-flow{stroke-dasharray:9999;stroke-dashoffset:9999;animation:demo-draw-in 1.5s ease-in-out forwards;animation-delay:calc(var(--demo-i, 0) * .24s)}@keyframes progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes progress-pulse{0%,to{opacity:.7}50%{opacity:1}}@keyframes flicker{0%,to{opacity:1}50%{opacity:.4}}.progress-bar-fill{position:relative;overflow:hidden;animation:progress-pulse 2s ease-in-out infinite}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);animation:progress-shimmer 1.6s ease-in-out infinite}.flicker{animation:flicker 1.4s ease-in-out infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.viewer-shell{display:flex;flex-direction:column;gap:12px}.viewer-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.viewer-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-subtle)}.viewer-sub{margin-top:4px;font-size:14px;color:var(--text-muted)}.viewer-controls{display:flex;gap:8px;flex-wrap:wrap}.viewer-controls button{border:1px solid var(--line-strong);background:var(--surface-3);color:var(--text-main);border-radius:10px;padding:8px 11px;cursor:pointer}.viewer-canvas{position:relative;min-height:520px;overflow:hidden;border-radius:18px;border:1px solid var(--line-soft);background:radial-gradient(circle at center,color-mix(in srgb,var(--success) 16%,transparent) 0,color-mix(in srgb,var(--success) 8%,transparent) 25%,transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--surface-3) 94%,transparent),color-mix(in srgb,var(--surface-2) 100%,transparent));cursor:grab}.viewer-canvas:active{cursor:grabbing}.viewer-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--line-soft) 60%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line-soft) 60%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--line-strong) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line-strong) 55%,transparent) 1px,transparent 1px);background-size:32px 32px,32px 32px,160px 160px,160px 160px;pointer-events:none}.viewer-axis{position:absolute;pointer-events:none}.viewer-axis-x{left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent),transparent)}.viewer-axis-y{top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent),transparent)}.viewer-stage{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}.viewer-svg{width:100%;height:100%;pointer-events:none;color:var(--success)}.viewer-svg svg{width:100%;height:100%;overflow:visible}.viewer-svg path{stroke-linecap:round;stroke-linejoin:round}.viewer-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);font-size:15px}.flicker{animation:none}@keyframes flickerPulse{0%,to{opacity:1;letter-spacing:.08em}50%{opacity:.45;letter-spacing:.14em}}