:root{color-scheme:light;--brand-green:#024f2c;--brand-lime:#c1ef0c;--brand-bright:#7fe21c;--brand-deep:#1d6004;--brand-pale:#f2ffe9;--page:var(--brand-pale);--surface:#fff;--ink:#11351e;--muted:#52684f;--line:#d4e3cc;--field:#f8fcf5;--green:var(--brand-green);--green-soft:var(--brand-pale);--lime:var(--brand-lime);--preview:var(--brand-green);--preview-text:var(--brand-pale);--focus:var(--brand-deep);--shadow:0 8px 30px #024f2c10}
:root[data-theme=dark]{color-scheme:dark;--page:#071e13;--surface:#103624;--ink:var(--brand-pale);--muted:#b2c7a8;--line:#325643;--field:#0a291b;--green:var(--brand-lime);--green-soft:#1b421d;--preview:var(--brand-green);--preview-text:var(--brand-pale);--focus:var(--brand-bright);--shadow:0 8px 30px #0002}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font:400 1rem/1.55 Figtree,system-ui,-apple-system,'Segoe UI',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,select,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.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:fixed;top:-80px;left:12px;z-index:20;padding:10px 20px;background:var(--lime);color:var(--brand-green);border-radius:8px}.skip-link:focus{top:12px}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 max(24px,env(safe-area-inset-left))}.topbar-inner{max-width:1240px;margin:auto;min-height:90px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:block;width:224px;max-width:calc(100% - 64px);min-width:0;flex-shrink:1}.brand-logo{display:block;width:100%;height:auto;aspect-ratio:1624/473;object-fit:contain}.brand-logo-dark{display:none}:root[data-theme=dark] .brand-logo-light{display:none}:root[data-theme=dark] .brand-logo-dark{display:block}.topbar-end{display:flex;gap:24px;align-items:center}.topbar-label{font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--muted)}.theme-toggle{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center}.theme-toggle:hover{background:var(--field)}
.wrap{max-width:1288px;margin:auto;padding:40px 24px 22px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:30px}.eyebrow{font-size:.75rem;letter-spacing:.15em;color:var(--green);font-weight:700}.intro h1{font:700 clamp(2.5rem,4vw,3.4rem)/1.15 'Bricolage Grotesque',Figtree,sans-serif;letter-spacing:-.045em;margin:8px 0 0}.intro h1>span:not(.title-period){color:var(--green)}.title-period{color:var(--brand-bright)}.intro p{margin:0 0 4px;color:var(--muted);line-height:1.6}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:24px;box-shadow:0 2px 6px #024f2c03}.tab{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:9px;padding:13px 16px;display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:600;text-align:left;min-width:0}.tab-description{font-size:.8125rem;font-weight:400;margin-left:auto;white-space:nowrap}.tab:hover{background:var(--field);color:var(--ink)}.tab[aria-selected=true]{background:var(--green-soft);color:var(--green);border-color:var(--line)}.tab[aria-selected=true] .icon{stroke-width:2}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:24px;align-items:stretch}.input-panel{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:26px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:25px}.step-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;color:var(--muted)}h2{font:600 1.35rem/1.3 'Bricolage Grotesque',Figtree,sans-serif;letter-spacing:-.02em;margin:5px 0 0}.example-button{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;background:transparent;border:0;color:var(--green);padding:8px 0;white-space:nowrap}.example-button .icon{width:17px;height:17px}.example-button:hover{text-decoration:underline}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 14px}.form-field{min-width:0}.form-field.wide{grid-column:1/-1}label{display:block;font-size:.875rem;font-weight:600;line-height:1.5;margin:0 0 7px}textarea,input:not([type=checkbox]),select{display:block;width:100%;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:9px;padding:11px 12px;color:var(--ink);font-size:1rem;line-height:1.5;transition:border-color .15s,box-shadow .15s}textarea{min-height:125px;resize:vertical}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}select{appearance:none;padding-right:35px;cursor:pointer}.select-wrap{position:relative}.select-wrap:after{content:'';position:absolute;width:7px;height:7px;right:15px;top:19px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:rotate(45deg);pointer-events:none}textarea:focus,input:not([type=checkbox]):focus,select:focus{border-color:var(--focus);outline:2px solid color-mix(in srgb,var(--focus) 18%,transparent);outline-offset:0}.check{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:1px 0 0;font-size:.875rem;font-weight:400;cursor:pointer}.check input{width:17px;height:17px;accent-color:var(--green);margin:0;flex-shrink:0}.form-note{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.8125rem;line-height:1.5;margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}.note-mark{font:600 .75rem/16px Figtree,sans-serif;border:1px solid var(--muted);border-radius:50%;width:17px;height:17px;text-align:center;flex-shrink:0;margin-top:1px}
.output-panel{background:var(--preview);color:var(--preview-text);border-radius:16px;box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;min-width:0;min-height:560px}.output-head{padding-bottom:20px;border-bottom:1px solid #ffffff20;margin-bottom:20px;align-items:flex-end}.output-panel .step-label{color:color-mix(in srgb,var(--brand-pale) 74%,var(--brand-green))}.output-state{font-size:.75rem;line-height:1.4;color:color-mix(in srgb,var(--brand-pale) 85%,var(--brand-green));background:#ffffff0a;border:1px solid #ffffff24;padding:5px 9px;border-radius:5px;text-align:center;max-width:160px}.output-state.is-ready{color:var(--lime);border-color:#c1ef0c4d;background:#c1ef0c0a}.prompt-scroll{flex:1;min-height:340px;max-height:640px;overflow-y:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand-pale) 45%,var(--brand-green)) transparent}.empty{display:flex;min-height:340px;justify-content:center;align-items:center;text-align:center;flex-direction:column;padding:35px 30px}.empty-mark{width:60px;height:60px;border:1px solid #c1ef0c47;border-radius:15px;display:grid;place-items:center;color:var(--lime);background:#c1ef0c07;margin-bottom:24px}.empty-mark .icon{width:28px;height:28px;stroke-width:1.6}.empty h3{font:500 1.4rem/1.35 'Bricolage Grotesque',sans-serif;margin:0 0 10px;max-width:250px;letter-spacing:-.02em}.empty p{font-size:.9375rem;line-height:1.6;max-width:285px;color:color-mix(in srgb,var(--brand-pale) 74%,var(--brand-green));margin:0}.empty-hint{color:color-mix(in srgb,var(--brand-pale) 85%,var(--brand-green))!important;font-size:.8125rem!important;margin-top:24px!important;border-top:1px solid #ffffff20;padding-top:20px}.prompt-block{margin-bottom:19px}.prompt-block:last-child{margin-bottom:0}.block-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}.block-number{display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff09;border:1px solid #ffffff21;border-radius:5px;font-size:.75rem;line-height:1;color:color-mix(in srgb,var(--brand-pale) 74%,var(--brand-green))}.block-head h3{font-size:.8125rem;font-weight:600;color:var(--lime);margin:0;letter-spacing:.04em}.block-text{font-size:.9375rem;line-height:1.65;margin:0;padding-left:31px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--brand-pale)}.output-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #ffffff20;padding-top:21px;margin-top:23px}.output-actions p{font-size:.875rem;font-weight:500;line-height:1.5;margin:0}.output-actions p>span{font-size:.8125rem;color:color-mix(in srgb,var(--brand-pale) 74%,var(--brand-green));font-weight:400}.copy-button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--lime);color:var(--brand-green);border:1px solid var(--lime);font-size:.9375rem;font-weight:700;padding:12px 18px;border-radius:9px;white-space:nowrap}.copy-button:disabled{background:#ffffff0d;border-color:#ffffff24;color:color-mix(in srgb,var(--brand-pale) 65%,var(--brand-green))}.copy-button:not(:disabled):hover{background:var(--brand-bright)}.copy-button:focus-visible{outline-color:var(--lime)}.below-workspace{display:flex;justify-content:space-between;gap:16px;padding:20px 2px 28px;color:var(--muted);font-size:.8125rem}.below-workspace p{margin:0}.below-workspace strong{font-weight:500;color:var(--ink);margin-left:8px}.below-workspace span{margin-left:8px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:.8125rem}footer p{margin:0}footer strong{color:var(--ink);font-weight:600}.noscript-note{padding:20px;text-align:center}
@media(min-width:1400px){.wrap{padding-top:48px}.intro{margin-bottom:36px}.tabs{margin-bottom:28px}.input-panel,.output-panel{padding:28px}}
@media(max-width:1120px){.tab-description{display:none}.tab{justify-content:center}.intro{gap:25px}.intro p{max-width:370px}.desktop-break{display:none}.workspace{gap:18px}.input-panel,.output-panel{padding:22px}.output-state{max-width:115px}.example-button{font-size:.8125rem;gap:4px}.panel-head{gap:8px}}
@media(max-width:800px){.wrap{padding-top:28px}.intro{display:block;margin-bottom:24px}.intro p{max-width:520px;margin-top:13px}.workspace{grid-template-columns:minmax(0,1fr)}.output-panel{min-height:490px}.prompt-scroll{max-height:none}.empty{min-height:310px}.topbar-label{display:none}.intro h1{font-size:2.8rem}.output-state{max-width:160px}.below-workspace{padding-bottom:24px}.below-workspace>p:last-child{display:none}footer{flex-direction:column;gap:8px}.output-head{align-items:center}}
@media(max-width:480px){.topbar{padding:0 18px}.topbar-inner{min-height:78px;padding:10px 0}.wrap{padding:24px 16px 24px}.brand{width:184px}.intro h1{font-size:2.4rem}.eyebrow{letter-spacing:.11em;font-size:.75rem}.intro p{font-size:.9375rem}.tabs{gap:3px;padding:5px;margin-bottom:18px;border-radius:11px}.tab{flex-direction:column;gap:7px;padding:9px 3px;font-size:.875rem}.tab .icon{width:18px;height:18px}.input-panel,.output-panel{padding:20px 18px;border-radius:13px}.panel-head{flex-wrap:wrap;gap:12px;margin-bottom:20px}.panel-head h2{font-size:1.25rem}.example-button{font-size:.8125rem}.form-grid{gap:16px 10px}.form-field:not(.wide){grid-column:1/-1}textarea{min-height:112px}.check{font-size:.875rem}.output-state{font-size:.75rem}.output-actions{gap:12px}.copy-button{padding:11px 14px;font-size:.875rem}.output-actions p{font-size:.8125rem}.output-actions p>span{font-size:.75rem}.empty{padding:25px 12px;min-height:310px}.below-workspace{font-size:.75rem;line-height:1.8}.below-workspace strong,.below-workspace span{margin-left:5px}footer{font-size:.8125rem;line-height:1.7}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}