/* Artwork presentation adapted from the local Endless companion. Dark only. */
:root{color-scheme:dark;--ink:#dcd9cc;--muted:#a6a799;--line:#41453b;--paper:#111210;--accent:#dcd9cc;--surface:#191b17;font-family:monospace;color:var(--ink)}
body{font-family:monospace;color:var(--ink);background:var(--paper)}
header{position:fixed;top:28px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;pointer-events:none}
header h1{font:400 13px/1.5 monospace;letter-spacing:.25em;text-transform:uppercase;margin:0}
header .artist-credit{font:400 10px/1.5 monospace;letter-spacing:.16em;color:var(--ink);text-decoration:none;pointer-events:auto;white-space:nowrap}header .artist-credit:hover{color:white}
.panel{right:30px;bottom:65px;background:rgba(17,18,16,.95);border:1px solid var(--line);border-radius:0;backdrop-filter:none;padding:18px;gap:15px;max-height:calc(100svh - 130px)}
.panel .pane{min-height:0;flex:1 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin}.panel .tabs,.panel .actions{flex-shrink:0}
.tabs{border-color:var(--line);gap:24px}.tabs button{font:11px monospace;letter-spacing:0;color:var(--muted)}.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.panel .label{font:10px monospace;letter-spacing:.08em;color:var(--muted)}.label output{color:var(--ink)}
select,#spectrum,#resetBody,.actions button,.bottom button,#restore,.save-buttons button{font:11px monospace;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0}
select{background:var(--paper)}.actions button[aria-pressed=true]{color:var(--ink);border-color:var(--muted);background:var(--surface)}
.body-note,.guide,#saveStatus{color:var(--muted)}.body-note{font:11px/1.7 monospace}.label{line-height:1.5}
.bottom{left:30px;right:30px;bottom:18px;justify-content:center;gap:22px}.guide{font:10px monospace;letter-spacing:0}.bottom button{border:0;padding:8px 3px}.bottom button:hover{color:white}
#restore{background:var(--paper);color:var(--ink);border-color:var(--line)}input[type=range]{accent-color:var(--ink)}.swatch,.slot{border-color:var(--paper)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:1px solid #aaa;outline-offset:3px}
#colourSpread{display:block;width:100%;margin-bottom:14px}#exportOverlay{background:rgba(17,18,16,.94)}#exportOverlay progress{accent-color:var(--ink)}#cancelExport{color:var(--ink);border-color:var(--line)}
#artistStatement{max-width:480px;width:calc(100% - 36px);max-height:85svh;overflow:auto;padding:26px;background:#191b17;border:1px solid #4c5044;color:var(--ink)}#artistStatement::backdrop{background:#0009}#artistStatement form{text-align:right}#artistStatement button{background:none;border:0;color:var(--muted);padding:6px;font:11px monospace}#artistStatement h2{font:400 16px/1.5 monospace;margin:20px 0}#artistStatement p{font:14px/1.7 Georgia,serif}#artistStatement .statement-label,#artistStatement .statement-signature{font:10px/1.7 monospace;letter-spacing:.1em;color:var(--muted)}.statement-signature{margin-top:28px}
@media(max-width:700px){header{top:20px;left:20px;right:20px;gap:12px}header h1{font-size:11px;letter-spacing:.16em}header .artist-credit{font-size:8px;letter-spacing:.12em}.panel{left:5%;right:5%;bottom:15px;padding:14px;gap:8px;max-height:36svh}.panel .pane{max-height:none}.panel select{min-height:40px}.tabs button,.panel .actions button{min-height:40px}.bottom{left:6%;right:6%;bottom:calc(36svh + 29px);gap:12px;justify-content:space-between}.bottom button{font-size:10px}.guide{font-size:9px;max-width:105px;line-height:1.5}.tabs{gap:22px}}
.work-subtitle{display:block;margin-top:7px;font-size:9px;letter-spacing:.08em;text-transform:none;color:var(--muted)}
@media(max-width:700px){.work-subtitle{font-size:8px;letter-spacing:0}}

@media(max-width:700px) and (max-height:550px){.panel{left:auto;right:15px;width:250px;max-height:calc(100svh - 90px);bottom:15px}.bottom{left:20px;right:auto;bottom:15px;max-width:calc(100vw - 290px);flex-wrap:wrap;gap:5px}.guide{display:none}}

/* On phones the figure is the first encounter; controls unfold on request. */
#closeControls{display:none}
@media(max-width:700px){
 .panel{bottom:calc(12px + env(safe-area-inset-bottom));left:16px;right:16px;padding:4px 14px;max-height:44svh;gap:0}
 .panel .tabs{border:0;justify-content:space-around;gap:16px;min-height:48px;align-items:center}
 .panel .tabs button{padding:10px 4px;min-height:44px}
 body:not(.controls-open) .panel .pane,body:not(.controls-open) .panel .actions{display:none}
 body:not(.controls-open) .panel .tabs button{border-color:transparent}
 .controls-open .panel{padding:10px 14px;gap:9px}
 .controls-open .panel .tabs{border-bottom:1px solid var(--line);justify-content:space-between}
 .controls-open #closeControls{display:block;font:10px monospace;color:var(--muted);margin-left:auto}
 .bottom{bottom:calc(76px + env(safe-area-inset-bottom));left:20px;right:20px}
 .controls-open .bottom{bottom:calc(44svh + 24px + env(safe-area-inset-bottom))}
 .guide{max-width:none}.bottom button{min-height:36px}
}
@media(max-width:700px) and (max-height:550px){
 .controls-open .panel{left:auto;right:15px;width:250px;max-height:calc(100svh - 90px)}
 .controls-open .bottom{bottom:15px;right:auto;max-width:calc(100vw - 290px)}
}

/* Keep selection halos inside the scrollable colour pane. */
.swatches,#colorSlots{padding:2px 12px;flex-shrink:0}
.swatch,.slot{flex-shrink:0}