:root{--bg: #101012;--bg-raised: #18181b;--bg-elevated: #26262b;--bg-hover: rgba(223, 191, 137, .06);--text: #f8f6f3;--text-2: rgba(248, 246, 243, .55);--text-3: rgba(248, 246, 243, .3);--sep: rgba(255, 255, 255, .08);--sep-strong: rgba(255, 255, 255, .13);--accent: #dfbf89;--accent-hi: #e8cfa0;--accent-lo: #c4a870;--accent-muted: rgba(223, 191, 137, .12);--accent-border: rgba(223, 191, 137, .28);--btn-bg: #dfbf89;--btn-bg-hover: #e8cfa0;--btn-text: #1f2328;--shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);--shadow-hover: 0 2px 6px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);--shadow-modal: 0 8px 40px rgba(0,0,0,.7);--font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-display: "Source Serif 4", Georgia, "Times New Roman", serif;--font-family-mono: "IBM Plex Mono", "Cascadia Code", "Source Code Pro", Menlo, monospace;--font-weight-bold: 700;--font-weight-semibold: 600;--font-weight-medium: 500;--font-weight-normal: 400;--font-size-base: 1.5rem;--font-size-small: 1.3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 22px;--radius-full: 999px;--transition-fast: .14s cubic-bezier(.4, 0, .2, 1);--transition-base: .22s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg: #f5f2ed;--bg-raised: #ffffff;--bg-elevated: #f0ece4;--bg-hover: rgba(223, 191, 137, .08);--text: #23272b;--text-2: rgba(35, 39, 43, .6);--text-3: rgba(35, 39, 43, .35);--sep: rgba(0, 0, 0, .08);--sep-strong: rgba(0, 0, 0, .13);--accent: #a07830;--accent-hi: #b88a38;--accent-lo: #8a6520;--accent-muted: rgba(160, 120, 48, .1);--accent-border: rgba(160, 120, 48, .28);--btn-bg: #a07830;--btn-bg-hover: #b88a38;--btn-text: #ffffff;--shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);--shadow-hover: 0 2px 8px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.08);--shadow-modal: 0 8px 40px rgba(0,0,0,.18)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%;scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text);background:linear-gradient(180deg,#121316,#0a0b0d);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}[data-theme=light] body{background:linear-gradient(180deg,#f5f2ed,#ede8df)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:radial-gradient(ellipse 100% 55% at 50% 0%,rgba(223,191,137,.07) 0%,transparent 65%)}[data-theme=light] body:before{background-image:radial-gradient(ellipse 100% 55% at 50% 0%,rgba(160,120,48,.07) 0%,transparent 65%)}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:url(/pattern.svg);background-repeat:repeat;background-size:220px 220px;opacity:.06;filter:invert(1)}[data-theme=light] body:after{filter:none;opacity:.05}.page{max-width:980px;margin:0 auto;padding:48px 24px 80px;display:grid;gap:2rem}.theme-toggle-wrap{display:flex;justify-content:flex-end;margin-bottom:-.8rem}.theme-toggle{background:var(--bg-elevated);border:1px solid var(--sep-strong);border-radius:var(--radius-full);color:var(--text-2);font-family:var(--font-family);font-size:1.2rem;font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;cursor:pointer;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}.theme-toggle:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-muted);transform:none}.hero{padding:2.4rem 2.8rem;background:var(--bg-raised);border:1px solid var(--sep);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}.eyebrow{font-size:1.2rem;font-weight:var(--font-weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}h1{font-family:var(--font-family-display);font-size:clamp(2.4rem,3vw,3.6rem);font-weight:600;letter-spacing:.01em;line-height:1.2;color:var(--text);margin-bottom:1rem}.lede{display:grid;gap:.6rem;color:var(--text-2);font-size:var(--font-size-base)}.lede p{margin:0}.panel{padding:2rem 2.2rem;background:var(--bg-raised);border:1px solid var(--sep);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}.view-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--sep-strong);margin-bottom:1.6rem}.tab{border:none;border-radius:var(--radius-full);padding:7px 18px;font-family:var(--font-family);font-size:1.2rem;font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--text-2);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.tab:hover{color:var(--accent);background:var(--accent-muted)}.tab.active{background:var(--btn-bg);color:var(--btn-text)}.tab.active:hover{background:var(--btn-bg-hover)}.label{display:block;font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:1rem}textarea{width:100%;border-radius:var(--radius-md);border:1px solid var(--sep-strong);padding:1.4rem 1.6rem;font-size:1.4rem;font-family:var(--font-family-mono);background:var(--bg);color:var(--text);resize:vertical;min-height:120px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}textarea:focus{outline:none;border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-muted)}.output-box{width:100%;border-radius:var(--radius-md);border:1px solid var(--sep-strong);padding:1.4rem 1.6rem;font-size:1.4rem;font-family:var(--font-family-mono);background:var(--bg);color:var(--text);min-height:140px;white-space:pre-wrap;word-break:break-word}.output-line{white-space:pre-wrap}.output-line-error{color:#f87171}[data-theme=light] .output-line-error{color:#b42318}.actions{margin-top:1.2rem;display:flex;gap:1rem}button{border:none;border-radius:var(--radius-full);padding:10px 20px;font-family:var(--font-family);font-size:1.3rem;font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:var(--btn-bg);color:var(--btn-text);transition:background var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast)}button:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}button.ghost{background:transparent;color:var(--text-2);border:1px solid var(--sep-strong)}button.ghost:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-muted)}.builder-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.2rem}.builder-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}.builder-tabs{margin:1.8rem 0 1.2rem;display:flex;gap:.8rem;flex-wrap:wrap}.tab-pill{border:1px solid var(--sep-strong);border-radius:var(--radius-full);padding:7px 14px;background:var(--bg-elevated);color:var(--text-2);font-family:var(--font-family);font-size:1.2rem;font-weight:var(--font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.tab-pill:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-muted);transform:none}.tab-pill.active{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}.tab-pill.active:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}.builder-grid{margin:1.8rem 0;display:grid;gap:1.8rem}.builder-group h3{margin-bottom:.8rem}.chip-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(68px,1fr))}button.chip{background:var(--bg-elevated);color:var(--text);border:1px solid var(--sep-strong);border-radius:var(--radius-md);padding:10px 12px;font-family:var(--font-family-mono);font-size:1.3rem;font-weight:var(--font-weight-semibold);letter-spacing:0;text-transform:none;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}button.chip:hover{background:var(--accent-muted);border-color:var(--accent-border);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-hover)}.has-tooltip{position:relative}@media (hover: hover) and (pointer: fine){.has-tooltip:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%) translateY(6px);background:var(--bg-raised);color:var(--text);border:1px solid var(--sep-strong);padding:7px 10px;border-radius:var(--radius-sm);font-size:1.2rem;font-weight:var(--font-weight-semibold);white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-modal);transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:10}.has-tooltip:before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%) translateY(6px);border-width:6px 6px 0 6px;border-style:solid;border-color:var(--sep-strong) transparent transparent transparent;opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:9}.has-tooltip:hover:after,.has-tooltip:hover:before{opacity:1;transform:translate(-50%) translateY(0)}}.subhead{margin:0 0 1.2rem;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text)}h3{font-family:var(--font-family);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:0 0 .8rem}.grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));color:var(--text-2)}.legend-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.legend-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;color:var(--text-2);font-size:var(--font-size-small)}.legend-list li{line-height:1.4}.hint{margin-top:1rem;color:var(--text-3);font-size:var(--font-size-small)}.code{font-family:var(--font-family-mono);background:var(--accent-muted);color:var(--accent);padding:2px 6px;border-radius:6px;border:1px solid var(--accent-border);font-size:.9em}@media (max-width: 720px){.page{padding:24px 16px 48px}.actions{flex-direction:column}button:not(.chip):not(.tab):not(.tab-pill):not(.theme-toggle){width:100%}.view-toggle{width:100%;justify-content:space-between}.tab{flex:1;text-align:center}.builder-actions{width:100%}.builder-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tab-pill{width:100%;text-align:center}}