@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: oklch(.985 .004 75);--surface: oklch(.995 .003 75);--line: oklch(.92 .005 75);--line-strong: oklch(.85 .006 75);--fg: oklch(.2 .008 60);--fg-muted: oklch(.5 .008 60);--fg-faint: oklch(.68 .008 60);--accent: oklch(.66 .16 45);--accent-fg: oklch(.99 .003 75);--danger: oklch(.58 .16 25);--ok: oklch(.62 .14 155);--radius: 14px;--radius-sm: 8px;--shadow-sm: 0 1px 0 oklch(.92 .005 75);--shadow-pill: 0 1px 2px oklch(0 0 0 / .06), 0 0 0 1px var(--line);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}:root[data-theme=dark]{--bg: oklch(.16 .006 60);--surface: oklch(.2 .006 60);--line: oklch(.27 .007 60);--line-strong: oklch(.36 .008 60);--fg: oklch(.96 .004 75);--fg-muted: oklch(.72 .008 60);--fg-faint: oklch(.55 .008 60);--accent: oklch(.74 .15 50);--accent-fg: oklch(.18 .006 60);--shadow-sm: 0 1px 0 oklch(.27 .007 60)}@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg: oklch(.16 .006 60);--surface: oklch(.2 .006 60);--line: oklch(.27 .007 60);--line-strong: oklch(.36 .008 60);--fg: oklch(.96 .004 75);--fg-muted: oklch(.72 .008 60);--fg-faint: oklch(.55 .008 60);--accent: oklch(.74 .15 50);--accent-fg: oklch(.18 .006 60);--shadow-sm: 0 1px 0 oklch(.27 .007 60)}}html{color-scheme:light dark}html[data-theme=light]{color-scheme:light}html[data-theme=dark]{color-scheme:dark}body,.panel,.panel-head,.panel-foot,.mode,.mode .pill,.theme,.theme .pill,.chip,.icon-btn,.width-toggle,.swap button,footer kbd{transition:background-color .25s ease,color .25s ease,border-color .25s ease}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;max-width:1180px;margin:0 auto;padding:28px 32px 24px;gap:22px;transition:max-width .2s ease}:root[data-width=full] .app{max-width:none}header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.01em}.mark{width:26px;height:26px;border-radius:7px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:-.02em;transition:background-color .25s ease,color .25s ease}.brand .title{font-size:14px}.brand .sub{color:var(--fg-faint);font-weight:400;font-size:13px;margin-left:2px}.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.width-toggle{appearance:none;background:var(--surface);border:1px solid var(--line);color:var(--fg-faint);width:34px;height:34px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:color .14s,border-color .14s,background .14s}.width-toggle:hover{color:var(--fg-muted);border-color:var(--line-strong)}.width-toggle[aria-pressed=true]{color:var(--fg);border-color:var(--fg);background:var(--bg)}.width-toggle svg{width:15px;height:15px}.theme,.mode{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;position:relative}.theme .pill,.mode .pill{position:absolute;background:var(--bg);border-radius:999px;box-shadow:var(--shadow-pill);transition:transform .22s cubic-bezier(.4,0,.2,1);z-index:0}.theme button,.mode button{appearance:none;border:0;background:transparent;cursor:pointer;position:relative;z-index:1;transition:color .18s ease}.theme button{color:var(--fg-faint);width:28px;height:28px;border-radius:999px;display:grid;place-items:center}.theme button:hover{color:var(--fg-muted)}.theme button[aria-pressed=true]{color:var(--fg)}.theme button svg{width:14px;height:14px}.theme .pill{top:3px;left:3px;width:28px;height:28px}.theme[data-theme=light] .pill{transform:translate(0)}.theme[data-theme=system] .pill{transform:translate(28px)}.theme[data-theme=dark] .pill{transform:translate(56px)}.mode button{font:inherit;font-weight:500;padding:7px 18px;border-radius:999px;color:var(--fg-muted);letter-spacing:-.005em;white-space:nowrap}.mode button[aria-pressed=true]{color:var(--fg)}.mode .pill{top:3px;bottom:3px;width:calc(50% - 3px)}.mode[data-active="1"] .pill{transform:translate(100%)}.segmented{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.segmented button{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;color:var(--fg-muted);font:inherit;font-size:12px;font-weight:500;padding:5px 11px;cursor:pointer;transition:background .14s,color .14s}.segmented button:last-child{border-right:0}.segmented button:hover{background:var(--bg);color:var(--fg)}.segmented button[aria-pressed=true]{background:var(--bg);color:var(--fg);font-weight:600}main{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}.panel{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:420px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);background:var(--surface)}.panel-label{display:flex;align-items:baseline;gap:10px}.panel-label .name{font-weight:500;font-size:13px;letter-spacing:-.005em}.panel-label .kind{font-family:var(--font-mono);font-size:11px;color:var(--fg-faint);text-transform:lowercase}.panel-tools{display:flex;gap:2px}textarea{flex:1;appearance:none;border:0;resize:none;background:transparent;color:var(--fg);font-family:var(--font-mono);font-size:13px;line-height:1.6;padding:18px 20px 22px;outline:0;width:100%;tab-size:2}textarea::placeholder{color:var(--fg-faint);font-style:normal}textarea[readonly]{cursor:default}.panel-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--fg-faint);background:var(--surface)}.panel-foot .stats{display:flex;gap:14px}.panel-foot .stats span b{color:var(--fg-muted);font-weight:500}.panel.is-error{border-color:color-mix(in oklch,var(--danger) 35%,var(--line))}.panel.is-error .panel-head{background:color-mix(in oklch,var(--danger) 6%,var(--surface))}.panel-foot .err{color:var(--danger);display:none}.panel.is-error .err{display:inline}.panel.is-error .stats{display:none}.icon-btn{appearance:none;background:transparent;border:0;color:var(--fg-muted);width:28px;height:28px;border-radius:7px;cursor:pointer;display:grid;place-items:center;transition:background .14s ease,color .14s ease;position:relative}.icon-btn:hover{background:var(--bg);color:var(--fg)}.icon-btn:active{transform:translateY(.5px)}.icon-btn svg{width:15px;height:15px}.icon-btn[data-flash=ok]{color:var(--ok)}.icon-btn[data-flash=ok]:after{content:"copied";position:absolute;top:100%;right:0;margin-top:4px;background:var(--fg);color:var(--bg);font-size:10.5px;font-family:var(--font-mono);padding:3px 6px;border-radius:5px;pointer-events:none;white-space:nowrap;z-index:5}.swap{display:grid;place-items:center;width:56px;position:relative}.swap:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(to bottom,transparent 0,var(--line) 18%,var(--line) 82%,transparent 100%)}.swap button{appearance:none;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--fg-muted);cursor:pointer;display:grid;place-items:center;transition:transform .35s cubic-bezier(.4,0,.2,1),color .14s ease,border-color .14s ease,background .14s ease;position:relative;z-index:1}.swap button:hover{color:var(--fg);border-color:var(--line-strong);background:var(--bg)}.swap button.spin{transform:rotate(180deg)}.swap svg{width:16px;height:16px}.options{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:4px 2px 0}.opt-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.opt-label{font-size:12px;color:var(--fg-faint);margin-right:2px}.chip{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--fg-muted);font:inherit;font-size:12px;padding:6px 11px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .14s,border-color .14s,background .14s;user-select:none}.chip:hover{color:var(--fg);border-color:var(--line-strong)}.chip[aria-pressed=true]{color:var(--fg);border-color:var(--fg);background:var(--bg)}.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}.chip[aria-pressed=true] .dot{background:var(--accent)}footer{display:flex;justify-content:space-between;align-items:center;color:var(--fg-faint);font-family:var(--font-mono);font-size:11px}footer .kbd-list{display:flex;gap:14px;flex-wrap:wrap}footer kbd{font:inherit;border:1px solid var(--line);border-bottom-width:2px;padding:1px 5px;border-radius:4px;color:var(--fg-muted);background:var(--surface);margin:0 2px}@media(max-width:820px){.app{padding:18px;gap:16px}header{flex-wrap:wrap;gap:12px}.header-right{flex-wrap:wrap;gap:8px}main{grid-template-columns:1fr}.swap{width:auto;height:48px}.swap:before{left:0;right:0;top:50%;width:auto;height:1px;background:linear-gradient(to right,transparent 0,var(--line) 18%,var(--line) 82%,transparent 100%)}.swap button{transform:rotate(90deg)}.swap button.spin{transform:rotate(270deg)}.options{flex-direction:column;align-items:stretch}footer{flex-direction:column;gap:8px;align-items:flex-start}}.app{height:100dvh}main{min-height:0}.panel{min-height:0}#output,#preview{flex:1;min-height:0;overflow:auto}#preview{padding:18px 20px 22px;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--fg)}#preview[hidden],#output[hidden]{display:none}#preview>:first-child{margin-top:0}#preview>:last-child{margin-bottom:0}#preview h1,#preview h2,#preview h3,#preview h4{line-height:1.25;margin:1.1em 0 .5em;font-weight:600;letter-spacing:-.01em}#preview h1{font-size:1.6em}#preview h2{font-size:1.35em}#preview h3{font-size:1.15em}#preview p,#preview ul,#preview ol,#preview blockquote,#preview pre,#preview table{margin:0 0 .8em}#preview ul,#preview ol{padding-left:1.5em}#preview li{margin:.2em 0}#preview a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}#preview code{font-family:var(--font-mono);font-size:.88em;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}#preview pre{font-family:var(--font-mono);font-size:.85em;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;overflow:auto}#preview pre code{background:none;border:0;padding:0;font-size:1em}#preview blockquote{margin-left:0;padding:2px 0 2px 14px;border-left:3px solid var(--line-strong);color:var(--fg-muted)}#preview hr{border:0;border-top:1px solid var(--line);margin:1.2em 0}#preview table{border-collapse:collapse}#preview th,#preview td{border:1px solid var(--line);padding:5px 9px}#preview img{max-width:100%}