:root{color-scheme:light;--ink: #17201d;--muted: #66706b;--line: #dfe4df;--paper: #fffdf8;--panel: #ffffff;--teal: #0f766e;--teal-dark: #0b4f4a;--coral: #df6248;--amber: #d99a28;--graphite: #25302d;--shadow: 0 18px 50px rgba(37, 48, 45, .12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#fbf7ef,#f5f7f3 54%,#eef4f1);color:var(--ink);overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding:24px}.topbar{align-items:center;display:grid;gap:14px;grid-template-columns:auto 1fr auto;margin:0 auto 18px;max-width:1440px}.brand-mark{align-items:center;background:var(--graphite);border-radius:8px;color:#fff;display:grid;font-weight:800;height:44px;justify-items:center;width:44px}.eyebrow{color:var(--teal);font-size:12px;font-weight:800;margin:0 0 4px;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.1;margin-bottom:6px}.topline{color:var(--muted);font-size:13px;font-weight:700;line-height:1.35;margin:0;max-width:680px}h2{font-size:15px;line-height:1.25;margin-bottom:0}h3{color:var(--graphite);font-size:13px;line-height:1.3;margin-bottom:0}.icon-button{align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--graphite);display:inline-flex;height:42px;justify-content:center;width:42px}.hero-grid{margin:0 auto;max-width:1440px}.workspace{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(420px,.95fr) minmax(460px,1.05fr)}.form-panel,.result-panel{background:#ffffffe0;border:1px solid rgba(223,228,223,.95);border-radius:8px;box-shadow:var(--shadow)}.form-panel{display:grid;gap:14px;padding:18px}.result-panel{overflow:hidden}.section-heading{align-items:center;color:var(--graphite);display:flex;gap:8px}.sample-picker{background:#f6f7f2;border:1px solid var(--line);border-radius:8px;display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px}.sample-picker button{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--graphite);display:grid;gap:3px;min-height:58px;min-width:0;padding:8px;text-align:left}.sample-picker button.active{background:#fff;border-color:var(--line);box-shadow:0 8px 20px #25302d14}.sample-picker strong,.sample-picker span{overflow-wrap:anywhere}.sample-picker strong{font-size:12px;line-height:1.2}.sample-picker span{color:var(--muted);font-size:11px;font-weight:700;line-height:1.25}.two-col,.three-col{display:grid;gap:12px}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}.field{display:grid;gap:6px}.field span{color:var(--muted);font-size:12px;font-weight:700}input,select,textarea{background:#fbfbf8;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-width:0;outline:none;padding:10px 12px;width:100%}textarea{line-height:1.45;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0f766e1f}.toggle-grid{display:grid;gap:8px;grid-template-columns:repeat(5,minmax(0,1fr))}.toggle{align-items:center;background:#f6f7f2;border:1px solid var(--line);border-radius:8px;display:flex;gap:8px;min-height:40px;padding:8px 10px}.toggle input{accent-color:var(--teal);width:auto}.toggle span{color:var(--ink);font-size:12px;font-weight:700}.hero-asset{aspect-ratio:16 / 7;display:block;object-fit:cover;width:100%}.score-row{align-items:center;background:var(--graphite);color:#fff;display:flex;justify-content:space-between;padding:18px}.score-row .eyebrow{color:#86ded1}.score-row strong{display:block;font-size:38px;line-height:1}.metric-grid{display:grid;gap:1px;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--line)}.metric{background:#fff;min-height:138px;padding:14px}.metric span{color:var(--muted);display:block;font-size:12px;font-weight:800;min-height:32px}.metric strong{display:block;font-size:26px;margin-bottom:10px}.metric p{color:var(--muted);font-size:12px;line-height:1.35;margin-bottom:0}.meter{background:#eef1ed;border-radius:999px;height:7px;margin-bottom:10px;overflow:hidden}.meter i{background:linear-gradient(90deg,var(--coral),var(--amber),var(--teal));display:block;height:100%}.tabs{background:#f7f7f2;border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px}.tabs button,.actions button{align-items:center;border-radius:8px;display:inline-flex;font-weight:800;gap:8px;justify-content:center}.tabs button{background:transparent;border:1px solid transparent;color:var(--muted);min-height:40px}.tabs button.active{background:#fff;border-color:var(--line);color:var(--teal-dark)}.output{padding:18px}.output ul{display:grid;gap:10px;list-style:none;margin:16px 0 0;padding:0}.output li{align-items:start;border-top:1px solid var(--line);color:var(--graphite);display:grid;font-size:14px;gap:10px;grid-template-columns:10px 1fr;line-height:1.45;padding-top:10px}.output li:before{background:var(--teal);border-radius:999px;content:"";height:7px;margin-top:7px;width:7px}.review-block{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.review-block ul{margin-top:10px}.actions{border-top:1px solid var(--line);display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 18px 18px}.actions button{background:var(--teal-dark);border:1px solid var(--teal-dark);color:#fff;min-height:44px}.actions button:last-child{background:#fff;color:var(--graphite)}.feedback-cta{align-items:center;background:#fbfbf8;border-top:1px solid var(--line);color:var(--graphite);display:flex;gap:10px;padding:14px 18px 18px;text-decoration:none}.feedback-cta strong{display:block;font-size:13px;line-height:1.25}.feedback-cta span{color:var(--muted);font-size:12px;font-weight:700;line-height:1.35}@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr)}}@media(max-width:760px){.shell{padding:14px}.topbar{grid-template-columns:auto 1fr;min-width:0;width:100%}.topbar>div{min-width:0}.topbar .icon-button{grid-column:1 / -1;justify-self:end}h1{font-size:24px;overflow-wrap:anywhere}.topline{font-size:12px;overflow-wrap:anywhere}.hero-grid,.workspace,.form-panel,.result-panel,.field{min-width:0;width:100%}.two-col,.three-col,.sample-picker,.toggle-grid,.metric-grid,.actions{grid-template-columns:1fr}.metric{min-height:auto}.metric span{min-height:0}}
