:root{--bg:#fff;--fg:#17202e;--muted:#697386;--line:#e6eaf0;--panel:#f5f7fa;--accent:#3182f6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px -apple-system,BlinkMacSystemFont,Inter,sans-serif}body.dark{--bg:#14171e;--fg:#eff2f8;--muted:#a0aabd;--line:#303742;--panel:#202631}a{color:var(--accent);text-decoration:none}header{height:72px;border-bottom:1px solid var(--line);position:sticky;top:0;display:flex;align-items:center;gap:32px;background:var(--bg);z-index:2;padding:0 28px}header>a{color:var(--fg);font-size:17px}header b{color:var(--accent);margin-right:8px}input,button,select{border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:var(--bg);color:var(--fg);font:inherit}header input{width:min(440px,45%);margin-left:auto}button{cursor:pointer}aside{position:fixed;top:72px;bottom:42px;width:230px;border-right:1px solid var(--line);padding:26px 20px;overflow:auto}nav h3{font-size:13px;margin:24px 10px 12px}nav a{display:block;color:var(--muted);padding:9px 12px;border-radius:5px}nav a.active{color:var(--accent);background:var(--panel);border-left:2px solid var(--accent)}main{margin-left:230px;max-width:1260px;padding:44px 58px 90px;min-height:calc(100vh - 72px)}h1{font-size:42px;letter-spacing:-1.5px;margin:0 0 16px}h2{font-size:21px;margin:32px 0 16px}p{line-height:1.8;color:var(--muted)}.controls{display:flex;gap:20px;margin:28px 0}label{font-size:12px;display:block}label select{display:block;margin-top:8px;min-width:180px}.palette{display:flex;gap:6px;overflow:auto;padding-bottom:12px}.swatch{flex:1;min-width:62px}.chip{height:58px;border-radius:4px;border:1px solid #80808020}.swatch b{display:block;margin-top:9px;font-size:12px}.swatch code{font-size:10px;color:var(--muted);display:block;margin-top:5px}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}td,th{text-align:left;padding:12px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{background:var(--panel)}pre{background:var(--panel);padding:18px;overflow:auto;line-height:1.6}article{padding-bottom:25px;border-bottom:1px solid var(--line)}.preview{max-width:100%;max-height:420px;background:var(--panel);border:1px solid var(--line);padding:20px}footer{position:fixed;bottom:0;left:0;right:0;padding:12px 28px;font-size:11px;color:var(--muted);background:var(--bg);border-top:1px solid var(--line)}footer code{margin-left:10px}@media(max-width:800px){header{padding:12px;gap:10px}header>a{font-size:13px}aside{position:static;width:auto;border-right:0;max-height:160px;border-bottom:1px solid var(--line);padding:10px}nav{display:flex;flex-wrap:wrap;align-items:center}nav h3{margin:8px}main{margin:0;padding:28px 18px 80px}h1{font-size:32px}.controls{flex-wrap:wrap}footer code{font-size:9px}}