@import './fonts.css';
@import './tokens.css';
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 78% 8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 27rem),var(--bg);color:var(--ink);font-family:var(--font-body-stack);line-height:1.5}button,input,textarea,select{font:inherit;color:inherit}button,input,textarea,select{border:1px solid var(--line);background:var(--surface);border-radius:10px}button{min-height:44px;cursor:pointer;padding:.65rem .9rem}input,select,textarea{width:100%;padding:.7rem}textarea{resize:vertical}label,legend{font-size:.78rem;color:var(--muted);letter-spacing:.02em}label,.field{display:grid;gap:.4rem}fieldset{padding:0;border:0;margin:0}a{color:inherit}h1,h2{font-family:var(--font-display-stack);line-height:1.05;margin:0}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}footer{font-size:.78rem;padding:1.5rem;text-align:center;color:var(--muted)}footer a{text-decoration:none}::selection{background:var(--accent);color:var(--accent-ink)}[hidden]{display:none!important}
#workspace{max-width:82rem;margin:auto;padding:clamp(1rem,3vw,2.5rem);min-height:calc(100vh - 4rem)}.topbar{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:1.3rem}.eyebrow{margin:0 0 .3rem;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--muted)}h1{font-size:clamp(2.5rem,7vw,5.4rem)}h1 span{color:var(--accent)}.icon-button{border-radius:50%;width:44px;padding:0}.bench{display:grid;grid-template-columns:minmax(16rem,22rem) 1fr;gap:clamp(1rem,3vw,2rem);margin-top:2rem}.controls{display:grid;gap:1rem;align-content:start;padding:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.control-head,.output-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}.control-head strong{color:var(--accent);font:600 .8rem var(--font-display-stack)}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.4rem}.tab{border-color:transparent;color:var(--muted)}.tab.active{background:var(--accent);color:var(--accent-ink)}.two{display:grid;grid-template-columns:1.4fr .8fr;gap:.6rem}.check{display:flex;align-items:center;gap:.6rem;min-height:30px;color:var(--ink)}.check input{width:18px;height:18px;accent-color:var(--accent)}.ruler{padding:.75rem;background:var(--bg);border-radius:10px}.ruler span{display:block;color:var(--muted);font-size:.72rem;margin-bottom:.6rem}.ruler i{display:block;height:5px;border-radius:9px;background:var(--accent);transition:width .3s ease}.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.output-panel{min-width:0;align-self:start;background:color-mix(in srgb,var(--surface) 87%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.2rem,3vw,2rem);box-shadow:0 24px 80px color-mix(in srgb,var(--bg) 62%,transparent)}.output-head{border-bottom:1px solid var(--line);padding-bottom:1rem}.output-head h2{font-size:clamp(1.5rem,4vw,2.5rem)}#output{min-height:24rem;margin:0;padding:clamp(1rem,3vw,2rem) 0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 clamp(1rem,2vw,1.25rem)/1.7 var(--font-body-stack);color:var(--ink)}.status{color:var(--accent);font-size:.8rem}.source-note{border-top:1px solid var(--line);padding-top:1rem;color:var(--muted);font-size:.76rem;max-width:70ch}.skip-link{position:absolute;top:0;left:1rem;transform:translateY(-200%);z-index:10}.skip-link:focus{transform:none}
@media(max-width:760px){.bench{grid-template-columns:1fr}.output-panel{order:-1}#output{min-height:14rem}.controls{padding:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}