/* Observer-first shell. Native details retain a semantic, keyboard-operable
   path to every legacy CPU control without competing with the artwork. */
:root{color-scheme:light;--bg:#f4f2ec;--paper:#fffdf6;--text:#303a38;--dim:#6e7771;--line:#d8dcd2;--accent:#355c4e;--mono:ui-monospace,monospace}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 system-ui,-apple-system,sans-serif}a{color:inherit;text-underline-offset:4px}button,input,textarea,select{font:inherit}button,summary,a{touch-action:manipulation}button,summary{cursor:pointer}button{padding:9px 14px;border:1px solid var(--line);background:transparent;color:inherit}button:hover,summary:hover{color:var(--accent);background:#e9ede4}button:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.site-header{height:80px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:30px Georgia,serif;text-decoration:none;letter-spacing:-1px;display:flex;align-items:center;gap:22px}.brand span{font:11px system-ui;letter-spacing:.15em;color:var(--dim)}nav{display:flex;gap:26px;align-items:center}nav a{text-decoration:none}.start-link{color:var(--accent)}.gallery{max-width:1250px;margin:auto;padding:22px 5vw 18px}.work-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px;gap:20px}.eyebrow{font-size:9px;letter-spacing:.2em;color:var(--dim);margin:0 0 4px}h1{font:24px/1.5 Georgia,"Hiragino Mincho ProN",serif;letter-spacing:.15em;margin:0}#gallery-state{font-size:11px;color:var(--dim);margin:0;text-align:right}.art-stage{height:clamp(340px,calc(100svh - 290px),920px);display:flex;justify-content:center;align-items:center;background:#eaece5}.art-stage img,.art-stage video{display:block;max-width:100%;width:auto;height:100%;object-fit:contain}.playback{display:flex;align-items:center;gap:14px;padding:18px 0 8px}.playback button,.playback summary{font-size:12px;white-space:nowrap}.playback #watch-process{background:var(--accent);color:white;border-color:var(--accent);min-width:140px}.seek-label{flex:1;min-width:40px;display:flex}input[type=range]{width:100%;accent-color:var(--accent)}.speed{font-size:12px;color:var(--dim)}.save-menu{position:relative}.save-menu summary{list-style:none;padding:9px 14px;border:1px solid var(--line)}.save-menu>div{position:absolute;z-index:2;right:0;bottom:100%;min-width:190px;background:var(--paper);border:1px solid var(--line);padding:12px;display:grid;gap:12px}.view-note{font-size:11px;color:var(--dim);margin:0}.studio-details{max-width:1120px;margin:12px auto 36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.studio-details>summary{padding:18px 0;color:var(--dim);font-size:12px}.details-content{padding-bottom:22px}.lab-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.lab-heading h2{font-size:18px;font-weight:500;margin:8px 0}.lab-heading p{font-size:12px;color:var(--dim)}#connection{font:10px var(--mono);color:var(--dim)}.detail-links{display:flex;flex-wrap:wrap;gap:20px;font-size:12px;margin:18px 0}.metrics{display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--line);margin:20px 0}.metrics>div{padding:15px 8px}.metrics label{display:block;font:9px var(--mono);color:var(--dim)}.metrics strong{display:block;font:18px var(--mono);margin-top:8px}.metrics .controller{font-size:11px}.controller span{display:block;font:10px system-ui;margin-top:5px}.lab-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px}.plan,.observation,.trace{min-width:0}.section-title{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:16px;font-size:12px}.dim,.fine,.caption,.seed-info,.empty-note{color:var(--dim)}.fine,.seed-info{font-size:11px}.loop,.op-list>div,.payload-heading{display:flex;justify-content:space-between}.loop{font:10px var(--mono)}.op-list{margin:15px 0}.op-list>div{padding:5px 0}.plan label{font-size:12px}.plan input,textarea{width:100%;background:var(--paper);color:var(--text);border:1px solid var(--line);padding:10px;margin:8px 0 18px}textarea{min-height:250px;resize:vertical;font:12px/1.6 var(--mono)}.primary{background:var(--accent);color:white;width:100%}.primary:hover{background:#284c3f;color:white}.quiet{font-size:11px}.contract{margin:20px 0;font-size:12px}.contract>code{display:block;line-height:2}.canvas-toolbar,.toggle,.observation-foot{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:12px}.toggle{gap:4px}.toggle button{font-size:11px;padding:6px}.toggle .active{background:var(--accent);color:white}.coordinate-row{display:flex;justify-content:space-between;font:9px var(--mono);margin:12px 0;color:var(--dim)}.paper-frame{position:relative;background:var(--paper);aspect-ratio:1}.paper-frame>img{width:100%;height:100%;object-fit:contain;display:block}.axis-label,.crosshair{display:none}.observation-foot{flex-wrap:wrap;justify-content:start;margin:12px 0;font-size:11px}.sensor-row{display:flex;gap:20px;padding:20px 0;border-block:1px solid var(--line)}.sensor-image{width:100px;flex:none}.sensor-image img{width:100%}.sensor-image span,.mini-heading{font-size:10px;color:var(--dim)}.pigments{flex:1}.pigment-row{display:flex;gap:8px;align-items:center;font:11px/2 var(--mono)}.pigment-row i{width:7px;height:7px}.pigment-row b{margin-left:auto;font-weight:400}.mini-heading span{float:right}#candidates{display:grid;grid-template-columns:1fr 1fr;gap:10px}.candidate-card{text-align:left;min-width:0}.candidate-card.selected{border-color:var(--accent)}.card-top{font:9px var(--mono);display:flex;justify-content:space-between}.candidate-card p{font-size:12px;overflow-wrap:anywhere}.candidate-card small{font:10px var(--mono)}.empty-note{grid-column:1/-1;font-size:12px}.comparison{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:center}.comparison figure{margin:18px 0}.comparison img{width:100%;display:block}.comparison figcaption{font-size:11px}.delta{display:flex;gap:15px;font:11px var(--mono)}.trace{grid-column:1/-1;border-top:1px solid var(--line)}.trace-intro{font-size:12px}.trace-intro p{display:inline;margin-left:12px;color:var(--dim)}#status{font-size:12px}#status.error{color:#a33120}#events{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.event{border-top:1px solid var(--line);padding:12px 0;min-width:0}.event-top{display:flex;justify-content:space-between;font:10px var(--mono)}.event-image{width:60px;float:right;margin:10px}.event p{font-size:12px}.event-stats,.event details{font:10px var(--mono)}.event pre{white-space:pre-wrap;max-height:200px;overflow:auto}.trace-footer{margin-top:20px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 5vw;font:18px Georgia,serif}footer span{font:11px system-ui;color:var(--dim)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1180px){.studio-details{margin-inline:5vw}}@media(max-width:640px){.site-header{height:65px;padding-inline:18px}.brand{font-size:27px}.brand span{display:none}nav{gap:18px;font-size:12px}.gallery{padding:18px}.work-heading{align-items:start}h1{font-size:22px}#gallery-state{max-width:145px;font-size:10px}.art-stage{height:calc(100svh - 310px);min-height:330px}.playback{gap:8px;flex-wrap:wrap}.seek-label{order:5;flex-basis:85%}.playback button,.playback summary{padding:8px;font-size:11px}.playback #watch-process{min-width:120px}.view-note{margin-top:8px;font-size:10px}.lab-grid{grid-template-columns:1fr}.observation{grid-row:1}.metrics{grid-template-columns:repeat(2,1fr)}.metrics>div:last-child{grid-column:1/-1}.lab-heading{display:block}.trace{grid-column:auto}#events{grid-template-columns:1fr}.canvas-toolbar{flex-wrap:wrap}.sensor-row{gap:10px}.mini-heading span{display:none}.studio-details{margin-inline:18px}footer{padding:20px 18px}footer span{font-size:10px}}

#volume-control{font-size:11px;max-width:90px}#volume-control input{display:block;width:80px}
/* The same physical paper is used for blank, candidate, committed and replay. */
.art-stage{position:relative}.art-stage canvas{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;background:#fffef8}.studio-caption{position:absolute;bottom:5%;left:5%;right:5%;text-align:center;pointer-events:none}.studio-caption span{color:white;background:#0009;padding:2px 6px;box-decoration-break:clone;font-size:14px}.scene-controls{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.scene-controls summary{font-size:13px}.scene-controls p{font-size:12px;color:var(--dim)}.scene-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.scene-actions label{font-size:12px}.scene-actions input{max-width:220px}.scene-controls textarea{height:260px}.save-menu button{font-size:12px;text-align:left}