:root { --paper:#eee7d7; --ink:#453131; --muted:#6e5148; --line:#bfb0a0; --red:#8e2639; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); scroll-behavior:smooth; scrollbar-color:#9c7c70 var(--paper); }
body { background:var(--paper); color:var(--ink); }
h1,h2,p { color:inherit; }
a { text-underline-offset:5px; }
a:hover { color:var(--red); border-color:var(--red); }
::selection { color:#fff8e8; background:var(--red); }
:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
.skip { position:fixed; left:18px; top:-80px; padding:12px 18px; z-index:10; color:var(--paper); background:var(--ink); }
.skip:focus { top:14px; }
.skip:hover { color:var(--paper); background:var(--red); }
main { max-width:1600px; margin:auto; }
.experience { padding:0 4.5%; }
.masthead { min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:24px; }
.artist { font:300 27px/1.2 var(--font-serif); letter-spacing:-.025em; }
.back { font-size:13px; padding:14px 0; }
.introduction { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; padding:43px 0 6px; position:relative; z-index:1; }
h1 { font-size:clamp(48px,6.2vw,88px); line-height:1.02; letter-spacing:-.04em; }
h1 em { font-weight:300; color:var(--red); }
.introduction>p { font-size:15px; line-height:1.5; margin:0 0 4px; color:var(--muted); }
.art-stage { position:relative; width:100%; height:clamp(400px,43vw,620px); touch-action:none; overflow:hidden; cursor:crosshair; }
#art-canvas,#art-fallback { position:absolute; width:100%; height:100%; inset:0; display:block; }
#art-fallback { object-fit:contain; padding:25px; }
#art-canvas { visibility:hidden; }
[data-renderer=webgpu] #art-canvas { visibility:visible; }
[data-renderer=webgpu] #art-fallback { visibility:hidden; }
.stage-caption { display:flex; justify-content:space-between; align-items:center; margin:0 0 20px; gap:30px; }
.stage-caption p { margin:0; font-size:14px; line-height:1.5; }
.stage-caption p span { color:var(--muted); }
.stage-caption a { font-size:13px; border-bottom:1px solid var(--line); padding:5px 0; }
form { display:grid; grid-template-columns:290px 1fr; gap:20px 40px; border-top:1px solid var(--line); padding:22px 0 16px; }
.actions { display:flex; align-items:center; gap:10px; align-self:end; }
button { min-height:46px; border:1px solid var(--line); border-radius:0; padding:0 17px; font:400 13px/1 var(--font-sans); color:var(--ink); background:transparent; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
button:hover { background:#e0d4c2; border-color:var(--muted); }
#play { background:var(--red); color:#fff8e8; border-color:var(--red); min-width:80px; }
#play:hover { background:#6f1e30; border-color:#6f1e30; }
button:disabled { cursor:wait; opacity:.55; }
.sliders { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.control label { display:flex; justify-content:space-between; gap:10px; font-size:13px; line-height:1.4; }
output { color:var(--muted); font-variant-numeric:tabular-nums; }
input[type=range] { appearance:none; -webkit-appearance:none; height:44px; width:100%; margin:0; background:transparent; cursor:pointer; accent-color:var(--red); }
input[type=range]::-webkit-slider-runnable-track { height:1px; background:#a48d7d; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:18px; margin-top:-8.5px; background:var(--red); border:2px solid var(--paper); border-radius:0; box-shadow:0 2px 4px #45313120; }
input[type=range]::-moz-range-track { height:1px; background:#a48d7d; }
input[type=range]::-moz-range-thumb { width:9px; height:15px; background:var(--red); border:2px solid var(--paper); border-radius:0; }
.status { grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; font-size:12px; color:var(--muted); line-height:1.5; }
.keyboard-help { color:var(--muted) !important; margin:0 !important; }
.source { padding:110px 4.5% 100px; display:grid; grid-template-columns:.8fr 1fr; gap:12%; align-items:center; }
.source-copy { max-width:65ch; }
h2 { font-size:clamp(32px,3.6vw,48px); line-height:1.14; margin:0 0 28px; letter-spacing:-.03em; }
h2 em { color:var(--red); }
.source p { font-size:15px; line-height:1.75; margin-bottom:20px; }
.source .interpretation { font-size:13px; color:var(--muted); margin-top:30px; }
figure { margin:0; }
figure img { width:100%; display:block; }
figcaption { display:flex; justify-content:space-between; gap:20px; font-size:12px; padding-top:17px; line-height:1.65; }
figcaption em { font:italic 300 24px/1.2 var(--font-serif); }
figcaption span { text-align:right; color:var(--muted); }
footer { max-width:1456px; margin:auto; padding:26px 0 35px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font-size:13px; width:91%; }
@media (max-width:900px) { form { grid-template-columns:1fr; gap:18px; } .actions { order:0; } .sliders { order:1; } .status { order:2; } .keyboard-help { order:3; } .source { gap:8%; } }
@media (max-width:600px) {
  .experience { padding:0 22px; } .masthead { min-height:70px; } .artist { font-size:25px; } .back { font-size:12px; }
  .introduction { display:block; padding-top:29px; } h1 { font-size:48px; } .introduction>p { font-size:13px; line-height:1.5; margin:13px 0 0; } .introduction>p br { display:none; }
  .art-stage { height:310px; margin:0 -14px; width:calc(100% + 28px); }
  .stage-caption { gap:20px; margin:0 0 19px; align-items:flex-end; } .stage-caption p { font-size:12px; } .stage-caption a { max-width:105px; font-size:12px; line-height:1.5; }
  form { padding-top:16px; gap:17px; } button { min-height:44px; } .actions { gap:10px; } .sliders { gap:14px; } .control label { font-size:12px; display:block; } output { display:block; margin-top:3px; } input[type=range] { height:44px; }
  .status { display:block; font-size:12px; } .status span { display:block; } .status span+span { margin-top:3px; } .keyboard-help { font-size:12px !important; }
  .source { display:flex; flex-direction:column; padding:80px 22px 60px; gap:35px; } .source p { font-size:14px; } h2 { font-size:37px; } footer { font-size:12px; width:calc(100% - 44px); }
  figcaption { flex-direction:column; gap:8px; } figcaption span { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }