:root{--paper:#f5f7fa;--blue:#2445d8;--ink:#182341;--line:#d4dce8;--muted:#5b6780;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0}button,input,a{touch-action:manipulation}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue)}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:8px;padding:10px 14px}button:hover{background:#e7ecf5}button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}a{color:inherit;text-underline-offset:4px}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;font-size:13px;gap:20px}.brand{font-family:Georgia,serif;font-size:28px;font-weight:bold;text-decoration:none;letter-spacing:-1px}.brand span{color:var(--blue);margin-left:9px;font-family:Arial}.edition{color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 310px;padding:0 24px}.stage{position:relative;min-height:690px;height:calc(100svh - 130px);max-height:1000px;overflow:hidden;border-radius:24px;background:#dfe8f2}.stage-title{position:absolute;top:34px;left:34px;pointer-events:none;z-index:1}.stage-title span,.eyebrow{font:10px 'Courier New',monospace;letter-spacing:.13em}.stage-title h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(50px,6vw,88px);line-height:.95;letter-spacing:-5px;margin:18px 0;color:#284bc4}canvas{display:block;width:100%;height:100%;touch-action:none;position:absolute;inset:0}.stage-bottom{position:absolute;bottom:24px;left:28px;right:28px;display:flex;gap:18px;align-items:center;justify-content:space-between;font-size:12px;pointer-events:none}.stage-bottom div{pointer-events:auto;display:flex;gap:5px}.stage-bottom button{background:#f5f7fadf;border:0}.stage-bottom button[aria-pressed=true]{background:var(--ink)}aside{padding:22px 6px 10px 30px;display:flex;flex-direction:column;gap:21px}h2{font-family:Georgia,serif;font-weight:normal;font-size:35px;line-height:1.03;letter-spacing:-1.3px;margin:10px 0}.eyebrow{color:var(--muted);margin:0}fieldset{margin:0;padding:0;border:0}legend,.field{font-size:13px;font-weight:bold;margin-bottom:10px}.swatches{display:flex;gap:9px}.swatches button{width:33px;height:33px;padding:0;border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:50%}.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}.field{display:block;margin:0}.field input{display:block;width:100%;margin-top:10px;font:16px Georgia,serif;color:var(--ink);border:1px solid var(--line);padding:12px;background:white;border-radius:8px}.options{display:flex;flex-wrap:wrap;gap:6px}.options button{font-size:12px;padding:9px}.paint{font-size:12px;border-top:1px solid var(--line);padding-top:15px}.paint>label:first-child{display:flex;gap:6px;align-items:center;font-size:13px}.paint p{line-height:1.5;color:var(--muted);margin:8px 0}.ink{display:inline-flex;align-items:center;gap:8px;margin-top:10px}.ink input{height:26px;width:38px;padding:0;border:0;background:none}.paint button{float:right;font-size:11px;padding:6px 8px}.actions{display:flex;flex-direction:column;gap:7px}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#1935b5}#status{font-size:11px;color:var(--muted);line-height:1.5;margin:-10px 0 0}details{font-size:11px;color:var(--muted);line-height:1.55}summary{cursor:pointer}footer{padding:20px 36px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}#error{position:absolute;inset:40% 15% auto;background:white;padding:20px;border-radius:12px;z-index:5}#recording{margin:24px;max-width:600px}#recording video{width:100%;display:block;border-radius:16px}#recording a{display:inline-block;margin-top:10px;font-size:13px}@media(max-width:900px){.edition{display:none}main{grid-template-columns:1fr 275px}.stage-title h1{font-size:58px}.stage-bottom{flex-direction:column;align-items:flex-start}.stage-title{left:24px}aside{padding-left:20px}}@media(max-width:680px){header{height:68px;padding:0 20px;font-size:11px}main{display:block;padding:0 12px}.stage{min-height:500px;height:65svh}.stage-title{top:24px}.stage-title h1{font-size:53px}.stage-bottom{left:20px;bottom:18px;gap:10px}aside{padding:28px 12px;display:grid;grid-template-columns:1fr 1fr;gap:24px}aside>div:first-child{grid-column:1/-1}aside h2 br{display:none}aside h2{font-size:32px}aside .paint,aside .actions,aside #status,aside details{grid-column:1/-1}footer{padding:4px 24px 24px;flex-direction:column;line-height:1.5}}

@media(max-width:680px){aside>fieldset,aside>.field{grid-column:1/-1}}

/* One title, a direct path back, and controls that each change the experiment. */
header{height:76px;gap:16px}header h1{font:normal 28px/1.1 Georgia,serif;letter-spacing:-.8px;margin:0}header nav{font-size:12px;white-space:nowrap}header nav a{text-decoration:none}header nav a:hover{text-decoration:underline}.stage{height:calc(100svh - 140px);min-height:560px}aside{padding-top:10px;gap:22px}.options button{min-width:56px}.paint{position:relative;padding-bottom:8px}.paint button{float:none;position:absolute;right:0;bottom:7px}.paint p{padding-right:85px;max-width:240px}#status:empty{display:none}footer{justify-content:flex-start;font-size:12px;line-height:1.5;padding-top:18px;padding-bottom:22px}details p{margin:10px 0}#recording h2{font-size:24px}
@media(max-width:900px){main{grid-template-columns:1fr 275px}.stage{min-height:580px}}
@media(max-width:680px){header{height:72px;padding:0 22px}header h1{font-size:24px}header nav{font-size:11px}main{display:block}.stage{height:60svh;min-height:430px}aside{display:flex;padding:26px 12px;gap:22px}.stage-bottom{left:20px;bottom:18px}.paint p{max-width:none}.options button{flex:1}.options{flex-wrap:nowrap}.actions{flex-direction:row}.actions button{flex:1;padding:12px 7px;font-size:13px}footer{padding:0 24px 24px;font-size:11px}}