:root{color-scheme:light;font-family:Inter,system-ui,sans-serif;--bg:#eef1f4;--panel:#fff;--text:#171b20;--muted:#68737e;--line:#cbd2d8;--accent:#286da8}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f5f7f8,#e9edf0);color:var(--text);min-height:100vh}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.top,.wrap,footer{width:min(1120px,calc(100% - 40px));margin:auto}.top{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:700}.brand span{color:var(--accent)}.back{font-size:13px;font-weight:650}.intro{padding:54px 0 28px}.kicker{font-size:11px;letter-spacing:.1em;color:var(--muted)}h1{font-size:clamp(42px,7vw,72px);line-height:1;letter-spacing:-.065em;margin:10px 0 15px}h2{font-size:18px;margin:0 0 16px}.intro p{color:var(--muted);max-width:650px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 18px 45px #58677518}.field{display:grid;gap:8px;margin-bottom:16px}.field label,.label{font-size:12px;font-weight:650;color:#4d5964}input,textarea,select{width:100%;border:1px solid #c6ced5;border-radius:10px;background:#f7f9fa;color:var(--text);padding:11px 12px}input[type=color]{height:52px;padding:4px;cursor:pointer}textarea{resize:vertical;min-height:310px;font-family:'SFMono-Regular',Consolas,monospace;font-size:13px;line-height:1.55}.actions{display:flex;flex-wrap:wrap;gap:9px}.action{border:0;border-radius:10px;background:#26313a;color:#fff;padding:10px 14px;font-weight:650;cursor:pointer}.action.secondary{background:#e6eaee;color:#28323b;border:1px solid #ccd3da}.action:hover{filter:brightness(1.08)}.message{min-height:24px;margin:15px 0 0;color:var(--muted);font-size:12px}.data-preferences{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.data-preferences summary{font-size:12px;font-weight:650;cursor:pointer}.data-preferences p,.check{font-size:11px;color:var(--muted)}.check{display:flex;align-items:center;gap:8px;margin-top:12px}.check input{width:auto}.ad-slot{display:grid;place-items:center;min-height:92px;border:1px dashed #bcc5cd;border-radius:14px;color:#8a949e;margin:28px 0;font-size:10px;letter-spacing:.1em;text-transform:uppercase}footer{border-top:1px solid var(--line);padding:24px 0 35px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.value{background:#f2f5f7;border:1px solid #d4dae0;border-radius:12px;padding:13px}.value small{display:block;color:var(--muted);margin-bottom:5px}.value strong{font-size:13px;word-break:break-all}.swatch{height:190px;border-radius:16px;border:1px solid #0002;margin-bottom:18px}.palette{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;border-radius:14px;border:1px solid #ccd3da}.palette button{border:0;min-height:92px;cursor:pointer;position:relative}.palette span{position:absolute;inset:auto 4px 5px;font-size:9px;background:#fffbdc;color:#111;border-radius:5px;padding:3px}.contrast-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.contrast-card>div{border:1px solid #d0d7dd;border-radius:12px;padding:15px}.contrast-card strong{display:block;font-size:22px}.json-output{white-space:pre-wrap;word-break:break-word;min-height:310px;margin:0;background:#172028;color:#dcecf4;border-radius:12px;padding:16px;overflow:auto;font:13px/1.55 'SFMono-Regular',Consolas,monospace}.stats{display:flex;gap:18px;flex-wrap:wrap;margin:15px 0;color:var(--muted);font-size:11px}@media(max-width:760px){.workspace{grid-template-columns:1fr}.top,.wrap,footer{width:calc(100% - 28px)}.intro{padding-top:38px}.value-grid{grid-template-columns:1fr}.contrast-card{grid-template-columns:1fr}.palette{grid-template-columns:repeat(5,minmax(58px,1fr));overflow-x:auto}}