:root{color-scheme:light;--paper:#f4f1e9;--ink:#283a31;--muted:#74796f;--line:#dadccf;--gold:#b3945c}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}header{max-width:1360px;margin:auto;padding:26px 40px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{font-weight:650;color:var(--ink);text-decoration:none;letter-spacing:1px}.brand span{font-weight:400;color:var(--muted);font-size:12px}.edition,.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted)}main{max-width:1280px;padding:36px 40px;margin:auto}.intro{margin-bottom:32px}.intro h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:3px;margin:12px 0}.intro>p:last-child{color:var(--muted);line-height:1.8}.workspace{display:grid;grid-template-columns:360px 1fr;gap:24px}.panel,.table{border:1px solid var(--line);border-radius:16px;padding:25px;background:#faf9f4}.step{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:12px;letter-spacing:1px;margin-bottom:23px}.step>span:first-child{color:var(--ink);font-size:15px}.tabs{display:flex;padding:4px;background:#eceee6;border-radius:9px;gap:4px}.tabs button{width:50%;border:0;background:transparent}.tabs button[aria-pressed=true]{background:var(--ink);color:white}.help{color:var(--muted);font-size:12px;line-height:1.85}.small{font-size:11px}button,input,select{font:inherit}button,select{cursor:pointer}button{padding:11px 14px;border:1px solid var(--line);border-radius:7px;background:#f8f8f1;color:var(--ink);transition:background .16s,transform .16s}button:hover:not(:disabled){background:#e5e8db;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}label{display:block;font-size:12px;margin-bottom:9px}form{margin-top:20px}.number-row{display:flex;gap:8px}input{width:100%;min-width:0;border:1px solid var(--line);background:white;padding:13px;border-radius:7px;color:var(--ink)}.primary{background:var(--ink);color:#faf8ee;border-color:var(--ink)}.primary:hover:not(:disabled){background:#3e5748}form .primary{width:100%;margin-top:8px;display:flex;justify-content:space-between}.operations{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.operations button{font-size:12px;padding:10px}.sequence{display:flex;flex-wrap:wrap;align-items:center;gap:5px;border-top:1px solid var(--line);padding-top:8px;font-size:11px}.sequence>span{width:100%;line-height:1.8;overflow-wrap:anywhere;max-height:90px;overflow:auto}.text-button{background:transparent;border:0;padding:8px;font-size:12px;text-decoration:underline;text-underline-offset:4px}#status{font-size:12px;line-height:1.7;margin-bottom:0;overflow-wrap:anywhere}#status.error{color:#a13f34}.deck-label{margin-left:auto;max-width:220px;overflow-wrap:anywhere;color:var(--muted);font-size:11px}.table{background:linear-gradient(140deg,#e9ede2,#f5f4ec);display:flex;flex-direction:column}.deck-area{display:flex;align-items:center;justify-content:center;gap:40px;flex:1;padding:20px 0 35px}.card-back{flex-shrink:0;width:136px;height:213px;border-radius:9px;background:#293e34;outline:1px solid #b69d69;outline-offset:-10px;box-shadow:5px 4px 0 #e3e0d3,6px 5px 0 #a9af9f,11px 9px 0 #e3e0d3,12px 10px 0 #a9af9f,14px 18px 25px #293e3420;color:#dcc591;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;letter-spacing:3px;font-family:Georgia,serif}.ornament{font-size:43px}.card-back small{font-size:10px}.deck-info{max-width:245px}.deck-info h2{font-family:Georgia,"Songti SC",serif;font-weight:500;font-size:22px;line-height:1.6;overflow-wrap:anywhere}.deck-info>p{font-size:13px}.draw-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #cfd6c7;padding-top:20px}.draw-controls label{margin:0}.draw-controls select{border:1px solid #c5cdbf;border-radius:6px;background:#f9faf3;padding:10px;color:var(--ink)}.draw-controls .primary{flex:1}.reading{margin-top:34px}.reading-header{display:flex;align-items:center;justify-content:space-between;gap:15px}.reading-header h2{font-size:17px;font-weight:500}.reading-header h2 span{font-size:11px;font-weight:400;color:var(--muted);margin-left:14px}.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:20px;padding:18px 0;align-items:start}.empty{grid-column:1/-1;text-align:center;border:1px dashed #cdd1c3;padding:30px;color:#929b86;border-radius:12px;font-size:28px}.empty p{font-size:13px}.result{margin:0;min-width:0;max-width:290px;width:100%;justify-self:center}.result button{padding:0;border:0;background:transparent;display:block;width:100%}.result img{width:100%;height:auto;display:block;border-radius:9px;box-shadow:0 7px 18px #293e3417}.result figcaption{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:13px 2px}.result strong{font-size:13px;color:var(--ink);font-weight:500}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:11px;margin-top:30px}footer span{letter-spacing:2px}dialog{border:0;border-radius:12px;background:#f4f1e9;max-width:95vw;max-height:96vh;padding:14px;text-align:center}dialog::backdrop{background:#15221dda}dialog img{display:block;max-height:78vh;max-width:85vw;object-fit:contain;margin:auto}dialog button{display:block;margin:0 0 10px auto}dialog p{margin:10px 0 0}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}@media(max-width:800px){header{padding:22px}main{padding:25px 20px}.workspace{grid-template-columns:1fr}.deck-area{gap:30px}.table{min-height:380px}.results{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.reading-header{align-items:flex-start}.reading-header>.help{font-size:10px}.edition{font-size:9px}.intro h1{letter-spacing:1px}}@media(max-width:380px){.deck-area{gap:20px}.card-back{width:110px;height:180px}.deck-info h2{font-size:18px}.panel,.table{padding:18px}}

.shuffle-section{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.shuffle-section>.primary{width:100%;margin-top:10px}.step>span:first-child{flex-shrink:0}.deck-label{min-width:0}.panel form{margin-top:0}
.card-copy{text-align:left;line-height:1.8}.card-copy h3{font-size:17px;margin:0}.card-copy .english{font-size:11px;letter-spacing:.4px;color:var(--muted);margin:0 0 8px}.card-copy .meaning{font-size:12px}.card-copy details{font-size:12px;margin-bottom:12px}.result .related-button{padding:9px;border:1px solid var(--line);font-size:12px;background:#e9ede2}.card-copy p,.relation p{overflow-wrap:anywhere}details summary{cursor:pointer;line-height:1.7;padding:8px 0;color:var(--ink)}details>p{line-height:1.85}.reading-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:15px 0}.analysis{border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.analysis h2{font-size:21px;font-weight:500}.relation-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.relation{border:1px solid var(--line);border-radius:12px;background:#faf9f4;padding:18px;margin:12px 0;text-align:left;line-height:1.8}.relation-tag{font-size:11px;color:#797049}.formula{font-family:ui-monospace,monospace;font-size:15px;font-weight:600;overflow-wrap:anywhere}.relation-cards{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.mini-card{width:95px;padding:5px;display:flex;flex-direction:column;gap:4px;text-align:left;font-size:11px}.mini-card img{width:100%;height:135px;object-fit:contain;margin:0;max-width:100%;border-radius:5px}.mini-card small{font-size:9px;color:var(--muted)}.interpretation{background:#e9ede2;padding:22px;border-radius:12px;margin:20px 0;line-height:1.9}.interpretation h3{margin-top:0;font-size:17px}.bridge>h3{font-size:14px;line-height:1.9}.history{margin-top:26px;padding:18px;border:1px solid var(--line);border-radius:12px}.history-entry{display:block;width:100%;text-align:left;margin-top:10px;overflow-wrap:anywhere}.relations-dialog{width:780px;text-align:left;padding:24px}.dialog-heading{display:flex;gap:10px;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:19px}.dialog-heading button{flex-shrink:0}.relations-dialog>label{margin-top:18px}.relations-dialog select{padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);max-width:100%}.relations-dialog .mini-card{margin:0}.relations-dialog .mini-card img{max-height:135px}.relations-dialog #moreRelations{margin:15px auto}.relations-dialog details{font-size:12px}.reading .results{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.result{max-width:350px}@media(max-width:800px){.relation-grid{grid-template-columns:1fr}.reading .results{grid-template-columns:repeat(2,minmax(0,1fr))}.relations-dialog{padding:16px}.mini-card{width:80px}.mini-card img{height:116px}.card-copy h3{font-size:15px}.card-copy summary{font-size:11px}.dialog-heading h2{font-size:16px}}

/* Mobile: the reading is the main surface; draw controls stay within thumb reach. */
.mobile-only,.setup-details>summary{display:none}
@media(max-width:800px){
 header{padding:14px 16px}main{padding:16px 14px calc(110px + env(safe-area-inset-bottom))}
 .intro{margin-bottom:16px}.intro .eyebrow,.intro>p:last-child{display:none}.intro h1{font-size:25px;margin:4px 0;letter-spacing:1px}
 .workspace{gap:10px}.panel,.table{padding:14px;border-radius:12px}.desktop-only{display:none}
 .table{order:-1;min-height:0}.table>.step{margin-bottom:8px;gap:7px}.table>.step>span:first-child{font-size:14px}.deck-label{max-width:65%;font-size:10px}
 .deck-area{padding:0;display:block}.card-back,.deck-info h2,.deck-info>.help,.table>.help{display:none}.deck-info{max-width:none}.deck-info>p{margin:3px 0;font-size:12px}
 .mobile-only{display:block}#quickCreate{margin-top:12px;width:100%;min-height:44px}
 .setup-details>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:13px;list-style:none;padding:10px 0}.setup-details>summary::-webkit-details-marker{display:none}.setup-details[open]>summary>span{transform:rotate(180deg)}
 .setup-details+ .setup-details{border-top:1px solid var(--line)}.setup-details[open]{padding-bottom:10px}.shuffle-section{margin-top:0;padding-top:8px;border:0}.panel .step{display:none}.panel{padding:4px 14px 10px}
 #status{margin-top:6px;font-size:11px;line-height:1.65}.panel input,.panel button{min-height:44px}.panel input{font-size:16px}
 .draw-controls{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:48px 65px minmax(100px,1fr) 62px;gap:8px;flex-wrap:nowrap;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f8f7f0;border-top:1px solid #c5cdbf;box-shadow:0 -4px 20px #293e3412}
 .draw-controls label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.draw-controls button,.draw-controls select{min-height:46px;margin:0;padding:10px 5px;white-space:nowrap;font-size:13px}.draw-controls select{font-size:16px}.draw-controls .text-button{font-size:11px}.draw-controls #mobileSettings{font-size:12px}
 .reading{margin-top:18px;scroll-margin-top:12px}.reading-header{gap:6px}.reading-header h2{margin:6px 0;font-size:16px}.reading-header h2 span{margin-left:7px;font-size:10px}.reading-header>.help{font-size:9px}.reading .results{padding-top:12px;gap:14px}.empty{padding:18px}.panel{scroll-margin-top:12px}
 .related-button{min-height:44px}footer{padding-bottom:10px}.history{margin-top:18px}
}
@media(max-width:350px){.draw-controls{gap:5px;padding-left:8px;padding-right:8px;grid-template-columns:43px 59px minmax(90px,1fr) 58px}.reading-header{flex-wrap:wrap}}