:root{--reality:var(--muted);--imaginary:var(--muted);--transfer:var(--ink)}body{background:var(--card)}#app{max-width:1440px;margin:0 auto;padding:32px 38px 40px}.page-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.13em;color:var(--muted);margin:0 0 10px}h1{font-size:clamp(30px,3.2vw,43px);font-weight:650;letter-spacing:-.05em;margin:0}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--muted);font-size:14px;font-weight:600;line-height:1.35}.button:hover:not(:disabled){background:var(--card);border-color:var(--accent-line)}.button>span{font-size:12px;background:var(--accent-soft);padding:1px 6px;border-radius:4px}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.button.primary:hover:not(:disabled){background:var(--accent)}.button.quiet{background:transparent;border-color:transparent;color:var(--muted)}.text-button{background:none;border:0;padding:0;color:var(--accent);font-size:14px;font-weight:600;line-height:1.5;text-align:left}.text-button:hover{text-decoration:underline;text-underline-offset:3px}.text-button.danger{color:var(--muted)}.problem-bar{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px 23px 12px}.problem-meta{display:flex;align-items:center;justify-content:space-between;gap:16px}.problem-meta label{font-size:14px;font-weight:600;color:var(--muted)}.problem-meta>span{font-size:12px;color:var(--muted)}.problem-bar textarea{display:block;width:100%;border:0;background:none;resize:none;overflow:hidden;font-size:24px;line-height:1.4;color:var(--ink);padding:9px 0 0;min-height:56px;letter-spacing:-.02em}.problem-bar textarea::placeholder{color:var(--muted)}.board-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:23px 0 14px}.board-intro p{font-size:14px;color:var(--muted);margin:0}.board-intro strong{font-weight:600;color:var(--muted)}.board-intro>span{font-size:12px;color:var(--muted)}.playground{display:grid;grid-template-columns:minmax(265px,28%) minmax(0,1fr);gap:22px;align-items:stretch}.reality-zone{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:19px;min-width:0}.zone-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:12px}.zone-title h2{font-size:18px;letter-spacing:-.02em;margin:6px 0 0;font-weight:650}.section-label{font-size:11px;letter-spacing:.12em;font-weight:750;color:var(--muted)}.add-button{height:34px;width:34px;border:1px solid var(--accent-line);border-radius:4px;background:var(--card);font-size:23px;color:var(--muted)}.add-button:hover{background:var(--card)}.current-cards{display:grid;gap:11px}.constraint-card{position:relative;border:1px solid var(--line);border-radius:4px;background:var(--card);box-shadow:0 3px 8px color-mix(in srgb, var(--shadow-ink) 2.7%, transparent);padding:11px 14px;min-width:0}.constraint-card.selected{outline:2px solid var(--accent);outline-offset:-2px}.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.type{font-size:10px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--muted)}.type.physical{color:var(--muted)}.type.contract{color:var(--muted)}.type.organisation{color:var(--muted)}.type.habit{color:var(--muted)}.drag-handle{touch-action:none;user-select:none;cursor:grab;width:29px;height:29px;background:var(--card);border:1px solid transparent;border-radius:4px;font-size:23px;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center}.drag-handle:active{cursor:grabbing}.drag-handle:hover{background:var(--accent-soft);border-color:var(--line);color:var(--accent)}.card-text{display:block;border:0;background:none;text-align:left;color:var(--ink);font-size:16px;line-height:1.5;font-weight:500;width:100%;padding:4px 0 8px;overflow-wrap:anywhere}.card-text:hover{color:var(--accent)}.card-bottom{display:flex;gap:9px;align-items:center;justify-content:space-between}.small-button{font-size:12px;font-weight:600;border:0;padding:3px 0;background:transparent;color:var(--muted);display:flex;gap:6px}.restored-tag,.imaginary-tag{font-size:10px;color:var(--muted)}.imaginary-tag{color:var(--muted)}.experiment-zone{display:grid;gap:12px;min-width:0;grid-template-rows:auto repeat(3,minmax(112px,auto));align-content:stretch}.experiment-title{display:flex;gap:15px;align-items:center;padding:0 2px}.experiment-title p{margin:0;font-size:14px;color:var(--muted)}.experiment-lane{display:grid;grid-template-columns:155px minmax(0,1fr);gap:17px;align-items:center;min-height:124px;padding:17px 20px;border:1px dashed var(--line-strong);background:var(--card);border-radius:4px;min-width:0}.lane-reverse{background:var(--card);border-color:var(--accent-line)}.lane-exaggerate{background:var(--warn-soft);border-color:var(--warn-line)}.lane-title{display:flex;align-items:center;gap:13px}.lane-symbol{width:35px;flex:none;font-size:30px;font-weight:450;color:var(--muted);text-align:center}.lane-reverse .lane-symbol{color:var(--muted)}.lane-exaggerate .lane-symbol{font-size:24px;color:var(--muted)}.lane-title h3{font-size:18px;font-weight:650;margin:0 0 5px;letter-spacing:-.02em}.lane-title p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}.lane-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;min-width:0}.lane-cards .constraint-card{background:color-mix(in srgb, var(--card) 91.8%, transparent)}.drop-instruction{border:1px dashed var(--line-strong);border-radius:4px;min-height:80px;display:flex;align-items:center;justify-content:center;gap:11px;color:var(--muted);font-size:14px;padding:13px}.drop-instruction>span{font-size:21px;font-weight:300}.lane-reverse .drop-instruction{border-color:var(--line);color:var(--muted)}.lane-exaggerate .drop-instruction{border-color:var(--warn-line);color:var(--muted)}.empty-zone{font-size:14px;color:var(--muted);line-height:1.7;padding:17px 4px;margin:0}.is-dragging{opacity:.3}.is-drop-target{outline:3px solid var(--accent)!important;outline-offset:2px;background:var(--accent-soft)!important}.notebook{margin-top:27px;background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;scroll-margin-top:22px}.notebook-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:23px 26px;border-bottom:1px solid var(--line)}.notebook-heading .eyebrow{font-size:10px;margin-bottom:8px}.notebook h2{font-size:22px;font-weight:650;letter-spacing:-.025em;margin:0}.notebook-heading .text-button{flex:none;font-size:12px}.notebook-grid{display:grid;grid-template-columns:minmax(240px,33%) minmax(0,1fr)}.notebook-grid.transferred{grid-template-columns:minmax(225px,27%) minmax(0,1fr) minmax(0,1fr)}.actual-panel,.whatif-panel,.transfer-panel{padding:25px 26px;min-width:0}.actual-panel{background:var(--card);border-right:1px solid var(--line)}.notebook h3{font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.4;margin:10px 0 20px}.field{margin-top:20px;min-width:0}.field label{font-size:14px;font-weight:650;line-height:1.5;display:block;margin-bottom:7px;color:var(--muted)}.field>p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 9px}.field textarea,.field select{width:100%;display:block;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:10px 12px;color:var(--muted);line-height:1.6;font-size:16px;min-height:48px}.field textarea{overflow:hidden;min-height:70px;resize:vertical}.field textarea:hover,.field select:hover{border-color:var(--accent-line)}.field textarea:focus{border-color:var(--accent-line)}.actual-note{font-size:13px;line-height:1.7;color:var(--muted);margin:21px 0 0}.lens-prompt{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 20px}.return-button{margin-top:24px}.microcopy{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 0}.transfer-panel{border-left:1px solid var(--line);background:var(--card)}.transfer-panel .section-label{color:var(--muted)}.transfer-panel h3{color:var(--muted)}.transfer-prompt{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.return-status{font-size:13px;font-weight:600;color:var(--muted);padding-top:19px;border-top:1px solid var(--line);margin:24px 0 0}.move-choices{display:grid;gap:10px}.move-choice{display:flex;align-items:center;gap:17px;width:100%;text-align:left;padding:15px 18px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--muted)}.move-choice:hover:not(:disabled){background:var(--card);border-color:var(--accent-line)}.move-choice>b{font-size:26px;font-weight:450;min-width:38px;text-align:center;color:var(--muted)}.move-choice strong{font-size:16px;font-weight:600;display:block}.move-choice>span>span{font-size:14px;line-height:1.5;color:var(--muted);display:block;margin-top:3px}.empty-note{padding:29px}.empty-note p{color:var(--muted);margin:13px 0 19px}.local-footer{margin-top:28px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.local-footer p{margin:0}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-accent);font-size:14px;line-height:1.55;padding:13px 20px;border-radius:4px;box-shadow:0 5px 24px color-mix(in srgb, var(--shadow-ink) 13.3%, transparent);width:max-content;max-width:calc(100% - 30px);z-index:1100;pointer-events:none}.notice{padding:16px 20px;background:var(--card);border:1px solid var(--warn-line);border-radius:4px;margin-bottom:20px;font-size:14px;color:var(--warn);line-height:1.7}.notice .text-button{display:block;margin-top:6px;color:var(--warn)}dialog{width:650px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 40px);overflow:auto;padding:27px;border:1px solid var(--line);border-radius:4px;color:var(--ink);box-shadow:0 20px 80px color-mix(in srgb, var(--shadow-ink) 22.0%, transparent)}dialog::backdrop{background:color-mix(in srgb, var(--shadow-ink) 40.0%, transparent);backdrop-filter:blur(2px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:20px}.dialog-top h2{font-size:25px;margin:0;font-weight:650}.close{width:34px;height:34px;border:0;border-radius:4px;background:var(--card);color:var(--muted);font-size:25px;line-height:1}.dialog-description{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 22px}.moving-name{padding:16px;border-left:3px solid var(--accent-line);background:var(--card);font-size:16px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}.new-options,.export-options{display:flex;gap:9px;flex-wrap:wrap}.workspace-list{display:grid;gap:8px;margin:24px 0}.workspace-list button{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--muted)}.workspace-list button:hover{background:var(--card)}.workspace-list strong{display:block;font-size:16px;line-height:1.6;font-weight:550;overflow-wrap:anywhere}.workspace-list small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.workspace-list button>span:last-child{font-size:12px;flex:none}
@media(max-width:1100px){#app{padding:28px 24px}.playground{grid-template-columns:265px minmax(0,1fr);gap:17px}.experiment-lane{grid-template-columns:135px minmax(0,1fr);padding:16px;gap:12px}.lane-title{gap:8px}.lane-symbol{width:29px}.notebook-grid.transferred{grid-template-columns:1fr 1fr}.transferred .transfer-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.transfer-panel>.section-label,.transfer-panel>h3,.transfer-prompt{grid-column:1/-1}.board-intro{align-items:flex-start}.board-intro>span{max-width:150px;text-align:right;line-height:1.6}}
@media(max-width:820px){.page-top{align-items:flex-start;flex-direction:column;gap:19px}.toolbar{width:100%}.toolbar .quiet{margin-left:auto;order:3}.playground{grid-template-columns:1fr}.current-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.experiment-lane{grid-template-columns:150px minmax(0,1fr)}.experiment-zone{grid-template-rows:auto;gap:13px}.notebook-grid,.notebook-grid.transferred{grid-template-columns:1fr 1fr}.notebook-heading{padding:22px}.actual-panel,.whatif-panel,.transfer-panel{padding:22px}.notebook h2{font-size:20px}.local-footer{flex-direction:column;gap:5px}}
@media(max-width:520px){#app{padding:24px 17px 30px}.page-top{margin-bottom:20px}.eyebrow{font-size:10px}h1{font-size:31px}.toolbar{gap:7px}.button{font-size:14px;padding:9px 11px}.problem-bar{padding:17px 17px 10px}.problem-meta{align-items:flex-start;flex-direction:column;gap:5px}.problem-meta label{font-size:14px}.problem-meta>span{font-size:11px}.problem-bar textarea{font-size:22px;line-height:1.45}.board-intro{flex-direction:column;gap:7px;margin-top:20px}.board-intro p{font-size:14px;line-height:1.6}.board-intro strong{display:block;margin-bottom:2px}.board-intro>span{max-width:none;text-align:left;font-size:11px}.reality-zone{padding:16px}.current-cards{grid-template-columns:1fr}.constraint-card{padding:12px 14px}.card-text{font-size:16px}.card-top .type{font-size:11px}.small-button{font-size:14px;padding:4px 0}.card-bottom{margin-top:2px}.drag-handle{width:36px;height:32px}.experiment-lane{grid-template-columns:1fr;padding:17px;gap:15px}.lane-title{gap:12px}.lane-title>div{display:flex;align-items:baseline;gap:13px}.lane-title h3{font-size:18px;margin:0}.lane-title p{font-size:12px}.lane-symbol{width:35px;font-size:28px}.lane-cards{grid-template-columns:1fr}.drop-instruction{min-height:69px;font-size:14px}.experiment-title{gap:12px;margin-top:7px}.experiment-title p{font-size:13px}.notebook{margin-top:23px}.notebook-heading{padding:20px;align-items:flex-start;gap:12px}.notebook-heading h2{font-size:20px;line-height:1.35}.notebook-heading .text-button{font-size:12px;width:48px;text-align:right}.notebook-heading .eyebrow{font-size:9px}.notebook-grid,.notebook-grid.transferred{grid-template-columns:1fr}.actual-panel,.whatif-panel,.transfer-panel{padding:22px 20px}.actual-panel{border-right:0;border-bottom:1px solid var(--line)}.transferred .transfer-panel{display:block}.field textarea,.field select{font-size:16px;padding:11px 12px}.field label,.field>p{font-size:14px}.notebook h3{font-size:18px}.actual-note{font-size:12px}.return-button{width:100%}.local-footer{font-size:11px;line-height:1.6}.toast{font-size:14px;padding:12px 16px;bottom:16px}dialog{padding:22px 18px}.dialog-top h2{font-size:23px}.new-options .primary{width:100%}.export-options{flex-direction:column}.moving-name{padding:13px}.notice{padding:14px 16px}.move-choice{padding:14px}}

/* Keep action labels readable; pale canvas colours carry the grouping, not the text. */
.small-button,.notebook-heading .text-button{font-size:14px}
.notebook-heading .text-button{width:auto;max-width:100px}
.field>p,.actual-note,.microcopy,.empty-zone,.local-footer,.dialog-description{color:var(--muted)}
.board-intro p,.experiment-title p,.lane-title p{color:var(--muted)}
.drop-instruction{color:var(--muted)}.lane-reverse .drop-instruction{color:var(--muted)}.lane-exaggerate .drop-instruction{color:var(--muted)}
.transfer-prompt{color:var(--muted)}.move-choice>span>span{color:var(--muted)}
.restored-tag{color:var(--muted)}.imaginary-tag{color:var(--muted)}

/* Practical alternatives extend the same paper, rules and semantic colours. */
.adaptations{margin-top:32px;border-top:2px solid var(--line);padding-top:28px}
.adaptations p{font-size:18px;line-height:1.5}.adaptations h2{font-size:30px;margin:0}.adaptations h3{font-size:25px;margin:0 0 12px}.adaptations h4{font:500 21px var(--display);margin:0 0 16px}
.adaptation-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.adaptation-heading .eyebrow{font-size:11px}.adaptation-heading .toolbar{width:auto}
.adaptation-collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:22px 0}.adaptation-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:4px;background:var(--card)}.adaptation-card.selected{border:2px solid var(--accent);padding:17px}.adaptation-card .card-text{font-size:21px;line-height:1.3}.adaptation-card p{white-space:pre-wrap;overflow-wrap:anywhere}.adaptation-card .microcopy{font-size:15px}.compare-check{display:flex;gap:10px;align-items:center;min-height:44px}.compare-check input{width:20px;height:20px;accent-color:var(--accent)}.chosen-label{color:var(--good);font-weight:600}
.adaptation-editor{border:1px solid var(--line);background:var(--card);padding:26px;scroll-margin-top:20px}.adaptation-writing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.adaptation-editor details{margin-top:22px}.adaptation-editor summary,.adaptations>details>summary{cursor:pointer;min-height:44px;align-content:center;font-size:18px}.adaptation-editor textarea{min-height:88px}.adaptation-editor .field p{font-size:16px}
.fit-intro{display:flex;gap:24px;align-items:center;margin:32px 0 20px}.fit-intro>div{flex:1}.fit-intro .microcopy{font-size:16px}.fit-scroll{overflow:auto;scrollbar-gutter:stable;overscroll-behavior-x:contain}.fit-board{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px;align-items:start}.fit-lane{min-width:0;min-height:150px;padding:15px;background:var(--surface);border-top:3px solid var(--line)}.fit-fits{border-color:var(--good)}.fit-change{border-color:var(--warn)}.fit-lane h4 span{font:12px var(--mono);margin-left:6px;color:var(--muted)}.fit-card{padding:14px;border:1px solid var(--line);border-radius:4px;background:var(--card);margin-bottom:14px;min-width:0}.fit-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}.fit-card .fit-statement{margin:12px 0 18px;overflow-wrap:anywhere}.fit-card select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:3px}.fit-card>label{font-size:16px;display:block;margin:18px 0 8px}.fit-card .field{margin-top:14px}.fit-card .field label{font-size:16px}.fit-card textarea{min-height:110px;font-size:18px}.fit-alert{border-left:3px solid var(--warn);padding:12px;margin:12px 0;background:var(--warn-soft)}.fit-alert,.fit-alert p{font-size:16px;overflow-wrap:anywhere}.fit-card details{margin:8px 0}.fit-card .type{font-size:12px}.fit-scroll-hint{color:var(--muted);font-size:15px!important}
.adaptation-comparison{margin-top:30px}.adaptation-table-scroll{overflow:auto;overscroll-behavior-x:contain;border:1px solid var(--line)}.adaptation-table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:18px;table-layout:fixed}.adaptation-table :is(th,td){padding:16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;text-align:left;min-width:260px;max-width:340px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--card)}.adaptation-table tr>:first-child{position:sticky;left:0;z-index:1;min-width:160px;max-width:160px;width:160px;background:var(--surface);font-size:16px}.adaptation-table thead th{background:var(--surface);font-weight:500}.adaptation-table th .text-button{font-size:21px;display:block;margin-bottom:15px}.adaptation-table .button{white-space:normal}.adaptation-table tr:last-child>*{border-bottom:0}.adaptation-table tr>:last-child{border-right:0}
#dialog:has(.ancestry-scroll){width:1000px}.transfer-panel>.button{margin-top:20px}.transfer-panel details{margin-top:20px}.transfer-panel summary{font-size:16px;cursor:pointer;min-height:44px;align-content:center}.drag-handle{min-width:44px;min-height:44px}
@media(max-width:1100px){.transferred .transfer-panel>.button,.transferred .transfer-panel>details,.transferred .transfer-panel>.microcopy{grid-column:1/-1}}
@media(max-width:650px){.adaptation-heading,.fit-intro{flex-direction:column;align-items:start;gap:14px}.adaptation-editor{padding:18px 14px}.adaptation-writing{grid-template-columns:minmax(0,1fr);gap:0}.adaptations h2{font-size:28px}.adaptations h3{font-size:24px}.adaptation-heading .toolbar{gap:8px}.adaptation-table tr>:first-child{min-width:112px;max-width:112px;width:112px;font-size:15px;padding:12px}.adaptation-table :is(th,td){min-width:245px;padding:14px}.fit-board{grid-template-columns:repeat(3,270px)}.adaptation-collection{grid-template-columns:1fr}.fit-scroll{margin-inline:-5px}.adaptations .ancestry-field p{font-size:17px}}
