.site-header nav{display:flex;gap:24px;align-items:center}.site-header nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-weight:600;text-decoration:none}.site-header nav a.active{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}.brand{display:flex;gap:12px;align-items:center}.brand small{display:block;font-size:12px;color:var(--muted);font-weight:500}.brand img{flex:none}.hero-result{font-size:64px;line-height:1;font-weight:650;letter-spacing:-.045em;margin:16px 0}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:52px;padding:12px 24px;border:1px solid var(--accent);border-radius:12px;font-size:16px;line-height:1.25;font-weight:650;text-decoration:none}.button svg,button svg{flex:none}.button.primary{background:var(--brand-gradient);color:#fff;box-shadow:inset 0 1px #ffffff18,0 4px 16px #8b20ca24}.button.secondary{background:var(--surface);color:var(--ink);border-color:var(--control-border);box-shadow:inset 0 1px #ffffff0a}.button.ghost{background:transparent;color:var(--ink);border-color:transparent}.button:is(:hover,:focus-visible){text-decoration:none}.button.primary:is(:hover,:focus-visible){box-shadow:inset 0 1px #ffffff18,0 6px 24px #8b20ca38}.button.secondary:is(:hover,:focus-visible){background:var(--accent-soft);border-color:var(--accent)}.button.ghost:is(:hover,:focus-visible){background:var(--accent-soft)}.button.primary:active{box-shadow:inset 0 1px #ffffff18,0 2px 8px #8b20ca24}.muted{color:var(--muted)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;flex-wrap:wrap}.tag{background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:6px;font-weight:650}.result-label{margin-top:24px;color:var(--muted);font-size:13px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.section-heading h2{margin-top:8px}.code-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--muted)}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--control-border);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 12px;min-height:44px;line-height:1.25;font-weight:600;cursor:pointer}button:enabled:is(:hover,:focus-visible){background:var(--accent-soft);border-color:var(--accent)}button:disabled{cursor:not-allowed;color:var(--muted)}.code-heading button{font-size:12px;min-width:104px}@media(prefers-reduced-motion:no-preference){.button,button{transition:transform .16s ease-out,background-color .16s ease-out,border-color .16s ease-out}button:enabled:active{transform:translateY(1px)}}@media(forced-colors:active){.button,.button.primary,.button.secondary,button{border-color:ButtonText;box-shadow:none}.button.primary:is(:hover,:focus-visible,:active){box-shadow:none}}pre{margin-top:8px}.copy-status{margin:4px 0;font-size:12px;min-height:20px;color:var(--muted)}.page-heading{padding:24px 0 32px}.page-heading h1{font-size:clamp(32px,5vw,52px);overflow-wrap:anywhere}.catalog-controls{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-weight:600;font-size:14px}input,select,textarea{min-height:48px;border:1px solid var(--control-border);border-radius:8px;padding:12px 14px;background:var(--surface);color:var(--ink);width:100%}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.catalog-card{display:flex;flex-direction:column;background:var(--surface);color:var(--ink);padding:24px;border:1px solid var(--line);border-radius:12px;text-decoration:none}.catalog-card:hover{border-color:var(--accent)}.catalog-card h2{font-size:18px;overflow-wrap:anywhere}.catalog-card p{color:var(--muted);font-size:14px;margin-top:0}.card-arrow{float:right;color:var(--accent);margin-left:12px}.card-meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:16px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}.detail-grid .panel{margin:0;min-width:0}dt{font-weight:650;margin-top:20px;font-size:14px}dd{margin:4px 0 0;color:var(--muted);font-size:14px}.output{background:var(--accent-soft);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line)}.notice{border-left:3px solid var(--accent);background:var(--accent-soft);padding:16px;font-size:14px;color:var(--ink)}.back-link{display:inline-flex;align-items:center;min-height:44px}.site-footer{display:flex;justify-content:space-between;gap:32px;font-size:13px}.site-footer>div:last-child{display:flex;gap:24px;align-items:center;flex-wrap:wrap}@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr}}@media(max-width:600px){.catalog-grid,.catalog-controls{grid-template-columns:1fr}.section-heading,.site-footer{align-items:start;flex-direction:column}.site-header nav{gap:16px}.brand{font-size:18px}.brand small{display:none}.panel{padding:20px}}.site-footer a,.detail-grid aside a{display:inline-flex;align-items:center;min-height:44px}.playground{border-top:1px solid var(--line);margin-top:32px;padding-top:24px}.playground .section-heading{align-items:start;margin-bottom:20px}.playground .section-heading h2{margin-top:0}.playground .section-heading p{font-size:14px}.playground-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.playground textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}.playground small{color:var(--muted)}.playground-tools{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:20px 0}.playground-tools .field{flex:1;min-width:180px}.playground .copy-status{min-height:0}.live-output{min-height:68px;max-height:480px;overflow:auto;unicode-bidi:plaintext}.recipe-output{display:flex;flex-wrap:wrap;gap:32px}.recipe-output p{display:flex;flex-direction:column;gap:8px}.recipe-output strong{font-size:28px}button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:600px){.playground textarea{font-size:16px}.playground-fields{grid-template-columns:1fr}.playground .section-heading{flex-direction:column}.site-header{flex-wrap:wrap;gap:16px}}:root{color-scheme:dark;--ink: #f4f4f5;--muted: #b3b3bb;--accent: #df9cff;--brand-pink: #bb005d;--brand-magenta: #8b20ca;--brand-violet: #5b21b6;--brand-gradient: linear-gradient( 115deg, var(--brand-pink), var(--brand-magenta), var(--brand-violet) );--heading-pink: #ff73b5;--heading-magenta: #db9fff;--heading-violet: #a9adff;--heading-gradient: linear-gradient( 110deg, var(--heading-pink), var(--heading-magenta), var(--heading-violet) );--accent-soft: #29232f;--control-border: #7b7b87;--code-surface: #111114;--code-ink: #fafafa;--surface: #242424;--canvas: #191919;--line: #353539}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.6}a{color:var(--accent);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.skip-link{position:fixed;top:8px;left:8px;padding:12px;background:var(--surface);z-index:10;transform:translateY(-160%)}.skip-link:focus{transform:none}.site-header{max-width:1200px;margin:auto;padding:8px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{color:var(--ink);font-size:20px;font-weight:750;text-decoration:none}.brand>span{display:block;font-size:20px;color:var(--ink);font-weight:750}.container{max-width:1120px;margin:auto;padding:32px}.hero-highlight{color:var(--accent)}@supports (background-clip: text){.hero-highlight{background:var(--heading-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}}.eyebrow{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}h1{font-size:clamp(40px,7vw,76px);line-height:1.08;letter-spacing:-.055em;margin:24px 0}h2{font-size:24px;line-height:1.3;letter-spacing:-.02em}.intro{font-size:20px;max-width:640px;color:var(--muted)}.panel{margin:40px 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}pre{background:var(--code-surface);color:var(--code-ink);padding:20px;border-radius:10px;overflow:auto;font-size:14px}.result{font-size:36px;font-weight:700}footer{color:var(--muted);border-top:1px solid var(--line);font-size:14px}button,input,select,textarea{font:inherit}button,a.button{min-height:44px}@media(max-width:600px){.container{padding:32px 20px}.site-header{padding:20px;flex-wrap:wrap;gap:12px}.code-heading{flex-wrap:wrap}}@media(min-width:1600px){app-root{display:flex;flex-direction:column;min-height:100svh}.site-header,.site-footer{width:100%;max-width:1600px;margin-block:0;padding-inline:40px}.site-header{padding-block:16px}main.container{flex:1;width:100%;margin-block:0}main.container:has(app-home){display:flex;flex-direction:column;max-width:1440px;padding-inline:40px}.site-footer{padding-block:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media(forced-colors:active){.hero-highlight{background:none;color:CanvasText}.button.primary{background:ButtonFace;color:ButtonText}}