:root{color-scheme:dark;--bg:#16273d;--gold:#f0d580;--ink:#eee8d7;--muted:#aab8c7;--line:#655e48;--teal:#6bc3bc}*{box-sizing:border-box}body{margin:0;padding:28px 3vw 35px;background:var(--bg);color:var(--ink);font:16px Arial,sans-serif}header{display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{font:25px Georgia,serif}.brand span{font-style:italic}a{color:var(--gold)}header a{font-size:12px;letter-spacing:1px}h1{font:36px Georgia,serif;margin:35px 0 12px}.intro,.small,#status,footer{color:var(--muted)}.intro{margin-bottom:34px}.small{font-size:13px;line-height:1.6}main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:4vw}nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:24px}nav strong{color:var(--gold);font-size:13px;margin-right:auto}button{font:600 13px Arial;letter-spacing:.5px;color:var(--gold);border:1px solid #bc9d50;background:transparent;border-radius:8px;padding:11px 16px;cursor:pointer;min-height:42px}button:hover{background:#394450}button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.solid,button[aria-pressed=true]{background:var(--gold);color:var(--bg)}.label{font-size:12px;font-weight:bold;color:var(--gold);letter-spacing:1.4px;margin:20px 0 14px}.label span{color:var(--muted);font-weight:normal;letter-spacing:0;margin-left:16px}#board{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:12px 0;min-height:280px;background:#304c60;border:1px solid #78989f;border-radius:12px;padding:26px 16px}.tile{display:flex;align-items:center;gap:13px;border-color:#b8c9c5;background:#e8e7dd;color:#253e46;font:21px/1.4 Georgia,serif;letter-spacing:0;text-align:left;padding:12px 16px;max-width:100%;user-select:none}.tile:hover{background:#fffbed}.tile.added{background:var(--gold)}.tile.selected{outline:3px solid var(--gold);outline-offset:3px}.grip{flex-shrink:0;width:9px;height:28px;background-image:radial-gradient(circle,#687e85 1.25px,transparent 1.5px);background-size:5px 6px}.slot{padding:0;width:12px;min-height:52px;border:0;border-radius:3px;flex-shrink:0;font-size:0}body.selecting .slot{background:#6bc3bc55;width:23px}body.selecting .slot:hover,.slot.over{background:var(--gold)}#status{font-size:13px;min-height:30px;line-height:1.5}.tray{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:15px 0 30px}.tray .label{margin:0}#words{display:flex;gap:12px}#words button{font:20px Georgia;background:var(--gold);color:var(--bg);min-width:70px}#words button:disabled{background:transparent;color:var(--muted)}.composition{border-top:1px solid var(--line);padding-top:10px}.composition nav .label{margin-right:auto}#preview{font:27px/1.7 Georgia,serif;min-height:150px;margin-top:24px}#preview .added{color:var(--gold)}#preview.stacked .phrase{display:block}aside{padding-top:12px}aside>.label:first-child{border-bottom:1px solid var(--line);padding-bottom:22px;margin-top:0}h2{font:31px/1.25 Georgia,serif}.reading{font:22px/1.5 Georgia,serif}#judgments{padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:24px}.judgment{margin:16px 0 22px}.judgment b{font-size:13px;color:var(--gold)}.dots{float:right;letter-spacing:5px;color:var(--gold)}.judgment p{font-size:13px;line-height:1.5;color:var(--muted)}#metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric{padding:15px;border:1px solid var(--line);border-radius:7px}.metric b{font-size:11px;color:var(--muted);display:block}.metric strong{font:32px Georgia;color:var(--gold);display:block;margin:10px 0}.metric span{font-size:12px;color:var(--muted)}.traceNote{border-top:1px solid var(--line);margin-top:24px;font-size:13px;line-height:1.7;color:var(--muted)}footer{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;font-size:13px}footer>span{margin-left:15px}details{margin-top:22px;max-width:700px;line-height:1.7}summary{cursor:pointer;color:var(--gold)}body.expanded main{grid-template-columns:1fr}body.expanded aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}body.expanded #board{min-height:190px}#trace svg{width:100%;height:auto;margin-top:20px}#trace p{font-size:13px;color:var(--gold)}[hidden]{display:none!important}@media(max-width:850px){body{padding:20px}main{grid-template-columns:1fr}h1{font-size:30px}.brand{font-size:22px}header{align-items:flex-start}header a{max-width:90px}body.expanded aside{display:block}.tile{font-size:18px}#preview{font-size:23px}.tray{gap:12px}#words{flex-wrap:wrap}nav{gap:8px}button{padding:10px 12px}footer>span{display:block;margin:15px 0}}

/* Interaction refinement: exclusive views, visible insertion and readable counts. */
.site-links{display:flex;flex-direction:column;align-items:flex-end;gap:9px;margin:0}.site-links a{font:15px Georgia,serif;letter-spacing:1.5px;text-decoration:none}.about-link{border:0;padding:6px 0;min-height:28px;font-size:12px;font-weight:normal;text-decoration:underline;margin-top:14px}h1{margin-top:22px}.intro{margin-top:10px}
#board{column-gap:0;row-gap:18px;padding:30px 20px;transition:min-height .28s ease}.tile{margin-right:12px;position:relative}.slot{width:0;min-width:0;overflow:visible;position:relative;background:transparent;min-height:64px}.slot::after{content:'';position:absolute;left:50%;top:-9px;bottom:-9px;width:0;transform:translateX(-50%);border-radius:3px;background:#fff4bd;pointer-events:none}.slot.over,body.selecting .slot{width:26px;background:transparent}.slot.over::after{width:6px;box-shadow:0 0 13px #fff4bd80}body.selecting .slot::after{width:3px;background:#fff4bd90}.slot:focus-visible::after{width:6px}body.dragging .tile{cursor:grabbing}body.expanded main{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}body.expanded aside{display:block}body.expanded #board{min-height:var(--expanded-height,560px)}
#preview.stacked .phrase{display:inline}#preview.stacked .phrase-line{display:block}.judgment{display:grid;grid-template-columns:112px 1fr;gap:16px;border-top:1px solid var(--line);padding-top:17px;margin:0 0 17px}.judgment .dots{float:none;letter-spacing:3px;white-space:nowrap;font-size:17px;line-height:20px}.judgment p{margin:6px 0 0}.judgment b{color:var(--ink)}#judgments{padding-bottom:0;border-bottom:0}.metric b{color:var(--ink)}.metric strong{display:flex;gap:7px;align-items:baseline}.metric strong span{font:inherit}.metric .actual{color:var(--gold)}.metric .ceiling{color:#aab8c7}.metric .divider{color:#687a8b;font-size:25px}.metric>span{color:#b5c4cf;line-height:1.5}dialog{max-width:620px;width:calc(100% - 36px);background:#233349;color:var(--ink);border:1px solid var(--gold);border-radius:12px;padding:28px;line-height:1.7}dialog::backdrop{background:#071423b8}#aboutClose{float:right;margin:0 0 12px 15px}dialog h2{font-size:26px}footer{line-height:1.6}@media(max-width:850px){body.expanded main{grid-template-columns:1fr}.site-links a{font-size:12px;max-width:none}.brand{max-width:65%}.judgment{grid-template-columns:105px 1fr;gap:12px}#board{padding:26px 16px}.tile{margin-right:10px}}
@media(prefers-reduced-motion:reduce){#board{transition:none}}

/* Composition-first layout and export. */
.name-link{font:inherit;color:inherit;border:0;padding:0;min-height:0;letter-spacing:inherit;border-radius:2px}.name-link:hover,.name-link:focus-visible{color:var(--gold);background:transparent;text-decoration:underline}.site-links a{color:var(--ink)}.topic{font:40px Georgia,serif;color:var(--gold);margin:0 0 22px}.composition{border-top:0;padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:22px}.composition nav{margin-bottom:12px}#preview{margin-top:10px;min-height:0;font-size:26px;line-height:1.6}.composition .small{margin-bottom:0}.arrangement-tools{margin:0 0 5px}.arrangement-tools .label{margin:0 auto 0 0}.count{margin:8px 0 13px}.reading-tools{margin:0 0 23px;padding-bottom:20px;border-bottom:1px solid var(--line)}.reading-tools .label{margin:0 auto 0 0}.traceNote{margin-top:22px;margin-bottom:20px}.traceNote p{margin-top:6px}.traceNote .label{margin-bottom:6px}.assessment-label{font-size:10px;color:var(--muted);letter-spacing:1px}.judgment{grid-template-columns:124px 1fr;gap:14px}.judgment .dots{display:flex;align-items:center;gap:7px;padding-top:3px;letter-spacing:0}.dots i{display:inline-block;width:12px;height:12px;border:1.5px solid var(--gold);border-radius:50%;flex:none}.metric .divider,.metric .ceiling{color:#bac3cc}.metric .divider{font-size:32px}.metric strong{gap:5px}.slot::after{top:-5px;bottom:-5px}.slot.over::after{width:3px;box-shadow:0 0 8px #fff4bd60}body.selecting .slot::after{width:2px}body.expanded main{grid-template-columns:1fr}body.expanded #board{min-height:280px}body.expanded aside{display:block;max-width:900px}body.expanded .composition{max-width:none}body.expanded #preview{max-width:1200px}
@media(max-width:850px){.judgment{grid-template-columns:118px 1fr;gap:10px}.topic{font-size:35px}.arrangement-tools .label{flex-basis:100%;margin-bottom:8px}.dots i{width:12px;height:12px}.reading-tools{margin-top:24px}}
@media print{
 @page{size:A4;margin:16mm}*{animation:none!important;transition:none!important}body{padding:0;background:white;color:#202b31;font-size:11pt;color-scheme:light}header{display:block}.brand{font-size:20pt}h1{font-size:20pt;margin:18px 0 8px}.intro{margin-bottom:18px;color:#555}main,body.expanded main{display:block}.site-links,button,.slot,#status,.tray,footer,.composition nav button,dialog{display:none!important}.name-link{display:inline!important;color:#202b31}nav{margin:0}.label,.topic,.judgment b,.metric b{color:#283e45}.topic{font-size:24pt;margin:12px 0}.composition{break-inside:avoid}#preview{display:block!important;color:#202b31;font-size:15pt}#preview .added{color:#89651f}#trace{display:none!important}#board{min-height:0!important;background:white;border-color:#bbc2c5;padding:12px;gap:8px}.tile{display:flex!important;min-height:0;padding:6px 9px;font-size:11pt;background:#f3f2eb;color:#253e46;border-color:#aaa;margin:0}.tile.added{background:#f4e6b7}.grip{display:none}aside,body.expanded aside{max-width:none}.reading-tools{margin-top:20px;margin-bottom:10px;padding-bottom:6px}.reading{font-size:13pt}h2{font-size:18pt}.small,.traceNote,.judgment p,.metric>span{color:#4c5860}.metric{break-inside:avoid}.metric .actual{color:#263e45}.metric .ceiling,.metric .divider{color:#66727a}#judgments{break-inside:avoid}.dots i{border-color:#7b622b}#metrics{grid-template-columns:repeat(4,1fr);gap:8px}.metric strong{font-size:22pt}.metric .divider{font-size:22pt}.judgment{padding-top:10px;margin-bottom:10px}.traceNote{break-inside:avoid}
}

/* Fixed workspace; quieter movement reference values. */
.judgment{align-items:start}.judgment .dots{align-self:start;height:18px;padding-top:1px}.judgment b{display:block;line-height:18px}.assessment-label{font-size:12px;color:var(--gold);letter-spacing:1.4px;border-top:1px solid var(--line);padding-top:22px;margin-top:24px;margin-bottom:17px}.metric strong{gap:3px}.metric .divider,.metric .ceiling{color:rgb(238 232 215 / 12%)}
@media print{
 @page{size:A4;margin:22mm 21mm 23mm}body{font-size:10pt;line-height:1.45}header{padding-bottom:9mm;border-bottom:1px solid #bfc5c6;margin-bottom:8mm}.brand{font-size:19pt}h1{font-size:21pt;line-height:1.2;margin:0 0 3mm}.intro{font-size:10pt;margin:0 0 7mm}.topic{font-size:25pt;margin:0 0 5mm}.label{font-size:8pt;letter-spacing:1.2px;margin:0 0 3mm}.composition{margin-bottom:5mm;padding-bottom:5mm}#preview{font-size:13pt;line-height:1.65}.composition nav{margin-bottom:3mm}.composition .small{font-size:8pt;margin-top:3mm}.count{font-size:8pt;margin:0 0 3mm}#board{padding:4mm;gap:2mm;border-radius:2mm}.tile{font-size:9pt;padding:2mm 3mm}.activity{break-after:page}aside{padding-top:0}.reading-tools{margin:0 0 5mm;padding-bottom:3mm}aside h2{font-size:22pt;line-height:1.25;margin:0 0 5mm}.reading{font-size:13pt;line-height:1.6;margin:0 0 4mm}.small{font-size:8pt;line-height:1.55}.traceNote{margin-top:6mm;margin-bottom:5mm;padding-top:4mm;font-size:9pt;line-height:1.6}.traceNote .label{margin-top:0}.assessment-label{font-size:8pt;color:#283e45;margin-top:5mm;padding-top:4mm;margin-bottom:4mm}#judgments{padding-top:0;margin-bottom:6mm}.judgment{grid-template-columns:29mm 1fr;gap:4mm;padding-top:3mm;margin-bottom:3mm}.judgment b{font-size:9pt}.judgment p{font-size:9pt;line-height:1.4;margin-top:1mm}.judgment .dots{height:18px}.dots i{width:10px;height:10px}#metrics{gap:2mm}.metric{padding:3mm}.metric b{font-size:7pt;letter-spacing:0}.metric strong{font-size:20pt;margin:3mm 0;gap:2px}.metric .divider{font-size:20pt}.metric .divider,.metric .ceiling{color:#bbc0c3}.metric>span{font-size:8pt;line-height:1.4}
}

@media print{html{background:#fff!important;color-scheme:light}@page{background:#fff}}

/* Compact explanations and single-page print composition. */
.assessment-label{padding-top:14px;margin-top:16px;margin-bottom:8px}.assessment-label+#judgments{padding-top:0}.assessment-label+#judgments .judgment:first-child{border-top:0;padding-top:4px}.traceNote{color:var(--ink)}.metric{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;padding:13px}.metric b{grid-column:1/-1}.metric strong{margin:3px 0;align-self:center}.metric>span{align-self:center;font-size:12px;line-height:1.4}
@media print{
 @page{size:A4;margin:18mm}header{padding-bottom:5mm;margin-bottom:5mm}.brand{font-size:17pt}h1{font-size:20pt}.intro{font-size:9pt;margin-bottom:7mm}main,body.expanded main{display:grid;grid-template-columns:1fr 1fr;gap:8mm;align-items:start}.activity{break-after:auto;min-width:0}aside{min-width:0}.topic{font-size:23pt}.composition{padding-bottom:4mm;margin-bottom:4mm}#preview{font-size:11.5pt;line-height:1.55}.composition .small{font-size:7.5pt;line-height:1.4}.composition nav .label{margin:0 0 2mm}#board{padding:3mm;gap:2mm}.tile{font-size:8.5pt;padding:1.5mm 2mm;line-height:1.35}.reading-tools{margin-bottom:4mm}aside h2{font-size:17pt;margin-bottom:4mm}.reading{font-size:10.5pt;line-height:1.5}.small{font-size:7.5pt}.traceNote{color:#42535c;font-size:8pt;line-height:1.45;margin:4mm 0;padding-top:3mm}.assessment-label{padding-top:3mm;margin:3mm 0 2mm;font-size:8pt}#judgments{margin-bottom:4mm}.judgment{grid-template-columns:21mm 1fr;gap:2mm;padding-top:2.5mm;margin-bottom:2.5mm}.judgment .dots{gap:4px}.dots i{width:9px;height:9px}.judgment b{font-size:8pt;line-height:14px}.judgment p{font-size:7.5pt;line-height:1.4}.judgment .dots{height:14px}#metrics{grid-template-columns:1fr;gap:2mm}.metric{padding:2.5mm;gap:1mm 3mm;grid-template-columns:24mm 1fr}.metric b{font-size:7pt}.metric strong{font-size:18pt;margin:1mm 0}.metric .divider{font-size:18pt}.metric>span{font-size:7.5pt}.traceNote .label{font-size:8pt}
}

@media print{#board{display:block;height:auto!important}.tile{display:inline-flex!important;transform:none!important;margin:0 1mm 2mm 0!important;vertical-align:top}#metrics{grid-template-columns:1fr 1fr}.metric{display:block;padding:2.5mm}.metric strong{margin:2mm 0}.metric>span{display:block;font-size:7pt}.metric b{font-size:6.5pt}.traceNote{margin:3mm 0;padding-top:2mm}.assessment-label{margin-top:2mm;padding-top:2mm}}
@media print{main{margin-bottom:0}aside>p:last-child{margin-bottom:0}header{padding-bottom:3mm;margin-bottom:3mm}.intro{margin-bottom:4mm}body{margin:0!important}#metrics+.small{margin-bottom:0}}

/* R.E. annotated interface: clear section rules and instruction hierarchy. */
header .brand{padding-bottom:12px;border-bottom:1px solid var(--line);width:60%;align-self:flex-end}.intro-band{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding-bottom:16px;margin-bottom:24px;border-bottom:5px solid var(--gold)}.intro-band h1{margin:26px 0 12px}.intro-band .intro{margin-bottom:0}.primary-actions{display:flex;gap:10px;flex-shrink:0}.primary-actions button{white-space:nowrap}main{gap:42px;position:relative}aside{position:relative;padding-left:24px;border-left:1px solid var(--line)}.composition nav,.arrangement-tools,.reading-tools{border-bottom:1px solid var(--gold);padding-bottom:8px}.composition nav{margin-bottom:0}.composition #preview{padding:15px 0 16px;margin-top:0;border-bottom:1px solid var(--gold)}.composition #trace{padding:12px 0;border-bottom:1px solid var(--gold)}.composition .small{margin-top:5px}.composition{padding-bottom:18px;margin-bottom:20px}.arrangement-tools{margin-bottom:12px}.arrangement-tools .label{align-self:flex-end;margin-bottom:4px}#status{font-size:15px;color:var(--ink);line-height:1.5;margin:0 0 13px;min-height:0}.count{text-align:right;margin:8px 0 12px;color:var(--muted)}.reading-tools{margin-bottom:22px}.reading-tools .label{margin:0}.traceNote .label{border-bottom:1px solid var(--gold);padding-bottom:7px}.assessment-label{border-top:0;border-bottom:1px solid var(--gold);padding:0 0 6px;margin-top:22px;margin-bottom:8px}.movement-heading{border-bottom:1px solid var(--gold);padding-bottom:7px;margin-bottom:5px}.movement-note{margin:0 0 13px}.tray{padding-top:16px}#judgments{margin-bottom:22px}
@media(max-width:1000px){.intro-band{align-items:flex-start;flex-direction:column;gap:16px}.primary-actions{align-self:flex-end}main{gap:25px}}
@media(max-width:850px){header .brand{width:auto;max-width:65%}aside{border-left:0;padding-left:0;padding-top:22px;border-top:1px solid var(--line)}.intro-band h1{font-size:29px}.intro-band{margin-bottom:20px}.primary-actions{align-self:flex-start}.arrangement-tools .label{margin-bottom:8px}}
@media print{header .brand{width:auto;border:0;padding:0}.intro-band{display:block;border-bottom:1px solid #bfc5c6;padding-bottom:3mm;margin-bottom:5mm}.intro-band h1{font-size:18pt;margin:0 0 2mm}.intro-band .intro{margin:0;font-size:8pt}.primary-actions{display:none}main{gap:7mm}aside{border-left:1px solid #d4d9da;border-top:0;padding:0 0 0 4mm}.composition nav,.arrangement-tools,.reading-tools,.composition #preview,.composition #trace,.traceNote .label,.assessment-label,.movement-heading{border-color:#bfc5c6}.composition #preview{padding:2mm 0 3mm}.composition{padding-bottom:3mm;margin-bottom:3mm}.composition .small{margin-top:2mm}.count{margin:2mm 0}.reading-tools{margin-bottom:3mm}.traceNote .label{padding-bottom:2mm}.assessment-label{margin-top:3mm;padding-bottom:2mm}.movement-note{margin:0 0 2mm;font-size:7pt}.movement-heading{margin-bottom:1mm;padding-bottom:2mm}#judgments{margin-bottom:3mm}.arrangement-tools{padding-bottom:1mm;margin-bottom:2mm}}

.themes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 28px}.themes button{min-height:46px}.topic{margin-bottom:6px}#dealInfo{margin:0 0 19px}#trace{overflow-x:auto}#trace svg{min-width:760px}.tile{overflow-wrap:anywhere}
@media(max-width:850px){.themes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.themes button{font-size:11px;padding:9px 5px}.metric{grid-template-columns:1fr}.metric b{grid-column:auto}}
@media print{.themes{display:none}#dealInfo{font-size:7pt;margin:0 0 3mm}.topic{margin-bottom:2mm}.metric{display:block}}

footer #share{margin-right:10px}#shareStatus{color:var(--gold)}#shareFallback{display:block;width:100%;min-height:180px;margin-top:16px;padding:15px;font:16px/1.5 Georgia;background:#233349;color:var(--ink);border:1px solid var(--gold)}

.credits{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);line-height:1.7}.credits strong{color:var(--ink)}

/* Compact tiles, equal resting gaps, additions within reach. */
#board{row-gap:10px;padding:22px 16px;min-height:250px;align-items:flex-start}.tile{padding:9px 12px;margin-right:10px;font-size:20px;line-height:1.35;gap:10px}.grip{height:25px}.slot{min-height:45px}.arrangement-help{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:10px 0 15px}.arrangement-help #status{flex:1;max-width:380px;font-size:14px;margin:0;line-height:1.45}.arrangement-help .tray{flex:0 1 auto;padding:0;gap:10px;justify-content:flex-end}.arrangement-help #words{gap:8px}.arrangement-help #words button{min-width:0;padding:8px 13px;font-size:18px;min-height:39px}.arrangement-help .label{font-size:10px;white-space:nowrap}
@media(max-width:1100px){.arrangement-help{align-items:flex-start;flex-direction:column;gap:10px}.arrangement-help #status{max-width:none}.arrangement-help .tray{justify-content:flex-start}}
@media(max-width:850px){#board{row-gap:10px;padding:20px 12px}.tile{font-size:18px;padding:8px 10px;margin-right:10px}.arrangement-help #words button{padding:8px 12px}}
@media print{.arrangement-help{display:none}#board{min-height:0;padding:3mm}.tile{font-size:8.5pt;padding:1.5mm 2mm;gap:0;margin:0 1mm 2mm 0!important;line-height:1.35}}

/* Selection does not expand or mark every insertion slot. */
body.selecting .slot{width:0;background:transparent}body.selecting .slot::after{width:0}body.selecting .slot:focus-visible::after{width:3px}body.selecting .tile:hover::before,body.selecting .tile:focus-visible::before{content:'';position:absolute;left:-7px;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:#fff4bd;pointer-events:none}body.selecting .tile.selected::before{display:none}body.dragging .slot.over{width:26px}body.dragging .slot.over::after{width:3px}body.dragging .tile::before{display:none!important}

/* Placement uses the open gap, never insertion lines. */
.slot::after,.tile::before{display:none!important}body.dragging .slot.over::after{display:block!important}body.selecting:not(.dragging) .tile:not(.selected):hover::before,body.selecting:not(.dragging) .tile:not(.selected):focus-visible::before{display:block!important}.deal-hint{display:block;margin-top:4px;font-size:12px;color:var(--muted)}#dealInfo>span:first-child{color:var(--ink)}
@media print{.deal-hint{display:none}#dealInfo>span:first-child{color:#42535c}}

/* Set credit stays inline; the repeat-deal instruction belongs to its button. */
.theme-choice{min-width:0}.theme-choice button{width:100%}.theme-hint{display:block;visibility:hidden;text-align:center;font-size:11px;line-height:1.35;color:var(--muted);margin-top:7px}.theme-choice.active .theme-hint{visibility:visible}.themes{align-items:start;margin-bottom:20px}#dealInfo{display:flex;align-items:center;white-space:nowrap;overflow-x:auto;gap:0;font-size:13px;line-height:1.5}#dealInfo .set-name,#dealInfo .set-credit{font:inherit;color:var(--muted);flex:none}#dealInfo .set-credit{border-left:1px solid var(--line);margin-left:10px;padding-left:10px}
@media print{#dealInfo{white-space:normal;overflow:visible;display:block;font-size:7pt}#dealInfo .set-name,#dealInfo .set-credit{color:#42535c}.theme-hint{display:none}}

/* Give the composed text breathing room without changing the print layout. */
@media screen{
 .composition #preview{padding-top:24px;padding-bottom:25px;line-height:1.68}
}

.dots i.filled{background:var(--gold)}#model{background:#233349;color:var(--ink);padding:10px;border:1px solid var(--gold);border-radius:7px} .judgment .reason{color:var(--ink)}

/* Invite arrangement first; keep the finished composition close below. */
.activity>.composition{margin-top:26px}.activity>.traceNote{margin-top:26px;padding-top:10px}.activity>.traceNote h2{font:28px/1.25 Georgia,serif;color:var(--ink);margin:12px 0}.activity>.traceNote p{font:21px/1.55 Georgia,serif;color:var(--ink);margin:12px 0 0}#words{flex-wrap:wrap}.arrangement-help .tray{max-width:100%}
@media print{.activity>.composition{margin-top:4mm}.activity>.traceNote{margin-top:4mm;padding-top:2mm}.activity>.traceNote h2{font-size:12pt;margin:2mm 0}.activity>.traceNote p{font-size:8pt;line-height:1.4;margin:2mm 0}#model{display:none}}
.arrangement-help{flex-wrap:wrap}.arrangement-help #status{flex:1 1 220px;max-width:none}.arrangement-help .tray{flex:0 1 auto}

/* Supporting explanation is tertiary; the user's composition remains prominent. */
.activity>.traceNote h2.label{font:700 12px/1.5 Arial,sans-serif;letter-spacing:1.4px;color:var(--gold);margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}.activity>.traceNote p{font:14px/1.55 Arial,sans-serif;color:var(--ink);margin:0}.activity>.traceNote{padding-top:12px}
#refinedText{font:23px/1.6 Georgia,serif;white-space:pre-line;margin:12px 0}#refined{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}
@media print{.activity>.traceNote h2.label{font-size:8pt}.activity>.traceNote p{font-size:8pt}#refinedText{font-size:11pt}}

.activity>.composition{border-bottom:0}.activity>.traceNote{border-top:0}

body.returning-word #words{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px}body.returning-word #status{color:var(--gold)}

#loading{font:italic 24px/1.5 Georgia,serif;color:var(--gold);animation:interpret-pulse 1.6s ease-in-out infinite;margin:16px 0}
@keyframes interpret-pulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){#loading{animation:none}}
#preview.stacked .stanza-gap{height:.7em}
#printDocument{display:none}
@media print{
 @page{size:A4;margin:19mm 20mm 17mm}
 body>*:not(#printDocument){display:none!important}
 body{padding:0!important;margin:0!important;background:#fff!important}
 #printDocument{display:block!important;color:#111;font:10pt/1.5 Arial,sans-serif}
 #printDocument *{color:#111!important;box-shadow:none!important;text-shadow:none!important}
 .paper-page{position:relative;min-height:259mm;padding:0 0 13mm;break-after:page}
 .paper-page:last-child{break-after:auto}
 .paper-brand{font:18pt/1.3 Georgia,serif;border-bottom:1px solid #999;padding-bottom:4mm;margin-bottom:3mm}
 .paper-brand em{font-weight:normal}
 #printDocument h1{font:24pt/1.18 Georgia,serif;margin:6mm 0 7mm}
 #printDocument h2{font:700 8pt/1.4 Arial,sans-serif;letter-spacing:1.2px;border-bottom:1px solid #999;padding:0 0 2mm;margin:5mm 0 3mm;break-after:avoid}
 .paper-meta,.paper-note{font:8pt/1.5 Arial,sans-serif;margin:2mm 0 4mm}
 .paper-composition{font:14pt/1.55 Georgia,serif;overflow-wrap:anywhere}
 .paper-composition .added{font-style:italic}
 .paper-poem .phrase-line{display:block;min-height:1em}
 .paper-poem .stanza-gap{height:.6em;min-height:0}
 .paper-poem{font-size:12pt;line-height:1.45;white-space:normal}
 .paper-reading{font:11.5pt/1.55 Georgia,serif;margin:0 0 3mm;orphans:3;widows:3}
 .paper-judgment{display:grid;grid-template-columns:27mm 1fr;gap:4mm;border-bottom:1px solid #ddd;padding:2.5mm 0;break-inside:avoid}
 .paper-judgment b{font:700 9pt Arial}
 .paper-judgment p{font:9pt/1.45 Arial;margin:1mm 0}
 .paper-dots{display:flex;gap:1.6mm;padding-top:.6mm}
 .paper-dots i{width:2.4mm;height:2.4mm;border:1px solid #222;border-radius:50%}
 .paper-dots i.filled{background:#222!important;print-color-adjust:exact}
 .paper-foot{position:absolute;bottom:0;width:100%;border-top:1px solid #aaa;padding-top:3mm;font:6.8pt/1.5 Arial;letter-spacing:.3px}
 .paper-foot span{float:right}
 .paper-map svg{width:100%;height:auto;max-height:120mm;display:block}
 .paper-map svg text{fill:#222!important}
 .paper-map svg path{stroke:#555!important}
 .paper-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm}
 .paper-metrics .metric{display:block;border-color:#aaa;padding:2.5mm;border-radius:1mm}
 .paper-metrics .metric b{font:700 7pt/1.3 Arial}
 .paper-metrics .metric strong{font:20pt Georgia;margin:2mm 0;gap:2px}
 .paper-metrics .metric .divider,.paper-metrics .metric .ceiling{color:#888!important;font:inherit}
 .paper-metrics .metric>span{font:8pt/1.4 Arial;display:block}
 .paper-method{font:9pt/1.6 Arial}
}

.primary-actions{flex-wrap:wrap;max-width:100%}#model{max-width:100%}

main>.activity,main>aside{min-width:0}
@media print{#printDocument .paper-metrics .metric .divider,#printDocument .paper-metrics .metric .ceiling{color:#888!important}}

@media print{.paper-page{height:259mm;min-height:0;padding-bottom:13mm}.paper-content{display:flow-root}}

@media print{
 .paper-board{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2mm;padding:3mm;border:1px solid #777;border-radius:3mm;background:#f1f1f1;print-color-adjust:exact}
 .paper-tile{display:inline-flex;align-items:center;gap:1.5mm;padding:1.7mm 2.3mm;border:1px solid #aaa;border-radius:1.5mm;background:#fff;font:10pt/1.3 Georgia,serif;max-width:100%;overflow-wrap:anywhere}
 .paper-added{background:#ddd;font-style:italic;border-color:#777}
 .paper-grip{font:12pt/1 Arial;color:#777!important;flex:none}
}

@media print{#printDocument{width:170mm}.paper-content{width:170mm}}

/* Reading controls align with the reading column; exports stay together. */
@media screen{
 .intro-band{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:42px;align-items:end}
 .primary-actions{padding-left:25px;align-items:flex-end;align-self:end;gap:10px;min-width:0}
 .model-choice{display:flex;flex-direction:column;gap:8px;flex:1 1 155px;min-width:0}
 .model-choice .label{margin:0;font-size:11px;white-space:nowrap}
 .model-choice #model{width:100%;min-height:44px;font:600 12px Arial,sans-serif;letter-spacing:.4px;color:var(--gold)}
 .primary-actions #read{flex:1 0 auto;min-height:44px}
 footer>#print{margin-left:10px}
}
@media screen and (max-width:1000px){.intro-band{gap:25px}}
@media screen and (max-width:850px){.intro-band{grid-template-columns:1fr;gap:20px}.primary-actions{padding-left:0;width:100%;max-width:440px;justify-self:start}.model-choice{flex-basis:145px}}

@media screen and (max-width:480px){.model-choice{flex-basis:100%}.primary-actions #read{width:100%}}

/* Themes belong to the arrangement column. */
@media screen{
 .activity>.themes{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:22px}
 .activity>.themes button{padding:10px 5px;font-size:11px;letter-spacing:.15px;min-height:42px}
 .activity>.themes .theme-hint{font-size:10px;line-height:1.35;margin-top:6px}
}
@media screen and (min-width:851px){main>aside{padding-top:8px}}
@media screen and (min-width:851px) and (max-width:1150px){.activity>.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:600px){.activity>.themes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Category is the index; the chosen subject keeps the main heading hierarchy. */
@media screen{
 .activity>.themes button{font-size:14px;letter-spacing:.2px;padding:10px 6px;line-height:1.3}
 .activity>.themes .theme-hint{font-size:11px;font-weight:bold;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);text-align:center;white-space:nowrap}
 .category-label{margin:0 0 7px;color:var(--gold);font-size:11px}
 .activity>.topic{color:var(--ink)}
}

#cancelReadingWait{align-self:end;white-space:nowrap} .judgment .reason-more{display:inline;padding:2px 6px;margin-left:6px;min-height:28px;font-size:12px;letter-spacing:0}

.category-choice-label{margin:0 0 10px}