.ws-tabs{display:flex;gap:4px;margin:0 0 28px;padding:3px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-1);width:max-content;max-width:100%}
.ws-tabs a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:8px;font-size:14px;color:var(--fg-2);text-decoration:none;transition:background .2s,color .2s}
.ws-tabs a:hover{color:var(--fg)}
.ws-tabs a[aria-current=page]{background:var(--fg);color:var(--bg);box-shadow:inset 0 1px 0 #fff}
.beta{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;border:1px solid currentColor;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}

body.styles-on #list,body.styles-on #createForm,body.styles-on #detail,body.styles-on #workspace .wrap>.ws-head{display:none!important}
.st-create{display:grid;gap:14px}
.st-create .h3{margin-bottom:2px}
.st-create textarea,.st-create input[type=file]{border-radius:10px;border:1px solid var(--line-2);background:var(--bg-1);padding:12px 14px;font:400 15px/1.5 var(--mono);color:var(--fg);outline:0;resize:vertical;width:100%}
.st-create input[type=file]{font-family:var(--sans);font-size:14px;padding:10px 12px}
.st-create textarea:focus,.st-create input[type=file]:focus{border-color:var(--line-3);box-shadow:0 0 0 4px rgb(var(--ink) / .07)}
.st-create .field-hint{margin-top:-8px}
.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.style-card h3{min-height:0}
.st-frames{display:flex;gap:6px;overflow:hidden;border-radius:10px}
.st-frames img{height:96px;width:auto;flex:none;border-radius:8px;border:1px solid var(--line);background:#000;object-fit:cover}
.st-frames.big img{height:150px}
#stMine{margin-top:36px}
.st-make{margin-top:36px}
.st-make>summary{position:relative;display:grid;gap:4px;padding:18px 52px 18px 20px;cursor:pointer;list-style:none}
.st-make>summary::-webkit-details-marker{display:none}
.st-make>summary::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);transform:translateY(-70%) rotate(45deg)}
.st-make[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.st-make>summary .dim{font-size:14px}
.st-make[open]>summary{border-bottom:1px solid var(--line)}
.st-make .st-create{padding:20px}
.st-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.st-presets li{display:grid;gap:4px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgb(var(--ink) / .02)}
.st-presets b{font-weight:550;font-size:14.5px}
.st-presets span{font-size:13px;color:var(--fg-3);line-height:1.45}

.st-card{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.st-main{padding:20px;display:grid;gap:18px;min-width:0}
.st-summary{font-size:16px;line-height:1.6;color:var(--fg)}
.traits{margin:0;border-top:1px solid var(--line)}
.traits div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.traits dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);padding-top:2px}
.traits dd{margin:0;font-size:14.5px;color:var(--fg-2);position:relative;padding-right:36px}
.basis{position:absolute;right:0;top:2px;font-size:10px;padding:1px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--fg-3);text-decoration:none;cursor:help}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);border:1px solid var(--line-3);margin-right:8px;vertical-align:-1px}
.st-rule{font-size:13.5px;color:var(--fg-3);padding:12px 14px;border-radius:10px;border:1px dashed var(--line-2)}
.st-notes{font-size:13px;color:var(--fg-3)}
.st-notes summary{cursor:pointer}
.st-notes li{margin-top:6px}
.st-side{padding:20px;display:grid;gap:12px;position:sticky;top:84px}
.st-side>p{font-size:14px;color:var(--fg-2)}
.st-use-note{font-size:13.5px;color:var(--fg)}
.st-use-note:empty{display:none}
.st-stats{margin:6px 0 0;display:grid;gap:6px;font-size:12px}
.st-stats div{display:flex;justify-content:space-between;color:var(--fg-3)}
.st-stats dd{margin:0;color:var(--fg-2)}
.st-del{color:var(--fg-3);font-size:13px;justify-self:start}
.st-actions{display:flex;gap:16px;align-items:center}
.style-pick{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--fg-3)}
.style-pick label{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.style-pick select{height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--fg);padding:0 10px;font:inherit;font-size:14px;max-width:min(320px,60vw)}
#createForm:has(input[name=mode][value=live]:checked) .style-pick{display:none}
@media (max-width:860px){.st-card{grid-template-columns:1fr}.st-side{position:static}}
@media (max-width:560px){.traits div{grid-template-columns:1fr;gap:4px}.st-frames.big img{height:120px}}