:root{--bg: #f6f1fb;--panel: #ffffff;--ink: #3a2a44;--muted: #8a7a98;--accent: #ff7aa8;--accent2: #7a9cff;--line: #ebe2f3;--radius: 14px;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0%,#ffe9f3 0,transparent 40%),radial-gradient(circle at 90% 10%,#e5ecff 0,transparent 45%),var(--bg);min-height:100vh}header{display:flex;align-items:center;gap:12px;padding:14px 24px 4px}header h1{font-size:20px;margin:0;letter-spacing:1px}header small{color:var(--muted)}header .gh{margin-left:auto;display:inline-flex;color:var(--muted);transition:color .15s}header .gh:hover{color:var(--ink)}header .gh svg{width:22px;height:22px;fill:currentColor}main{display:grid;grid-template-columns:minmax(420px,600px) minmax(380px,1fr);gap:18px;padding:12px 24px 24px;align-items:start}.card{background:var(--panel);border-radius:var(--radius);box-shadow:0 6px 24px #7850a014;padding:14px}.stage canvas{width:100%;aspect-ratio:1;display:block;border-radius:12px;background:linear-gradient(#fdfbff,#efe8f7)}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.label{font-size:12px;color:var(--muted);min-width:44px}button,.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13px;transition:all .15s}button:hover{border-color:var(--accent)}button.active{background:var(--accent);border-color:var(--accent);color:#fff}button.primary{background:var(--accent2);color:#fff;border-color:var(--accent2)}.dpad{display:grid;grid-template-columns:repeat(3,44px);gap:4px}.dpad button{padding:6px 0;border-radius:10px;font-size:12px}.controls{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}.anims{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:220px}input[type=range]{accent-color:var(--accent)}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}.swatch.active{box-shadow:0 0 0 2px var(--accent)}.swatch.none{background:repeating-linear-gradient(45deg,#fff 0,#fff 4px,#eee 4px,#eee 8px)}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}.tabs button{font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;max-height:520px;overflow:auto;padding:2px}.item{border:2px solid var(--line);border-radius:12px;background:#fbf8fe;cursor:pointer;padding:4px 4px 6px;text-align:center;font-size:12px;transition:all .12s}.item:hover{border-color:#ffc2d8;transform:translateY(-1px)}.item.active{border-color:var(--accent);background:#fff0f6}.item canvas{width:100%;aspect-ratio:1;display:block}.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{border:none;border-radius:0}.hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}.style-row{margin-top:0}.catalog-summary{color:var(--muted);font-size:12px;line-height:1.7;margin:8px 0 12px}.card{min-width:0}button:focus-visible,input:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}button.item.active{color:var(--ink)}:root[data-style=guofeng]{--bg: #f3efe5;--panel: #fffdf8;--ink: #354b48;--muted: #66766e;--accent: #517e70;--accent2: #9b7149;--line: #e2dac9}:root[data-style=guofeng] body{background:var(--bg)}:root[data-style=guofeng] .stage canvas{background:linear-gradient(#fcfaf3,#e7ede3)}:root[data-style=guofeng] .item{background:#f8f5eb}:root[data-style=guofeng] .item.active{background:#eaf0e4}:root[data-style=guofeng] .item:hover{border-color:#a0b4a3}:root[data-style=aistory]{--bg: #eeeee4;--panel: #fbfaf3;--ink: #334438;--muted: #6b7566;--accent: #55714d;--accent2: #997344;--line: #d9d7c6}:root[data-style=aistory] body{background:var(--bg)}:root[data-style=aistory] .stage canvas{background:linear-gradient(#f8f6e9,#dce5d5)}:root[data-style=aistory] .item{background:#f4f3e9}:root[data-style=aistory] .item.active{background:#e3ead9}@media (max-width: 980px){main{grid-template-columns:minmax(0,1fr)}}@media (max-width: 480px){header{flex-wrap:wrap;padding:16px 12px 4px;gap:4px}header h1{font-size:18px}header small{font-size:11px}main{padding:8px 12px 16px;gap:12px}.card{padding:10px}.controls{gap:8px}.anims{min-width:0}.controls>div:last-child{min-width:170px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.item{padding:4px 2px;font-size:11px}#speed{width:100px}}