:root{--bg:#180a0c;--panel:#1e060a;--well:#300e12;--gold:#deb25c;--gold-rgb:222, 178, 92;--cream:#f3e4c4;--muted:#c8beaf;--accent:#faa200;--accent-hi:#ffbb3d}html,body{background:var(--bg);color:#fff;margin:0;font-family:Montserrat,sans-serif}button,input{font-family:inherit}button{cursor:pointer;border:0}input[type=range]{accent-color:var(--gold);width:100%;margin:0}input[type=checkbox]{accent-color:var(--gold)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{flex-direction:column;min-height:100vh;display:flex}header{background:var(--panel);box-shadow:inset 0 -1.5px 0 rgba(var(--gold-rgb), .45);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;display:flex}.brand{letter-spacing:2px;color:var(--gold);font-family:Shojumaru,serif;font-size:24px}.hint{color:var(--muted);font-size:13px;font-weight:600}.body{flex-wrap:wrap;flex:1;align-items:flex-start;display:flex}main{flex:520px;min-width:0;height:calc(100vh - 60px);min-height:420px;display:flex;position:sticky;top:0}.stage{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:1;display:flex}.stage:active{cursor:grabbing}.views{flex-wrap:wrap;gap:6px;display:flex;position:absolute;bottom:18px;left:20px}aside{background:var(--panel);min-width:290px;box-shadow:inset 1.5px 0 0 rgba(var(--gold-rgb), .45);box-sizing:border-box;flex-direction:column;flex:0 340px;gap:24px;min-height:calc(100vh - 60px);padding:22px;display:flex}section{flex-direction:column;gap:10px;display:flex}h2{letter-spacing:1.5px;color:var(--muted);margin:0;font-size:12px;font-weight:800}.row{justify-content:space-between;align-items:center;gap:10px;display:flex}.note,.slider{color:var(--muted);font-size:12px;font-weight:700}.slider{flex-direction:column;gap:10px;display:flex}.slider b{color:var(--cream);font-weight:700}.size{color:var(--muted);font-size:12px}.check{color:var(--cream);cursor:pointer;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.pill{color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb), .6);cursor:pointer;text-align:center;background:#1e060ad9;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}.pill:hover{background:var(--well)}.pill.ghost{color:var(--muted);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb), .3);background:0 0}.pill.big{background:0 0;padding:12px;font-size:14px}.pill.big:hover{background:var(--well)}.logo-row{gap:8px;display:flex}.logo-row label{background:0 0;flex:1;padding:10px}.logo-row button{padding:10px 14px}.seg{background:var(--well);border-radius:10px;gap:4px;padding:3px;display:grid}.seg button{color:var(--cream);background:0 0;border-radius:8px;padding:8px 0;font-size:12px;font-weight:700}.seg button.small{font-size:11px}.seg button[aria-pressed=true]{background:var(--accent);color:#000}.styles{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.styles button{box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb), .25);background:#2a0c10;border-radius:10px;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 6px;display:flex}.styles button[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--accent);background:#3c1216}.styles svg{display:block}.styles span{color:var(--cream);font-size:10px;font-weight:700}.swatches{flex-wrap:wrap;gap:9px;display:flex}.swatches button{border:2px solid var(--panel);width:30px;height:30px;box-shadow:0 0 0 2px rgba(var(--gold-rgb), .3);border-radius:50%}.swatches.square button{border-radius:6px;width:28px;height:28px}.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.value{background:var(--well);color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(var(--gold-rgb), .5);border:0;border-radius:8px;outline:none;padding:8px 12px;font-family:Shojumaru,serif;font-size:20px}.num{background:var(--well);width:96px;color:var(--cream);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb), .5);border:0;border-radius:6px;outline:none;padding:6px 8px;font-size:13px;font-weight:700}.value:focus-visible,.num:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}.presets{flex-wrap:wrap;gap:6px;display:flex}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.chipbtn{background:rgba(var(--gold-rgb), .1);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb), .4);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}.steps .chipbtn{border-radius:8px;padding:8px 0}.chipbtn:hover{background:rgba(var(--gold-rgb), .22)}.primary{background:var(--accent);color:#000;border-radius:999px;margin-top:4px;padding:13px;font-size:15px;font-weight:800}.primary:hover{background:var(--accent-hi)}nav{background:var(--well);border-radius:999px;gap:4px;padding:3px;display:flex}nav a{color:var(--cream);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;text-decoration:none}nav a:hover{background:rgba(var(--gold-rgb), .15)}nav a[aria-current=page]{background:var(--accent);color:#000}.chipbtn[aria-pressed=true]{background:var(--accent);color:#000;box-shadow:none}.grid7{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;display:grid}.grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;display:grid}.grid7 .chipbtn,.grid4 .chipbtn{border-radius:8px;padding:8px 0}.chipbtn.suit{font-size:18px;line-height:1}input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:6px;width:44px;height:28px;padding:0}button:disabled{opacity:.4;cursor:default}.hand{flex-direction:column;gap:8px;display:flex}