:root{--bg:#f5f6f2;--bg-tint:#ece7dc;--surface:rgba(255,255,255,0.78);--surface-strong:#ffffff;--surface-soft:#f6f4ee;--canvas:#fbfaf7;--text:#161818;--muted:#5f6661;--line:rgba(22,24,24,0.12);--line-strong:rgba(22,24,24,0.22);--accent:#0f766e;--accent-soft:#d9efe9;--code:#f2efe7;--shadow:0 10px 30px rgba(34,31,24,0.06);--canvas-dark:#0f172a}html[data-theme=dark]{--bg:#101315;--bg-tint:#182025;--surface:rgba(20,24,27,0.82);--surface-strong:#171c20;--surface-soft:#14191d;--canvas:#11161b;--text:#f5f7f7;--muted:#9ea7a5;--line:rgba(245,247,247,0.12);--line-strong:rgba(245,247,247,0.22);--accent:#7ce0d4;--accent-soft:rgba(124,224,212,0.08);--code:#151b20;--shadow:0 18px 44px rgba(0,0,0,0.26);--canvas-dark:#0b1220}*{box-sizing:border-box}html{min-height:100%;background:radial-gradient(circle at top left,rgba(15,118,110,.08),transparent 28%),radial-gradient(circle at bottom right,rgba(173,122,57,.08),transparent 24%),linear-gradient(180deg,var(--bg) 0,var(--bg-tint) 100%)}body,html{transition:background-color .18s ease,color .18s ease}body{margin:0;min-height:100vh;color:var(--text);font-family:IBM Plex Sans,Segoe UI,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 12%,rgba(15,118,110,.09),transparent 32%),radial-gradient(ellipse at 85% 20%,rgba(201,160,102,.08),transparent 28%),radial-gradient(ellipse at 70% 90%,rgba(15,118,110,.07),transparent 24%)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,code,input,pre,select{font-family:IBM Plex Mono,Menlo,Consolas,monospace}.page-shell{position:relative;z-index:1;width:min(980px,calc(100vw - 32px));margin:0 auto;padding:26px 0 56px}.hero{min-height:18vh;display:grid;place-items:center;text-align:center;margin-bottom:28px}.hero-inner{max-width:720px}.error-panel h2,.hero-inner h1,.output-heading h2,.seo-copy h2{margin:0;letter-spacing:-.05em}.hero-inner h1{font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.14;font-weight:700}.eyebrow,.field-chip-label,.field-label,.inline-link{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem}.eyebrow{margin:0 0 12px}.helper-copy,.lede,.preset-pill,.seo-copy p,.url-line code{color:var(--muted)}.lede{margin:14px auto 0;max-width:44ch;font-size:1rem;line-height:1.6}.error-panel,.seo-copy,.tool-surface{border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.tool-surface{padding:24px}.output-actions,.output-heading,.parse-breakdown,.parse-summary,.preset-row,.theme-toggle,.toolbar{display:flex;gap:12px}.toolbar{justify-content:space-between;align-items:center}.parse-breakdown,.parse-summary,.preset-row{flex-wrap:wrap}.theme-toggle{padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-soft)}.copy-button,.preset-pill,.toggle-button{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);cursor:pointer}.toggle-button.is-active{border-color:transparent;background:var(--surface-strong);color:var(--accent)}.input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-gap:16px;gap:16px;margin-top:14px}.input-block{display:grid;grid-gap:10px;gap:10px}.field-input{width:100%;min-height:68px;padding:0 16px;border:1px solid var(--line);border-radius:20px;background:var(--surface-strong);color:var(--text);font-size:1rem}.field-input:focus{outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--line-strong)}.field-input-code{font-size:1.28rem}.field-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.preset-row{margin-top:16px}.preset-pill{background:var(--surface-soft)}.helper-copy{margin-top:14px;font-size:.92rem;line-height:1.5}.error-panel{margin-top:18px;padding:18px}.error-panel h2{font-size:1.15rem;color:#c2410c}.field-chip{min-width:120px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.field-chip strong,.parse-summary strong{display:block;margin-top:8px;font-size:1rem;color:var(--text);overflow-wrap:anywhere}.parse-breakdown,.parse-summary{margin-top:4px}.parse-summary-item{flex:1 1 280px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}.parse-summary-single .parse-summary-item{flex-basis:100%}.outputs{display:grid;grid-gap:0;gap:0;margin-top:36px}.output-tabs{display:inline-flex;width:-moz-fit-content;width:fit-content;border:1px solid var(--line-strong);border-bottom:0;border-radius:14px 14px 0 0;background:var(--surface-soft);overflow:hidden}.tab-button{min-height:42px;padding:0 16px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:.95rem}.tab-button:last-child{border-right:0}.tab-button.is-active{background:var(--surface-strong);color:var(--text);box-shadow:inset 0 -1px 0 var(--surface-strong),inset 0 -2px 0 var(--accent)}.tab-panel{border:1px solid var(--line-strong);margin-top:-1px;border-radius:0 18px 18px 18px;background:var(--surface);box-shadow:var(--shadow)}.setting-toggle{color:var(--text)}.setting-field,.setting-toggle{display:inline-flex;align-items:center;gap:10px}.setting-select{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-strong);color:var(--text)}.output-section{display:grid;grid-gap:14px;gap:14px;padding:22px}.output-heading{justify-content:space-between;align-items:flex-start}.output-heading h2{margin-top:6px;font-size:1.3rem;line-height:1.05}.output-actions{align-items:center}.inline-link{color:var(--accent)}.canvas,.code-line,.url-line{border:1px solid var(--line);border-radius:18px}.url-line{display:flex;align-items:center;min-height:48px;padding:0 14px;background:var(--surface-soft);overflow-x:auto}.code-line{margin:0;padding:14px;background:var(--code);overflow-x:auto;line-height:1.6}.canvas{min-height:120px;padding:18px;position:relative;overflow:hidden;background:var(--canvas)}.canvas:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(22,24,24,.12) 1px,transparent 1.2px);background-size:18px 18px;pointer-events:none}.canvas-light{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.7)),var(--canvas)}.canvas-dark,.canvas-light{display:grid;align-items:center}.canvas-dark{background:linear-gradient(180deg,rgba(23,29,39,.16),rgba(23,29,39,.02)),var(--canvas-dark)}.canvas-light:before{background-image:radial-gradient(circle,rgba(22,24,24,.12) 1px,transparent 1.2px)}.canvas-dark:before{background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.3px)}.canvas>*{position:relative;z-index:1}.canvas-json{margin:0;max-height:520px;overflow:auto;background:var(--code);line-height:1.6}.settings-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.settings-row-bottom{padding-top:6px;border-top:1px solid var(--line)}.canvas-json:before{background-image:radial-gradient(circle,rgba(22,24,24,.08) 1px,transparent 1.2px)}.seo-copy{margin-top:36px;padding:14px 2px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.seo-copy h2{font-size:.82rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.seo-copy p{margin:8px 0 0;max-width:68ch;font-size:.94rem;line-height:1.65}.reveal{opacity:0;transform:translateY(16px);animation:reveal-up .48s cubic-bezier(.22,1,.36,1) forwards}.reveal-1{animation-delay:40ms}.reveal-2{animation-delay:.11s}.reveal-3{animation-delay:.18s}@keyframes reveal-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}}@media (max-width:820px){.input-wrap{grid-template-columns:1fr}}@media (max-width:640px){.page-shell{width:min(100vw - 20px,980px);padding:16px 0 42px}.error-panel,.seo-copy,.tool-surface{border-radius:20px}.tool-surface{padding:18px}.seo-copy{border-radius:0;padding-top:12px}.output-heading,.toolbar{flex-direction:column;align-items:flex-start}.output-tabs{width:100%}.tab-button{flex:1 1}.output-actions{width:100%;justify-content:space-between}}