@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Syne;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/syne-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Syne;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/syne-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--font-sans: "Syne", "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;--accent: #38bdf8;--accent-hot: #22d3ee;--accent-deep: #0284c7;--ink: #e8f4ff;--ink-soft: #9fb6d1;--muted: #6f89a8;--line: rgba(125, 211, 252, .14);--glass: rgba(8, 18, 32, .55);--header: rgba(6, 14, 24, .48);--editor-bg: #070e18;--editor-bar: #0b1422;--editor-text: #dceaf8;--editor-caret: #67e8f9;--editor-placeholder: #4d6480;--preview-bar: rgba(244, 249, 255, .92);--preview-ink: #1e3a5f;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--header-h: 4rem;--panel-bar-h: 2.85rem;--ease: cubic-bezier(.22, 1, .36, 1)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html.app-root,body.app-page{height:100%;overflow:hidden}body{margin:0;font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--ink);background:#040a12;display:flex;flex-direction:column;position:relative}body.app-page{height:100dvh;max-height:100dvh}img,svg{display:block;max-width:100%}button,textarea{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:var(--space-4);top:-100%;z-index:100;padding:var(--space-2) var(--space-4);background:var(--accent-deep);color:#fff;font-weight:700;text-decoration:none;border-radius:var(--radius-sm)}.skip-link:focus{top:var(--space-3)}.ambiance{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#040a12}.ambiance-wash{position:absolute;inset:0;background:radial-gradient(90% 70% at 12% -10%,rgba(14,116,144,.45),transparent 55%),radial-gradient(80% 60% at 88% 110%,rgba(37,99,235,.35),transparent 50%),linear-gradient(165deg,#07111d,#050d18 48%,#081628)}.ambiance-glow{position:absolute;border-radius:50%;filter:blur(70px);animation:glow-drift 20s var(--ease) infinite alternate}.ambiance-glow-a{width:min(62vw,46rem);height:min(62vw,46rem);left:-16%;top:-22%;background:radial-gradient(circle,rgba(34,211,238,.38),transparent 68%)}.ambiance-glow-b{width:min(54vw,40rem);height:min(54vw,40rem);right:-14%;bottom:-20%;background:radial-gradient(circle,rgba(2,132,199,.42),transparent 70%);animation-delay:-7s;animation-duration:24s}.ambiance-glow-c{width:min(34vw,22rem);height:min(34vw,22rem);left:48%;top:42%;background:radial-gradient(circle,rgba(125,211,252,.16),transparent 70%);animation-delay:-12s;animation-duration:28s}.ambiance-beam{position:absolute;inset:-20% -10%;background:linear-gradient(118deg,transparent 36%,rgba(103,232,249,.06) 48%,transparent 58%);transform:rotate(-8deg);animation:beam-sweep 14s var(--ease) infinite alternate}.ambiance-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(125,211,252,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 65% at 50% 42%,#000 15%,transparent 72%);opacity:.55}.ambiance-noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;mix-blend-mode:soft-light}.ambiance-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 40%,rgba(2,6,14,.72) 100%)}.site-header,.workspace{position:relative;z-index:1}.site-header{height:var(--header-h);flex:0 0 auto;padding:0 clamp(1rem,2.5vw,1.75rem);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:linear-gradient(180deg,#0812209e,#060e1861);backdrop-filter:blur(20px) saturate(1.25);border-bottom:1px solid rgba(125,211,252,.1);box-shadow:0 1px #ffffff08 inset}.brand{display:flex;align-items:center;gap:.9rem;min-width:0}.brand-mark{flex-shrink:0;filter:drop-shadow(0 6px 18px rgba(34,211,238,.28));animation:brand-in .8s var(--ease) both,mark-breathe 4.8s var(--ease) 1s infinite}.brand-text{display:flex;flex-direction:column;gap:.12rem;min-width:0}.brand-name{margin:0;font-size:clamp(1.38rem,2.5vw,1.62rem);font-weight:800;letter-spacing:-.05em;line-height:1;color:#f5fbff;-webkit-text-fill-color:#f5fbff;animation:brand-in .75s var(--ease) .05s both}@supports ((-webkit-background-clip: text) or (background-clip: text)){.brand-name{background:linear-gradient(118deg,#fff 8%,#e0f2fe 42%,#7dd3fc 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}.brand-tagline{margin:0;font-size:.7rem;font-weight:700;color:#6f8fad;letter-spacing:.1em;text-transform:uppercase;animation:brand-in .75s var(--ease) .12s both}.header-meta{display:flex;align-items:center;gap:.55rem}.header-sep{width:1px;height:1rem;background:#94c5e838;flex-shrink:0}.github-link{position:relative;z-index:0;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:2.25rem;padding:0 .95rem 0 .75rem;border-radius:999px;color:#04111c;background:linear-gradient(135deg,#e0f2fe,#7dd3fc 48%,#38bdf8);box-shadow:0 1px #ffffff73 inset,0 0 0 1px #bae6fd73,0 8px 22px -10px #0ea5e9e6;text-decoration:none;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}.github-link:before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:#38bdf866;filter:blur(10px);opacity:.7;pointer-events:none}.github-link svg{flex-shrink:0;width:16px;height:16px}.github-link:hover{color:#020617;background:linear-gradient(135deg,#f8fafc,#bae6fd 42%,#38bdf8);box-shadow:0 1px #ffffff8c inset,0 0 0 1px #e0f2fe8c,0 10px 26px -8px #22d3eef2;transform:translateY(-1px)}.github-link:hover:before{opacity:.9;filter:blur(12px)}.github-link:focus-visible{outline:2px solid #a5f3fc;outline-offset:2px}.brand-link{text-decoration:none;color:inherit}.legal-nav{display:inline-flex;align-items:center;gap:.15rem}.legal-nav a{padding:.35rem .55rem;border-radius:999px;color:#7ea0c2;text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:color .18s var(--ease),background .18s var(--ease)}.legal-nav a:hover{color:#e8f4ff;background:#94c5e814}.legal-nav a[aria-current=page]{color:#ecfeff;background:#22d3ee24;box-shadow:inset 0 0 0 1px #67e8f947}body.legal-page{min-height:100dvh;height:auto;max-height:none;overflow-x:hidden;overflow-y:auto}.legal-shell{position:relative;z-index:1;width:min(52rem,calc(100% - 2rem));margin:1.25rem auto 2rem}.legal-card{padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--radius-lg);border:1px solid rgba(125,211,252,.18);background:linear-gradient(165deg,#0c1828d1,#060e18e6);box-shadow:0 1px #ffffff0f inset,0 30px 80px -40px #000000d9,0 0 80px -48px #22d3ee4d;backdrop-filter:blur(16px);animation:workspace-in .7s var(--ease) both}.legal-kicker{margin:0 0 .75rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hot)}.legal-title{margin:0 0 .85rem;font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;color:#f5fbff}.legal-lead{margin:0 0 1rem;max-width:40rem;font-size:1.05rem;line-height:1.65;color:var(--ink-soft)}.legal-updated{margin:0 0 2rem;font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}.legal-grid{display:grid;gap:1.5rem}.legal-grid section{padding-top:1.25rem;border-top:1px solid rgba(125,211,252,.12)}.legal-grid h2{margin:0 0 .55rem;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#e8f4ff}.legal-grid h2:before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.55rem;border-radius:2px;background:linear-gradient(135deg,#67e8f9,#2563eb);vertical-align:.1em}.legal-grid p,.legal-grid li{margin:0;color:#9fb6d1;font-size:.96rem;line-height:1.7}.legal-grid p+p{margin-top:.75rem}.legal-grid ul{margin:.35rem 0 0;padding-left:1.15rem}.legal-grid li+li{margin-top:.4rem}.legal-grid a{color:#7dd3fc;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.35)}.legal-grid a:hover{color:#ecfeff;border-bottom-color:#ecfeff8c}.legal-footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;padding:0 1rem 2rem;color:var(--muted);font-size:.85rem;font-weight:700}.legal-footer a{color:#b6d4ef;text-decoration:none}.legal-footer a:hover{color:#fff}.legal-footer-sep{opacity:.5}.legal-card-404{text-align:left}.legal-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.5rem 0 0}.legal-actions .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border-bottom:0}.legal-actions .btn-ghost{color:#b6d4ef}.legal-grid a.btn-accent,.legal-actions a.btn-accent,.legal-grid a.btn-accent:visited,.legal-actions a.btn-accent:visited{color:#031018;border-bottom:0}.legal-grid a.btn-accent:hover,.legal-actions a.btn-accent:hover{color:#02080f;border-bottom:0}.article-cta{margin:0 0 1.75rem;padding:1rem 1.15rem;border-radius:var(--radius-md, 12px);border:1px solid rgba(125,211,252,.22);background:linear-gradient(135deg,#0e3a5c73,#0610188c)}.article-cta p{margin:0 0 .85rem;color:#b6d4ef;font-size:.95rem;line-height:1.6}.article-cta a:not(.btn){color:#7dd3fc;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.35)}.article-cta a:not(.btn):hover{color:#ecfeff}.article-cta-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#041018}.article-byline{display:flex;gap:.9rem;align-items:flex-start;margin:0 0 1.5rem;padding:.9rem 0 0}.article-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}.article-breadcrumbs a{color:#7dd3fc;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.3)}.article-breadcrumbs a:hover{color:#ecfeff}.article-breadcrumbs-sep{opacity:.45}.article-breadcrumbs [aria-current=page]{color:#9fb6d1}.article-byline-avatar{flex:0 0 auto;width:2.75rem;height:2.75rem;object-fit:cover;object-position:center top;border-radius:999px;border:1px solid rgba(165,243,252,.4);box-shadow:0 0 0 2px #0ea5e926;background:#0b1b33}.article-byline-text{min-width:0}.article-byline-name{margin:0 0 .25rem;font-size:.92rem;font-weight:700;color:#e8f4ff}.article-byline-name a{color:#7dd3fc;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.35)}.article-byline-name a:hover{color:#ecfeff}.article-byline-role{margin:0;font-size:.88rem;line-height:1.55;color:#8eabca}.article-byline-role a{color:#7dd3fc;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.3)}.article-figure{margin:0 0 1.75rem}.article-figure img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(125,211,252,.18);background:#071526}.article-figure figcaption{margin-top:.55rem;font-family:var(--font-mono);font-size:.72rem;line-height:1.45;color:var(--muted)}.article-steps{margin:.5rem 0 0;padding-left:1.25rem;color:#9fb6d1;font-size:.96rem;line-height:1.7}.article-steps li+li{margin-top:.45rem}.article-steps code,.legal-grid code{font-family:var(--font-mono);font-size:.86em;color:#c8e7ff;background:#081424a6;padding:.08em .35em;border-radius:4px;border:1px solid rgba(125,211,252,.12)}.article-code{margin:.9rem 0 0;padding:.95rem 1rem;overflow-x:auto;border-radius:10px;border:1px solid rgba(125,211,252,.14);background:#040c16d9;font-family:var(--font-mono);font-size:.78rem;line-height:1.55;color:#c5ddf3}.article-code code{font-family:inherit;font-size:inherit;color:inherit;background:none;padding:0;border:0}.article-h3{margin:1rem 0 .4rem;font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:#d7ebff}.article-table-wrap{margin:.85rem 0 0;overflow-x:auto;border-radius:10px;border:1px solid rgba(125,211,252,.14);background:#040c168c}.article-table{width:100%;border-collapse:collapse;font-size:.88rem;line-height:1.5}.article-table th,.article-table td{padding:.7rem .85rem;text-align:left;vertical-align:top;color:#9fb6d1;border-bottom:1px solid rgba(125,211,252,.1)}.article-table thead th{color:#d7ebff;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#0e3a5c59;border-bottom-color:#7dd3fc2e}.article-table tbody th{color:#c8e7ff;font-weight:700;white-space:nowrap}.article-table tbody tr:last-child th,.article-table tbody tr:last-child td{border-bottom:0}.article-table code{font-family:var(--font-mono);font-size:.86em;color:#c8e7ff;background:#081424a6;padding:.08em .35em;border-radius:4px;border:1px solid rgba(125,211,252,.12)}.workspace{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(14rem,var(--editor-split, 52%)) 6px minmax(14rem,1fr);margin:clamp(.75rem,1.6vw,1.15rem);border:1px solid rgba(125,211,252,.16);border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,#0c18288c,#060c16b8);box-shadow:0 1px #ffffff12 inset,0 0 0 1px #08142473,0 28px 70px -34px #000000e0,0 0 90px -42px #22d3ee47;animation:workspace-in .75s var(--ease) both}.panel{display:flex;flex-direction:column;min-width:0;min-height:0}.panel-editor{background:var(--editor-bg);position:relative;z-index:2}.panel-editor:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(34,211,238,.03),transparent 28%)}.splitter{position:relative;z-index:5;width:100%;margin:0;padding:0;border:0;background:#040a12f2;cursor:col-resize;touch-action:none}.splitter:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:#7dd3fc47;transition:background .15s var(--ease),box-shadow .15s var(--ease),width .15s var(--ease)}.splitter:after{content:"";position:absolute;top:50%;left:50%;width:3px;height:2.6rem;transform:translate(-50%,-50%);border-radius:999px;background:#7dd3fc80;box-shadow:0 0 0 1px #08142459;transition:height .15s var(--ease),background .15s var(--ease)}.splitter:hover:before,.splitter:focus-visible:before,body.is-resizing .splitter:before{width:2px;background:#22d3eebf;box-shadow:0 0 14px #22d3ee66}.splitter:hover:after,.splitter:focus-visible:after,body.is-resizing .splitter:after{height:3.1rem;background:#67e8f9d9}.splitter:focus-visible{outline:none}body.is-resizing{cursor:col-resize;user-select:none}body.is-resizing iframe,body.is-resizing .preview-stage{pointer-events:none}.panel-preview{background:#e8eef6;position:relative;z-index:1}.panel-bar{height:var(--panel-bar-h);padding:0 var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--editor-bar);border-bottom:1px solid rgba(4,10,18,.95);flex-shrink:0;position:relative;z-index:6;overflow:visible}.panel-bar-light{background:linear-gradient(180deg,#fcfefff7,#f1f6fcf0);border-bottom:1px solid rgba(148,163,184,.22);backdrop-filter:blur(12px)}.panel-bar-tabs{gap:.75rem;height:auto;min-height:var(--panel-bar-h);padding:.45rem .75rem}.panel-bar-tabs .preview-status{margin-left:auto;flex-shrink:0}.export-tabs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.15rem;min-width:0;flex:0 1 auto;max-width:100%;padding:.2rem;border-radius:999px;background:#0f172a0d;box-shadow:inset 0 0 0 1px #64748b24}.export-tab{appearance:none;border:0;border-radius:999px;padding:.38rem .72rem;background:transparent;color:#64748b;font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}.export-tab:hover{color:#0f172a;background:#0f172a0d}.export-tab.is-active{color:#0c4a6e;background:#fff;box-shadow:0 1px 2px #0f172a14,0 0 0 1px #0e74901a}.export-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.export-views{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.export-view{flex:1;min-height:0;display:none;flex-direction:column}.export-view.is-active{display:flex;animation:view-in .28s var(--ease) both}.export-view[hidden]{display:none!important}.code-output-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .9rem;border-bottom:1px solid rgba(148,163,184,.22);background:#f8fafceb;flex-shrink:0}.code-output-label{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.btn-copy{border-radius:999px;padding:.35rem .75rem;background:#0e74901a;color:#0e7490;box-shadow:inset 0 0 0 1px #0e749033;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0}.btn-copy:hover{background:#0e74902e;color:#155e75}.btn-copy.is-copied{background:#0f766e24;color:#0f766e}.code-output{flex:1;min-height:0;margin:0;padding:1rem 1.1rem;overflow:auto;background:#0b1220;color:#dbeafe;font-family:var(--font-mono);font-size:.8rem;line-height:1.65;white-space:pre;tab-size:2}.code-output-wrap{white-space:pre-wrap;word-break:break-all}.data-uri-bar{align-items:center;gap:.85rem}.data-uri-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;min-width:0;flex:1}.format-switch{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem;border-radius:999px;background:#0f172a0f;box-shadow:inset 0 0 0 1px #94a3b833}.format-chip{appearance:none;border:0;border-radius:999px;padding:.38rem .7rem;background:transparent;color:#64748b;font-family:var(--font-sans);font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}.format-chip:hover{color:#0f172a}.format-chip.is-active{color:#0e7490;background:#fff;box-shadow:0 1px 2px #0f172a14,inset 0 0 0 1px #06b6d447}.format-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.size-badge{display:inline-flex;align-items:center;padding:.28rem .55rem;border-radius:999px;background:#0e74901a;color:#0e7490;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}.png-stage{position:relative;flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:var(--space-6);background-color:#d7e3f0;background-image:linear-gradient(45deg,#c5d5e8 25%,transparent 25%),linear-gradient(-45deg,#c5d5e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c5d5e8 75%),linear-gradient(-45deg,transparent 75%,#c5d5e8 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.png-canvas{max-width:min(100%,28rem);max-height:min(70%,28rem);width:auto;height:auto;image-rendering:auto;filter:drop-shadow(0 16px 36px rgba(15,23,42,.18))}.panel-bar-left{display:flex;align-items:center;gap:.75rem;min-width:0}.window-dots{display:none}.panel-title{margin:0;display:inline-flex;align-items:center;gap:.55rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6f8fad}.panel-title:before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee29;flex-shrink:0}.panel-bar-light .panel-title{color:#476381}.panel-bar-light .panel-title:before{display:none}.panel-actions{display:flex;align-items:center;gap:.35rem;position:relative}.panel-actions .btn-quiet{margin-left:.15rem}.btn{appearance:none;border:0;border-radius:999px;padding:.38rem .8rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}.btn-ghost{background:#7dd3fc0d;color:#8eb4d4;box-shadow:inset 0 0 0 1px #7dd3fc1f}.btn-ghost:hover{background:#22d3ee1f;color:#ecfeff;box-shadow:inset 0 0 0 1px #67e8f952;transform:translateY(-1px)}.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-accent{position:relative;z-index:0;isolation:isolate;background:linear-gradient(135deg,#67e8f9,#22d3ee 40%,#0ea5e9);color:#031018;font-size:.78rem;font-weight:800;letter-spacing:.05em;padding:.48rem 1.1rem;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;box-shadow:0 1px #fff6 inset,0 0 0 1px #a5f3fc59,0 10px 28px -8px #22d3eef2}.btn-accent:before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:#22d3ee73;filter:blur(12px);opacity:.75;pointer-events:none}.btn-accent:hover{background:linear-gradient(135deg,#a5f3fc,#22d3ee 45%,#38bdf8);color:#02080f;box-shadow:0 1px #ffffff80 inset,0 0 0 1px #bae6fd8c,0 12px 32px -6px #22d3ee;transform:translateY(-1px)}.btn-accent:hover:before{opacity:.95;filter:blur(14px)}.btn-accent:focus-visible{outline:2px solid #a5f3fc;outline-offset:2px}.btn-quiet{color:#6f89a8;background:transparent;box-shadow:inset 0 0 0 1px #7dd3fc0f}.btn-quiet:hover{color:#fecaca;background:#fb71851a;box-shadow:inset 0 0 0 1px #fb718547}.btn-ghost.is-copied,.share-menu-item.is-copied{background:#34d39929;color:#d1fae5;box-shadow:inset 0 0 0 1px #34d39959;transform:none}.share-menu{position:relative;margin-left:.35rem;margin-right:.15rem}.share-menu-toggle{list-style:none;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;user-select:none;min-height:2.15rem;padding-inline:1.1rem}.share-icon{flex-shrink:0;width:15px;height:15px;opacity:1;shape-rendering:geometricPrecision}.share-menu-toggle::-webkit-details-marker{display:none}.share-menu-toggle:after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;opacity:.8;transition:transform .18s var(--ease)}.share-menu[open] .share-menu-toggle:after{transform:rotate(180deg)}.share-menu[open] .share-menu-toggle{background:linear-gradient(135deg,#ecfeff,#67e8f9 45%,#22d3ee);color:#031018;box-shadow:0 1px #ffffff8c inset,0 0 0 1px #bae6fd99,0 12px 32px -6px #22d3ee}.share-menu[open] .share-menu-toggle:before{opacity:1;filter:blur(16px)}.share-menu-panel{position:absolute;top:calc(100% + .45rem);right:0;z-index:12;min-width:12.5rem;padding:.4rem;border-radius:14px;background:#060e1af7;box-shadow:inset 0 0 0 1px #7dd3fc33,0 1px #ffffff0a inset,0 18px 44px -16px #000000e6;animation:menu-in .2s var(--ease) both}.share-menu-item{appearance:none;width:100%;border:0;border-radius:10px;padding:.55rem .7rem;background:transparent;color:#d7ebfb;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;transition:background .15s var(--ease),color .15s var(--ease)}.share-menu-item-label{display:block}.share-menu-item-meta{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6f8fad}.share-menu-item:hover{background:#38bdf824;color:#fff}.share-menu-item:hover .share-menu-item-meta{color:#9ec9e8}.share-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.share-menu-item.is-copied .share-menu-item-meta{color:#a7f3d0}.code-editor{position:relative;z-index:1;flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr;background:transparent}.line-numbers{margin:0;padding:var(--space-5) .65rem var(--space-5) .9rem;border-right:1px solid rgba(125,211,252,.06);background:linear-gradient(180deg,#040a1273,#040a1233);color:#40576f;font-family:var(--font-mono);font-size:.86rem;line-height:1.7;text-align:right;user-select:none;overflow:hidden;white-space:pre;min-width:2.6rem}.editor-pane{position:relative;min-width:0;min-height:0;overflow:hidden}.editor-highlight{position:absolute;inset:0;z-index:0;margin:0;padding:var(--space-5) var(--space-5) var(--space-5) .9rem;overflow:auto;pointer-events:none;font-family:var(--font-mono);font-size:.86rem;line-height:1.7;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--editor-text);scrollbar-width:none}.editor-highlight::-webkit-scrollbar{width:0;height:0}.editor-highlight .tok-punct{color:#7dd3fc}.editor-highlight .tok-tag{color:#fb7185}.editor-highlight .tok-attr{color:#fdba74}.editor-highlight .tok-string{color:#5eead4}.editor-highlight .tok-comment{color:#64748b;font-style:italic}.editor-highlight .tok-text{color:#94a3b8}.editor{position:relative;z-index:1;width:100%;height:100%;margin:0;padding:var(--space-5) var(--space-5) var(--space-5) .9rem;border:0;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--editor-caret);font-family:var(--font-mono);font-size:.86rem;line-height:1.7;tab-size:2;outline:none;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:rgba(125,211,252,.28) transparent}.editor::-webkit-scrollbar{width:8px;height:8px}.editor::-webkit-scrollbar-thumb{border-radius:999px;background:#7dd3fc38}.editor::-webkit-scrollbar-thumb:hover{background:#67e8f966}.editor::placeholder{color:var(--editor-placeholder);-webkit-text-fill-color:var(--editor-placeholder)}.editor::selection{background:#22d3ee47;color:transparent}.code-editor:focus-within{box-shadow:inset 3px 0 0 var(--accent-hot);background:linear-gradient(90deg,rgba(34,211,238,.035),transparent 18%)}.preview-status{margin:0;display:inline-flex;align-items:center;gap:.42rem;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;transition:color .25s var(--ease),opacity .25s var(--ease)}.preview-status:before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:currentColor;opacity:.65;flex-shrink:0;transition:background .25s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease)}.preview-status[data-state=ok]{color:#0f766e}.preview-status[data-state=ok]:before{background:#14b8a6;opacity:1;box-shadow:0 0 0 3px #14b8a62e}.preview-status[data-state=empty]{color:#64748b;opacity:.85}.preview-status[data-state=empty]:before{opacity:.4}.preview-status[data-state=error]{color:#be123c}.preview-status[data-state=error]:before{background:#f43f5e;opacity:1;box-shadow:0 0 0 3px #f43f5e2e}.preview-stage{position:relative;flex:1;min-height:0;overflow:auto;isolation:isolate;background-color:#dbe5f0;background-image:linear-gradient(45deg,#c8d6e6 25%,transparent 25%),linear-gradient(-45deg,#c8d6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8d6e6 75%),linear-gradient(-45deg,transparent 75%,#c8d6e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.preview-stage[data-bg=black]{background-color:#0a0a0a;background-image:none}.preview-stage[data-bg=white]{background-color:#fff;background-image:none}.preview-stage[data-bg=black] .preview-empty{color:#94a3b8}.preview-stage[data-bg=white] .preview-empty{color:#64748b}.preview-canvas{min-height:100%;display:grid;place-items:center;padding:var(--space-6);padding-bottom:4.5rem;cursor:grab;touch-action:none}.preview-stage.is-panning,.preview-canvas.is-panning{cursor:grabbing;user-select:none}.preview-canvas>svg{max-width:min(100%,28rem);max-height:min(100%,28rem);width:auto;height:auto;filter:drop-shadow(0 16px 36px rgba(15,23,42,.22));animation:svg-fade .4s var(--ease);transform:translate(var(--preview-x, 0px),var(--preview-y, 0px)) scale(var(--preview-zoom, 1));transform-origin:center center;transition:transform .18s var(--ease)}.preview-canvas.is-panning>svg{transition:none}.preview-canvas>svg.is-inspecting .is-selected{outline:none;filter:drop-shadow(0 0 12px rgba(34,211,238,.9)) drop-shadow(0 0 2px rgba(255,255,255,.95))}.svg-highlight-layer{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}.svg-highlight{position:absolute;border:3px solid #67e8f9;border-radius:10px;background:#67e8f91f;box-shadow:0 0 0 3px #fffffff2,0 0 30px 4px #22d3ee8c,0 0 0 9999px #040a12a3;animation:highlight-pulse 1.35s var(--ease) infinite}@keyframes highlight-pulse{0%,to{border-color:#67e8f9;box-shadow:0 0 0 3px #fffffff2,0 0 30px 4px #22d3ee8c,0 0 0 9999px #040a12a3}50%{border-color:#a5f3fc;box-shadow:0 0 0 3px #fff,0 0 40px 8px #67e8f9b3,0 0 0 9999px #040a12b8}}.preview-empty{position:absolute;inset:0;margin:0;display:grid;place-items:center;place-content:center;gap:.35rem;padding:var(--space-5);padding-bottom:4.5rem;font-size:.92rem;font-weight:700;letter-spacing:.01em;color:#64748b;pointer-events:none;text-align:center}.preview-empty:before{content:"SVG";font-size:.68rem;font-weight:800;letter-spacing:.18em;color:#94a3b8;padding:.35rem .65rem;border-radius:999px;background:#94a3b81f;box-shadow:inset 0 0 0 1px #94a3b833}.preview-empty[hidden]{display:none!important}.preview-toolbar{position:absolute;left:50%;bottom:.95rem;z-index:6;transform:translate(-50%);display:flex;align-items:center;gap:.35rem;padding:.38rem;border-radius:999px;background:#060e1ad1;border:1px solid rgba(148,197,232,.2);box-shadow:0 1px #ffffff0f inset,0 14px 36px #02081266;backdrop-filter:blur(16px) saturate(1.15);animation:toolbar-in .7s var(--ease) .28s both}.toolbar-group{display:inline-flex;align-items:center;gap:.2rem}.toolbar-divider{width:1px;height:1.2rem;margin:0 .2rem;background:#94c5e838}.toolbar-btn{appearance:none;border:0;min-width:1.85rem;height:1.85rem;padding:0 .45rem;border-radius:999px;background:transparent;color:#d7e9f8;font-family:var(--font-mono);font-size:.78rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s var(--ease),color .15s var(--ease)}.toolbar-btn:hover{background:#7dd3fc24;color:#fff}.toolbar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.toolbar-zoom-value{min-width:3.1rem;color:#9ec9e8}.toolbar-swatch{padding:0}.toolbar-swatch.is-active{background:#22d3ee2e;box-shadow:inset 0 0 0 1px #67e8f98c;transform:scale(1.04)}.swatch{width:.95rem;height:.95rem;border-radius:4px;display:block;box-shadow:inset 0 0 0 1px #ffffff40}.swatch-checker{background-color:#e2e8f0;background-image:linear-gradient(45deg,#94a3b8 25%,transparent 25%),linear-gradient(-45deg,#94a3b8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#94a3b8 75%),linear-gradient(-45deg,transparent 75%,#94a3b8 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.swatch-black{background:#0a0a0a}.swatch-white{background:#fff}@keyframes brand-in{0%{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}@keyframes workspace-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes svg-fade{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes glow-drift{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(3%,4%,0) scale(1.08)}}@keyframes beam-sweep{0%{opacity:.55;transform:rotate(-8deg) translate(-2%)}to{opacity:1;transform:rotate(-8deg) translate(3%)}}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}@keyframes toolbar-in{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes view-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes mark-breathe{0%,to{filter:drop-shadow(0 6px 18px rgba(34,211,238,.24))}50%{filter:drop-shadow(0 8px 26px rgba(34,211,238,.42))}}@keyframes status-pulse{0%,to{opacity:1}40%{opacity:.55}}.preview-status[data-state=ok],.preview-status[data-state=error]{opacity:1}.preview-status.is-flashing{animation:status-pulse .55s var(--ease) 1}.tab-label-short,.mobile-mode-switch{display:none}@media(max-width:1100px){.panel-actions{flex-wrap:wrap;justify-content:flex-end;gap:.3rem}}@media(max-width:900px){.ambiance-glow,.ambiance-beam,.ambiance-noise{display:none}.site-header{backdrop-filter:none}.brand-mark,.brand-name,.brand-tagline,.workspace,.preview-toolbar,.github-link{animation:none!important}.mobile-mode-switch{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:.3rem;flex:0 0 auto;margin:.45rem .4rem 0;padding:.28rem;border-radius:14px;background:#081220b8;box-shadow:inset 0 0 0 1px #7dd3fc24,0 10px 28px -18px #000c}.mobile-mode-btn{appearance:none;border:0;border-radius:11px;min-height:2.55rem;padding:.45rem .75rem;background:transparent;color:#8eb4d4;font-family:var(--font-sans);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}.mobile-mode-btn:hover{color:#e8f4ff;background:#7dd3fc0f}.mobile-mode-btn.is-active{color:#031018;background:linear-gradient(135deg,#67e8f9,#22d3ee 45%,#0ea5e9);box-shadow:0 1px #ffffff59 inset,0 8px 20px -10px #22d3eee6}.mobile-mode-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.workspace{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr);margin:.4rem;border-radius:14px}.splitter{display:none}body[data-mobile-mode=edit] .panel-preview,body[data-mobile-mode=preview] .panel-editor{display:none!important}body[data-mobile-mode=edit] .panel-editor,body[data-mobile-mode=preview] .panel-preview{min-height:0;height:100%}.panel-editor{border-bottom:0}.site-header{height:3.25rem;padding:0 .7rem;gap:.5rem}.brand{gap:.55rem}.brand-mark svg{width:28px;height:28px}.brand-tagline,.header-sep{display:none}.legal-nav a{padding:.35rem;font-size:.6rem}.github-link span{display:none}.github-link{width:2.35rem;height:2.35rem;min-width:2.35rem;padding:0}.brand-name{font-size:1.05rem}.panel-bar{height:auto;min-height:0;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.4rem .55rem}.panel-bar-left{flex:1 1 auto;min-width:0}.panel-actions{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr 1.15fr auto;gap:.35rem;width:100%;justify-content:stretch;align-items:stretch}.panel-actions .btn-quiet{margin-left:0}.panel-actions .share-menu{margin-left:0;margin-right:0;min-width:0}.panel-actions .btn,.panel-actions .share-menu-toggle{width:100%;justify-content:center;min-height:2.55rem;padding:.45rem;font-size:.64rem;letter-spacing:.03em}.panel-actions .btn-accent,.panel-actions .share-menu-toggle{font-size:.68rem;padding-inline:.5rem;box-shadow:0 1px #ffffff59 inset,0 0 0 1px #a5f3fc4d,0 6px 16px -6px #22d3eebf}.btn-accent:before,.share-menu-toggle:before{inset:0;filter:blur(8px);opacity:.45}.share-menu-toggle .share-icon{width:13px;height:13px}.share-menu-panel{right:0;left:auto;min-width:min(16rem,calc(100vw - 1.5rem))}.legal-shell{width:min(52rem,calc(100% - 1.25rem));margin-top:.85rem}.panel-bar-tabs{padding:.35rem .45rem;overflow:hidden}.export-tabs{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px;gap:.2rem}.export-tabs::-webkit-scrollbar{display:none}.export-tab{flex:0 0 auto;min-height:2.35rem;padding:.4rem .75rem;font-size:.68rem}.tab-label-full{display:none}.tab-label-short{display:inline}.panel-bar-tabs .preview-status{display:none}.preview-toolbar{gap:.35rem;padding:.35rem .45rem}.toolbar-btn{min-width:2.2rem;min-height:2.2rem}.code-editor{font-size:.78rem}}@media(max-width:420px){.mobile-mode-switch{margin:.35rem .28rem 0}.workspace{margin:.28rem;border-radius:12px}.legal-nav a{padding:.3rem .28rem}.panel-actions{grid-template-columns:1fr 1fr 1fr auto;gap:.28rem}.panel-actions .btn,.panel-actions .share-menu-toggle{font-size:.58rem;min-height:2.25rem}.export-tab{padding:.38rem .62rem;font-size:.64rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.share-notice{position:relative;z-index:4;flex:0 0 auto;margin:0;padding:.55rem clamp(1rem,2.5vw,1.75rem);border-bottom:1px solid rgba(56,189,248,.28);background:linear-gradient(90deg,#0e3a5cf2,#081c30eb);color:#d7ecff;font-family:var(--font-sans);font-size:.84rem;font-weight:600;line-height:1.35;letter-spacing:.01em;text-transform:none}.share-notice[hidden]{display:none!important}