:root{color-scheme:light;--bg:#f4f6ff;--grid:rgba(70,77,143,.055);--card:#fff;--soft:#eef1fb;--ink:#15182f;--muted:#69708e;--line:#dfe3f2;--primary:#4b4df6;--accent:#00a7c5;--coral:#f04f74;--shadow:0 26px 80px rgba(43,48,103,.14)}
[data-color=light][data-palette=jade]{--bg:#f1f7f4;--grid:rgba(35,105,83,.055);--soft:#e5f1eb;--ink:#122821;--muted:#607d74;--line:#d5e5df;--primary:#147d67;--accent:#168aa0}
[data-color=light][data-palette=sunrise]{--bg:#fff8f1;--grid:rgba(164,83,52,.05);--soft:#f8eadf;--ink:#30201a;--muted:#816b61;--line:#eadbd1;--primary:#c84f45;--accent:#178fa2}
[data-color=dark]{color-scheme:dark;--bg:#17191d;--grid:rgba(255,255,255,.035);--card:#202329;--soft:#292d34;--ink:#f5f4f1;--muted:#aaa9a5;--line:#383c43;--primary:#8b8cff;--accent:#54cadb;--coral:#f27b91;--shadow:0 26px 80px rgba(0,0,0,.32)}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-height:100vh;color:var(--ink);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:34px 34px;font:15px/1.65 "Segoe UI Variable Text","Microsoft YaHei UI",system-ui,sans-serif;transition:background .2s,color .2s}body:before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--primary) 0 34%,var(--accent) 34% 58%,var(--coral) 58% 80%,#eaa72f 80%)}a{color:inherit;text-decoration:none}.topbar{max-width:1220px;margin:auto;min-height:86px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:44px;height:44px}.brand span{display:grid}.brand b{font-size:16px;letter-spacing:.08em}.brand small{color:var(--muted)}.themes{display:flex;gap:10px}.themes label,.themes button{min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 8px 24px rgba(25,29,70,.06)}.themes label{display:flex;align-items:center;gap:8px;padding:0 10px}.themes label span{font-size:12px;color:var(--muted)}.themes select{border:0;background:transparent;color:var(--ink);font-weight:700}.themes button{padding:0 15px;font-weight:700;cursor:pointer}main{max-width:1220px;margin:auto;padding:0 22px 54px}.hero{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:48px;min-height:520px;padding:58px;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}.hero:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--coral),#eaa72f)}.copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.12em}.eyebrow i{width:28px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--accent))}.copy h1{margin:24px 0 18px;font-size:clamp(42px,5vw,68px);line-height:1.08;letter-spacing:-.045em}.copy h1 em{color:var(--primary);font-style:normal}.copy>p{max-width:520px;color:var(--muted);font-size:18px}.actions{display:flex;gap:12px;margin:30px 0}.actions a{padding:12px 19px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:800}.actions .primary{border-color:var(--primary);background:var(--primary);color:#fff}.notice{display:grid;gap:1px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 12px 12px 0}.notice span{color:var(--muted);font-size:13px}.preview{position:relative}.preview:before{content:"";position:absolute;inset:8% -5% -8% 5%;background:var(--primary);opacity:.16;filter:blur(40px)}.preview img{position:relative;display:block;width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 50px rgba(21,24,47,.18)}.lab{margin-top:26px;padding:40px;border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:0 15px 55px rgba(25,29,70,.08)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px}.section-head span{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--primary)}.section-head h2{margin:5px 0 0;font-size:30px}.section-head p{max-width:520px;margin:0;color:var(--muted)}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.modes button{display:flex;align-items:center;gap:13px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer}.modes button>b{color:var(--primary);font-size:13px}.modes button>span{display:grid;font-weight:800}.modes small{color:var(--muted);font-weight:500}.modes button.active{border-color:var(--primary);background:var(--soft);box-shadow:inset 4px 0 var(--primary)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}.metrics article{display:grid;gap:5px;padding:22px;background:var(--card)}.metrics span,.metrics small{color:var(--muted)}.metrics strong{font-size:34px;line-height:1.1}.metrics .quality{color:#11836d}footer{max-width:1220px;margin:auto;padding:0 22px 28px;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:34px}.preview{order:-1}.section-head{display:block}.section-head p{margin-top:10px}.metrics{grid-template-columns:1fr 1fr}.modes{grid-template-columns:1fr}}
@media(max-width:580px){.topbar{align-items:flex-start}.brand small,.themes label span{display:none}.themes{gap:6px}.themes label,.themes button{min-height:38px}.hero{padding:26px 20px}.copy h1{font-size:40px}.lab{padding:26px 20px}.metrics{grid-template-columns:1fr}.actions{align-items:stretch}.actions a{flex:1;text-align:center}footer{display:grid;gap:4px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}