:root{--ink:#133e38;--muted:#52665f;--paper:#f4f5ed;--line:#d4dfd3;--accent:#126958}*{box-sizing:border-box}html,body{margin:0;max-width:100%;color:var(--ink);background:var(--paper);font:16px/1.6 system-ui,sans-serif}body{overflow-wrap:anywhere}.lab-shell{max-width:1500px;padding:22px}.hero{background:#073b35;color:#fffbea;border-radius:20px;padding:30px;margin-bottom:18px;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px}.eyebrow{font-size:12px;letter-spacing:.14em;color:#bddec7;font-weight:700}.hero h1{font-size:clamp(27px,4vw,43px);line-height:1.12;max-width:850px;margin:14px 0}.hero p{max-width:850px;margin-bottom:16px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{border:1px solid #6f9e87;border-radius:99px;padding:4px 10px;font-size:12px}.lab-card{border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px;background:#fffef8;box-shadow:0 4px 15px #0c362308}.lab-card h2{font-size:20px;font-weight:720;margin:0 0 16px}.form-label{font-size:14px;font-weight:650}.form-control,.form-select{border-color:#afc4b9;min-height:46px;color:var(--ink);background-color:#fff}.form-select{font-size:14px;white-space:normal;padding-right:34px}.code-editor{font:14px/1.65 ui-monospace,Consolas,monospace;min-height:265px;resize:vertical;tab-size:2}.toolbar{display:flex;flex-wrap:wrap;gap:9px}.btn{min-height:44px;font-size:13px;font-weight:650;white-space:normal;display:inline-flex;align-items:center;justify-content:center}.btn-primary{--bs-btn-bg:#126958;--bs-btn-border-color:#126958;--bs-btn-hover-bg:#094f43;--bs-btn-hover-border-color:#094f43;--bs-btn-active-bg:#083f37}.btn-outline-dark{--bs-btn-color:#174d40;--bs-btn-border-color:#8eac9f;--bs-btn-hover-bg:#174d40;--bs-btn-hover-border-color:#174d40}.btn-dark{--bs-btn-bg:#174d40;--bs-btn-border-color:#174d40}.purpose{font-weight:600;margin:16px 0 6px}.small{font-size:13px;line-height:1.6}.muted{color:var(--muted)}.status{padding:12px;background:#eaf4e7;border-radius:9px;margin:16px 0 10px;min-height:48px;font-weight:600;font-size:14px}.status.error{background:#fff0e7;color:#833318}.status.pending{background:#f6efcc}.view-switch{display:flex;gap:8px;margin:0 0 10px}.preview{width:100%;height:330px;border:1px solid #b8cdbf;border-radius:9px;background:white}.html-output{height:330px;overflow:auto;margin:0 0 8px;padding:18px;background:#123d35;color:#eff8e3;border-radius:9px;font:13px/1.6 Consolas,monospace;white-space:pre}.html-output code{white-space:pre}.source-card{margin-top:18px}a{color:#0a6652}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,pre:focus-visible{outline:3px solid #b77500!important;outline-offset:3px}#bytes.over{color:#a52f1f;font-weight:700}[hidden]{display:none!important}@media(max-width:600px){.lab-shell{padding:10px}.hero{padding:22px 17px;border-radius:14px}.lab-card{padding:16px 13px;border-radius:12px}.hero p{font-size:14px}.toolbar .btn{flex:1 1 120px}.code-editor{font-size:13px;min-height:230px}.preview,.html-output{height:310px}.form-select{font-size:13px}.lab-card h2{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:640px){.form-control,.form-select,.code-editor{font-size:16px}}