:root{color-scheme:light;--ink:#241c2c;--muted:#493f51;--plum:#503661;--violet:#ebe2f1;--paper:#fffcf8;--line:#b8aabf;--gold:#ab885a;--wash:#f7f1f3;font-family:"Meiryo","Hiragino Sans","Yu Gothic UI","Noto Sans CJK JP",system-ui,sans-serif;color:var(--ink);background:#f8f4ee}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 80% 0%,#eee4f0 0%,transparent 52%),#f8f4ee;font-size:18px;line-height:1.55}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:700;line-height:1.35}
h1{font-size:30px}
h2{font-size:24px;margin-bottom:12px}
h3{font-size:21px}
p{margin:0 0 10px}
small,.muted{color:var(--muted)}
small{font-size:15px}
::placeholder{color:var(--muted);opacity:1}
.compact{font-size:16px;line-height:1.6}
button,input,textarea,select{font:inherit;color:inherit}
button,select{font-weight:600}
button,input,textarea,select,summary,a{outline-offset:3px}
:focus-visible{outline:2px solid #76518d}
button,select,summary{cursor:pointer}
button{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px}
button:hover:not(:disabled){background:var(--violet)}
button:disabled{color:#554960;background:#f0eaf0;cursor:default}
.primary,button[aria-pressed=true]{background:var(--plum);color:white;border-color:var(--plum)}
.primary:hover:not(:disabled),button[aria-pressed=true]:hover:not(:disabled){background:#50395f}
input,select,textarea{display:block;width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:white}
textarea{resize:vertical}
label{display:block;margin:13px 0 5px;font-weight:650}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
a{color:var(--plum)}
.eyebrow{color:var(--plum);letter-spacing:.09em;font-size:14px;font-weight:750;margin:0 0 5px}
.emblem{display:grid;place-items:center;color:var(--gold);background:var(--wash);border:1px solid var(--line);border-radius:50%;width:45px;height:45px;font-size:22px;flex:none}
.panel{min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:17px;box-shadow:0 4px 16px #4c345609}
.masthead{padding:15px 23px;border-bottom:1px solid var(--line);background:#fffcf8df;display:flex;justify-content:space-between;align-items:center;gap:15px;min-width:990px}
.brand,.header-actions,.section-head,.board-tools,.switcher{display:flex;align-items:center;gap:9px}
.section-head{justify-content:space-between}
.status{max-width:1650px;margin:10px auto 0;padding:0 18px;min-height:1.4em;color:var(--muted);font-size:16px}
.workspace{max-width:1650px;min-width:990px;margin:auto;display:grid;grid-template-columns:minmax(210px,.8fr) minmax(455px,2.3fr) minmax(252px,1.12fr);gap:12px;align-items:start;padding:10px 16px 24px}
.center{display:grid;min-width:0;gap:12px}
.board-panel{min-height:290px}
.badge{border-radius:99px;background:var(--wash);padding:4px 9px;color:var(--plum);font-size:16px;white-space:nowrap}
#board{position:relative;max-width:700px;margin:8px auto;min-height:128px;background:radial-gradient(ellipse,#f6edf8 0%,transparent 70%);border-radius:12px}
#board:not(.map){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px 0}
#board.map{height:var(--map-height)}
.slot{width:var(--slot-width,106px);min-height:var(--slot-height,183px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-align:center;padding:4px;overflow-wrap:anywhere;border-style:dashed;background:#fffafc;font-size:11px}
.map .slot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.slot.active{border:2px solid #745889;background:var(--violet);box-shadow:0 0 0 2px #ebe2f1;z-index:1}
.slot.filled{border-style:solid}
.slot img{width:100%;max-width:var(--card-width,76px);height:var(--card-height,126px);object-fit:contain}
.slot .reversed,.dictionary-card .reversed{transform:rotate(180deg)}
.slot-index{color:var(--plum);font-weight:700;font-size:10px}
.slot-name{font-weight:700}
.board-tools{justify-content:flex-end;margin-top:8px}
.board-tools button{font-size:16px}
.switcher{margin-bottom:9px}
.switcher button{flex:1;min-width:0;font-size:16px}
.suit-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.suit-tabs button{font-size:15px;padding:6px 8px}
.card-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:200px;overflow:auto;padding:3px}
.card-list button{text-align:left;font-size:16px;min-height:38px;padding:5px 8px;overflow-wrap:anywhere}
.dictionary-card{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.dict-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.dict-head img{width:75px;height:124px;object-fit:contain}
.dict-reading{margin:7px 0;padding:8px;border-radius:8px;background:#f8f3f8;font-size:17px;line-height:1.65}
.dict-reading p{margin:3px 0 0}
.keyword-group{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:5px 0}
.keyword-group strong{font-size:16px}
.keyword-group button{border-radius:99px;background:var(--wash);font-size:16px;padding:4px 9px}
details{margin-top:10px}
summary{font-weight:650;color:var(--plum)}
details ol,details ul{padding-left:22px;margin-bottom:0;line-height:1.65}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login{width:min(440px,100%);padding:36px}
.login .emblem{margin:0 auto 14px}
.login h1,.login>p{text-align:center}
.login form{margin-top:20px}
.login .primary{width:100%;margin-top:13px}
.error{color:#8b2942;margin-top:10px}

#board:not(.map){gap:12px;align-items:stretch}
#board .slot{min-height:0;padding:8px;gap:6px;font-size:16px;line-height:1.4}
#board:not(.map) .slot{width:min(190px,calc(33.333% - 8px))}
#board .slot-index{font-size:15px}
#board .slot-name{font-size:18px}
#board .slot img{width:100%;max-width:174px;height:auto;aspect-ratio:174 / 300}
#board .slot:not(.filled)::before{content:"";width:100%;max-width:174px;aspect-ratio:174 / 300;order:1;border:1px dashed var(--line);border-radius:6px}
#board .slot:not(.filled) span:last-child{order:2}
#board .slot.active,#board .slot.active:hover{color:var(--ink);background:var(--violet);border-color:#745889}
#board.map{display:grid;grid-template-columns:repeat(var(--columns),minmax(var(--track-min,102px),190px));grid-template-areas:var(--layout);justify-content:safe center;gap:16px 12px;height:auto;max-width:none;overflow-x:auto;padding:8px 4px 12px}
#board.map .slot{position:static;transform:none;width:100%}
#board.choice{--columns:2;--layout:"a a" "b d" "c e"}
#board.heart{--columns:3;--layout:"a . b" "c . d" "e . f" ". g ."}
#board.hex{--columns:3;--layout:". a ." "e . f" ". g ." "c . b" ". d ."}
#board.cross{--columns:5;--track-min:140px;--layout:". e . . j" "d a b f i" ". c . . h" ". . . . g"}
#board.wheel{--columns:5;--track-min:140px;--layout:". k j i ." "l . . . h" "a . m . g" "b . . . f" ". c d e ."}
#board.map .slot:nth-child(1){grid-area:a}
#board.map .slot:nth-child(2){grid-area:b}
#board.map .slot:nth-child(3){grid-area:c}
#board.map .slot:nth-child(4){grid-area:d}
#board.map .slot:nth-child(5){grid-area:e}
#board.map .slot:nth-child(6){grid-area:f}
#board.map .slot:nth-child(7){grid-area:g}
#board.map .slot:nth-child(8){grid-area:h}
#board.map .slot:nth-child(9){grid-area:i}
#board.map .slot:nth-child(10){grid-area:j}
#board.map .slot:nth-child(11){grid-area:k}
#board.map .slot:nth-child(12){grid-area:l}
#board.map .slot:nth-child(13){grid-area:m}
#board.choice .slot:first-child{justify-self:center;width:min(190px,100%)}
.reference{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}

body:has(.workspace){height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
.masthead{min-width:0;padding-block:8px}
.status{width:100%;margin:4px auto 0}
.workspace{width:100%;min-width:0;min-height:0;align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(235px,clamp(235px,25%,365px));padding:6px 12px 10px}
.intake,.reference,.synthesis{min-height:0;overflow:auto}
.reference{position:static;max-height:none}
.center{min-height:0;grid-template-rows:minmax(0,1fr);gap:8px}
.synthesis{overflow:visible;padding-block:0}
.board-panel{display:flex;flex-direction:column;min-height:0;padding:9px 10px}
.board-panel h2{margin-bottom:2px}
.board-panel .eyebrow{margin-bottom:0}
#board-hint{margin:2px 0 0}
#board{width:100%;flex:1 1 auto;min-height:0;margin:3px auto}
#board:not(.map){flex-wrap:nowrap;padding:3px 0}
#board.map{grid-template-columns:repeat(var(--columns),minmax(0,190px));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:4px 6px;overflow:visible;padding:2px}
#board.choice,#board.heart,#board.hex,#board.wheel{--rows:3}
#board.heart{--layout:"a . b" "c . d" "e g f"}
#board.hex{--layout:"e a f" ". g ." "c d b"}
#board.cross{--rows:4}
#board.wheel{--layout:"l k j i h" "a . m . g" "b c d e f"}
#board .slot{height:100%;min-width:0;padding:3px 4px;gap:1px;line-height:1.2}
#board .slot-index,#board .slot-name{flex:none}
#board .slot img,#board .slot:not(.filled)::before{height:0;min-height:0;aspect-ratio:auto;flex:1 1 0}
#board:not(.map) .slot img,#board:not(.map) .slot:not(.filled)::before{max-height:300px}
.board-tools{margin-top:3px}
.board-tools button{padding-block:4px}
body:has(.workspace) .workspace{margin:0 auto;grid-template-rows:auto minmax(0,1fr);gap:8px 12px}
body:has(.workspace) #board{flex-basis:0}

@media (max-height:800px){
  #board.cross{--rows:3;--layout:". e . . j" "d a b f i" ". c . h g"}
}
@media (max-height:800px){
  .board-panel:has(#board .slot) #board-hint,.board-panel .section-head .eyebrow{display:none}
}

.session-setup{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);gap:12px;padding:6px 12px}
.setup-field{min-width:0;display:flex;align-items:center;gap:8px}
.setup-field label{flex:none;margin:0;font-size:16px}
.setup-field select{min-width:0;padding:5px 8px;font-size:16px}
.intake{padding:12px}
.intake>label:first-child{margin-top:0}
.intake .synthesis{margin-top:16px}
.consultation-memo textarea{margin-top:8px}
#spread-about{margin:6px 0}
@media (max-width:900px){
  .setup-field{display:block}
  .setup-field label{margin-bottom:3px}
}

:root{
  --ink:#292637;--muted:#514c5f;--plum:#584371;--violet:#eee9f5;
  --paper:#fffcf8;--line:#e0d9e4;--wash:#f5f1f6;
  --stage:#262235;--stage-edge:#4b425e;--stage-ink:#fff9f3;--stage-muted:#d8cde4;
}
body{background:#f2edf3}
.masthead{background:transparent;border:0;padding-inline:20px}
.masthead h1{font-size:24px;letter-spacing:.015em}
.brand .eyebrow{font-size:13px;margin-bottom:2px}
.brand .emblem{background:#e8deed;border:0;color:#634b78}
.header-actions button{background:transparent;border-color:#d9cedf;font-size:15px;font-weight:500;padding:5px 11px}
.status{font-size:15px}
.panel{border:0;border-radius:14px;box-shadow:0 2px 10px #3323420b}
.session-setup{background:#e9e1ee;box-shadow:none;gap:14px}
.setup-field select{border-color:transparent;background:#fffbff;font-weight:500}
.setup-field label{font-weight:600}
.intake,.reference{scrollbar-width:thin;scrollbar-color:#ab9bb6 transparent}
.intake h2,.reference h2{font-size:21px}
.intake input,.intake textarea,.reference input{background:#fcf9fc}
.keyword-group strong{font-weight:600}
.keyword-group button{border:0;background:#eee7f3;font-weight:500}
.keyword-group button:hover{background:#e2d6ed}
.card-list{scrollbar-width:thin;scrollbar-color:#ab9bb6 transparent;gap:5px}
.card-list button{background:#f5eff6;border:0;font-weight:500}
.card-list button:hover{background:#e7dcec}
.suit-tabs button,.switcher button{font-weight:500}
.suit-tabs button:not([aria-pressed=true]){background:#f5eff6;border-color:transparent}
.board-panel{
  background:radial-gradient(ellipse at 50% 48%,#342c49,var(--stage) 76%);
  color:var(--stage-ink);box-shadow:0 5px 18px #2c22332a;
}
.board-panel .eyebrow,.board-panel .muted{color:var(--stage-muted)}
.board-panel .section-head{padding:2px 5px}
.board-panel .badge{background:#433953;color:var(--stage-ink)}
#board{background:none}
#board .slot{
  background:#ffffff08;color:var(--stage-ink);border:1px dashed var(--stage-edge);
  border-radius:10px;padding:4px 6px;gap:2px;font-weight:400;
}
#board .slot.filled{border-style:solid;border-color:#ffffff18}
#board .slot:hover{background:#ffffff13}
#board .slot.active,#board .slot.active:hover{
  background:#55456b;color:var(--stage-ink);border:1px solid #d4bde8;box-shadow:inset 0 0 0 1px #d4bde84d;
}
#board .slot-index{color:var(--stage-muted);font-weight:600}
#board .slot.active .slot-index{color:var(--stage-ink)}
#board .slot-name{font-weight:600}
#board .slot:not(.filled)::before{border-color:#89799b}
.board-tools button{background:#3f354f;border-color:transparent;color:var(--stage-ink);font-weight:500}
.board-tools button:hover:not(:disabled){background:#55456b}
.board-tools button:disabled{color:var(--stage-muted);background:transparent}
#board.choice{--columns:3;--rows:2;--layout:"b a d" "c a e";gap:8px 12px}
#board.choice .slot:first-child{height:72%;align-self:center}

:root{font-family:"BIZ UDPGothic","Meiryo","Hiragino Sans","Noto Sans CJK JP",system-ui,sans-serif}
body:has(.workspace){display:block;height:auto;overflow:visible}
.editor-screen{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.editor-screen .workspace{height:100%}
.masthead h1,.reading-header h2{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;font-weight:600}
.board-tools #confirm-spread{background:#e6d7f0;color:#30223d;border-color:#e6d7f0}
.board-tools #confirm-spread:hover:not(:disabled){background:#f5e9fb;color:#30223d}
.board-tools #confirm-spread:disabled{background:#443a54;color:#e1d6ea;border-color:transparent}
.reading-results{max-width:1160px;margin:0 auto;padding:34px 20px 60px;font-size:18px;line-height:1.75}
.reading-results h2{font-size:30px}
.reading-results h3{margin:24px 0 10px;font-size:23px}
.reading-results h4{margin:0 0 6px;font-size:20px;line-height:1.45}
.reading-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}
.card-readings,.combined-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
.reading-card{display:flex;align-items:flex-start;gap:16px}
.reading-card img{width:80px;flex:none;height:auto}
.reading-card img.reversed{transform:rotate(180deg)}
.reading-position,.reading-words{font-size:16px;color:var(--plum);font-weight:600}
.reading-position{margin-bottom:3px}
.reading-group ul{padding-left:20px}
.reading-group li{margin-bottom:8px}
.reading-group li span{display:block;font-size:16px;color:var(--muted)}
.reading-question{background:var(--wash);padding:9px 12px;border-radius:8px;margin:0}
.reading-results .synthesis{margin-top:24px;padding:18px}

.switcher,.board-tools{flex-wrap:wrap}
.switcher{align-items:stretch}
.switcher button{flex:1 0 auto;padding-inline:6px}
.switcher button,.board-tools button,.header-actions button,.reading-header button{white-space:nowrap}

.reference{padding:14px;overscroll-behavior:contain}
.reference .eyebrow{margin-bottom:2px}
.reference h2{margin-bottom:8px}
#picker-content #entry-hint{margin-bottom:8px;padding:6px 9px;border-radius:7px;background:var(--wash)}
#picker-content label{margin:8px 0 4px}
#picker-content #search{padding:7px 9px}
#tabs{gap:4px;margin:8px 0}
#tabs button{white-space:nowrap;padding:4px 7px}
#orientation{margin:0 0 8px}
#orientation button{padding-block:4px}
.reference .card-list{max-height:none;overflow:visible;padding:0;gap:5px}
.reference .card-list button{min-height:35px;padding-block:4px}
.reference .card-list>p{grid-column:1/-1}
#back-to-card-list{white-space:nowrap;font-size:16px;padding:4px 9px}
#dictionary-view .dictionary-card{border-top:0;padding-top:0;margin-top:10px}
#dictionary-view .dict-reading{padding:9px 10px}