:root{color-scheme:dark;--gold:#e9c789;--cream:#f8eedc;--muted:#a4b4a2;--line:rgba(218,195,141,.2);--card-width:clamp(36px,8.95vw,126px);--card-height:calc(var(--card-width)*1.39);--overlap:calc(var(--card-width)*.255);--red:#ab332c;--ink:#242921;--serif:'Noto Serif SC','Songti SC',SimSun,serif}
*{box-sizing:border-box}body{margin:0;background:#062c20;color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;min-width:320px}.felt{position:fixed;inset:0;background:url('./assets/felt-green.png') center/cover no-repeat;z-index:-1;transition:filter .5s}body[data-theme=blue] .felt{filter:hue-rotate(64deg) saturate(.64)}body[data-theme=brown] .felt{filter:hue-rotate(278deg) saturate(.48)}body[data-theme=blue]{--muted:#acb8c5}body[data-theme=brown]{--muted:#c1b1a1}.app{max-width:1536px;padding:0 48px;margin:auto}.header{height:126px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:17px;align-items:center;color:var(--gold)}.brand>svg{width:37px;height:48px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}h1{font-family:var(--serif);font-size:31px;font-weight:500;letter-spacing:4px;margin:0 0 1px}.brand span{font-family:Georgia,serif;font-size:12px;letter-spacing:4px}.preview-label{font-size:12px;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:10px}.preview-label>span{height:5px;width:5px;border-radius:50%;background:var(--gold)}.table{max-width:1190px;margin:31px auto 0}.table-meta{display:flex;justify-content:space-between;font-size:13px;color:#d6d6bb;letter-spacing:1px;margin-bottom:22px}.meta-divider{margin:0 16px;color:#69856c}.top-piles{display:flex;justify-content:space-between;gap:50px;margin:0 0 27px}.pile-group{width:46%;display:flex;flex-direction:column;align-items:center}.slots{width:100%;display:flex;justify-content:space-between;gap:10px}.slot{width:var(--card-width);height:var(--card-height);flex-shrink:0;border:1px solid rgba(216,187,118,.36);border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 2px 7px #00170d22;background:#00180e0e}.slot>svg{width:37%;height:37%;fill:#ddc68c;opacity:.21}.slot.free::after{content:'＋';font-size:23px;color:#d2c59b;opacity:.18;font-weight:200}.group-label{margin-top:14px;color:#c4ba8c;font-size:11px;letter-spacing:4px}.tableau{display:grid;grid-template-columns:repeat(8,var(--card-width));justify-content:space-between;min-height:calc(var(--card-height) + var(--overlap)*6)}.column{position:relative;height:calc(var(--card-height) + var(--overlap)*6)}.card{position:absolute;top:calc(var(--index)*var(--overlap));width:var(--card-width);height:var(--card-height);border-radius:7px;border:1px solid #ddcfb6;background:linear-gradient(115deg,#fff9ed,#f8efde 65%,#f5e9d3);color:var(--ink);box-shadow:0 1px 1px #15221440,0 3px 5px #00150d30,inset 0 0 0 1px #ffffff55;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .16s,box-shadow .16s,outline .16s;padding:0;text-align:left;appearance:none;font-family:Georgia,'Times New Roman',serif}.card.red{color:var(--red)}.corner{position:absolute;left:8%;top:3%;display:flex;align-items:center;gap:5px;font-size:calc(var(--card-width)*.215);line-height:1;font-weight:400;letter-spacing:-1px}.corner svg{height:calc(var(--card-width)*.13);width:calc(var(--card-width)*.13);fill:currentColor}.card .center-suit{position:absolute;width:43%;height:43%;top:31%;left:28.5%;fill:currentColor}.card .bottom-corner{left:auto;top:auto;right:8%;bottom:6%;transform:rotate(180deg);font-size:calc(var(--card-width)*.17);opacity:.85}.bottom-corner svg{height:calc(var(--card-width)*.105);width:calc(var(--card-width)*.105)}.card:hover{transform:translateY(-5px);box-shadow:0 6px 15px #00190f66}.card.selected{outline:2px solid #efca75;outline-offset:2px;transform:translateY(-7px);box-shadow:0 0 22px #e9ca6c25,0 6px 15px #00190f66}.card:focus-visible{outline:3px solid #f5cf77;outline-offset:2px}.card:not(:last-child) .center-suit,.card:not(:last-child) .bottom-corner{visibility:hidden}.appearance{text-align:center;margin:44px 0 40px}.appearance p{font-family:var(--serif);color:#dacead;font-size:16px;font-weight:400;letter-spacing:3px;margin:0 0 22px}.theme-picker{display:flex;justify-content:center;gap:10px}.theme-picker button{border:1px solid rgba(222,201,153,.22);background:#05251940;color:#bfc5ae;border-radius:6px;padding:12px 20px;display:flex;align-items:center;gap:10px;font:12px -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;letter-spacing:.7px;cursor:pointer;transition:background .2s,border-color .2s}.theme-picker button:hover{background:#e9c78912;border-color:#d4b77780}.theme-picker button[aria-pressed=true]{background:#e5cb9312;color:#f0ddb6;border-color:#d4b77799}.theme-picker button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.swatch{height:12px;width:12px;border:1px solid #ffffff30;border-radius:50%}.green{background:#32664c}.blue{background:#3f586f}.brown{background:#82634e}.preview-note{display:block;margin-top:19px;font-size:10px;letter-spacing:1px;color:var(--muted)}footer{padding:22px 0 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1px}.footer-dot{padding:0 10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1400px){.table{margin-top:36px}.appearance{margin-top:50px}}
@media(max-width:1000px){.app{padding:0 28px}.header{height:100px}.top-piles{gap:28px}.pile-group{width:47%}.table{margin-top:26px}.tableau{margin-top:4px}.appearance{margin-top:36px}.slot{border-radius:6px}.card{border-radius:5px}.corner{gap:3px}.preview-label{font-size:10px;letter-spacing:.5px}}
@media(max-width:600px){:root{--card-width:calc((100vw - 42px)/8);--overlap:calc(var(--card-width)*.43);--card-height:calc(var(--card-width)*1.65)}.app{padding:0 12px}.header{height:89px}.brand{gap:10px}.brand>svg{width:25px;height:34px}h1{font-size:22px;letter-spacing:2px}.brand span{font-size:9px;letter-spacing:2.5px}.preview-label{max-width:90px;line-height:1.7;letter-spacing:.5px;font-size:9px;gap:7px}.preview-label>span{flex-shrink:0}.table{margin-top:25px}.table-meta{font-size:10px;letter-spacing:.3px;margin-bottom:17px}.meta-divider{margin:0 9px}.top-piles{gap:12px;margin-bottom:26px}.pile-group{width:calc(50% - 6px)}.slots{gap:2px}.slot{border-radius:4px;width:calc(var(--card-width) - 1px)}.slot.free::after{font-size:16px}.group-label{font-size:9px;letter-spacing:2px;margin-top:12px}.corner{font-size:calc(var(--card-width)*.32);gap:1px;left:6%;top:5%;letter-spacing:-.6px}.corner svg{height:calc(var(--card-width)*.18);width:calc(var(--card-width)*.18)}.card{border-radius:4px}.card .center-suit{width:52%;height:45%;left:24%;top:30%}.card .bottom-corner{font-size:calc(var(--card-width)*.26)}.bottom-corner svg{height:calc(var(--card-width)*.16);width:calc(var(--card-width)*.16)}.appearance{margin:47px 0 36px}.appearance p{font-size:13px;letter-spacing:1px}.theme-picker{gap:6px}.theme-picker button{font-size:10px;letter-spacing:0;gap:6px;padding:10px 11px}.swatch{width:10px;height:10px}.preview-note{font-size:9px;letter-spacing:.5px}footer{font-size:8px;letter-spacing:0;gap:12px;line-height:1.8;padding:19px 0}.footer-dot{padding:0 4px}}
.card-study{max-width:1190px;margin:0 auto 56px;padding:50px 30px 40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:36px}.study-copy h2{font:400 26px var(--serif);letter-spacing:2px;color:#eadaba;margin:0 0 19px}.study-copy p{color:var(--muted);font-size:13px;line-height:2.1;letter-spacing:.7px}.study-copy a{display:inline-block;margin-top:12px;font-size:12px;color:var(--gold);text-decoration:none;border-bottom:1px solid #e9c78960;padding-bottom:6px}.study-copy a span{margin-left:12px}.study-cards{display:flex;gap:30px;align-items:center;padding:10px 20px}.study-face,.study-back{position:relative;width:174px;height:252px;border-radius:12px;box-shadow:0 12px 24px #00160e66}.study-face{background:linear-gradient(115deg,#fff9ed,#f8efde 65%,#f5e9d3);border:1px solid #ddcfb6;color:var(--ink);transform:rotate(-7deg);font-family:Georgia,'Times New Roman',serif}.study-corner{position:absolute;left:13px;top:11px;display:flex;flex-direction:column;align-items:center;font-size:29px;line-height:1}.study-corner>span{font-size:22px}.study-corner.reverse{top:auto;left:auto;right:13px;bottom:11px;transform:rotate(180deg)}.study-spade{position:absolute;inset:0;display:grid;place-items:center;font-size:91px}.study-back{overflow:hidden;transform:rotate(7deg);border:1px solid #ead9b3;background:#e9dabb}.study-back img{position:absolute;width:106%;height:104%;left:-3%;top:-2%;object-fit:fill}.study-cards>div{transition:transform .25s}.study-cards>div:hover{transform:rotate(0) translateY(-6px)}
@media(max-width:800px){.card-study{padding:35px 0;gap:18px}.study-copy h2{font-size:20px}.study-copy p{font-size:11px}.study-cards{gap:18px;padding:10px}.study-face,.study-back{width:130px;height:190px}.study-spade{font-size:70px}}
@media(max-width:600px){.card-study{flex-direction:column;align-items:center;text-align:center;margin-bottom:22px;padding-top:32px;gap:28px}.study-copy h2{font-size:20px}.study-copy p{font-size:11px}.study-copy a{font-size:11px;margin-top:5px}.study-cards{gap:30px}.study-face,.study-back{width:132px;height:194px}.study-corner{font-size:24px}.study-corner>span{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}