:root{--bg:#151918;--panel:#222725;--panel-deep:#1b201e;--line:#444c46;--ink:#f4f1e8;--soft:#d3d6cb;--dim:#9aa69d;--mint:#c7e8c4;--gold:#eac79e;--coral:#efad93;--serif:Georgia,'Times New Roman',serif;--sans:'Arial',Helvetica,sans-serif}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.shell{max-width:1740px;padding:0 clamp(18px,3vw,64px);margin:0 auto}.masthead{min-height:91px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:-.09em;font-size:29px;line-height:1;display:inline-flex;align-items:center;flex-shrink:0}.brand span:last-child{font-weight:350;color:var(--mint)}.brand-symbol{display:inline-block;color:var(--gold);font-size:27px;margin-right:14px;letter-spacing:normal}.top-description,.archive-link,.eyebrow,.small-label,.canvas-heading,.work-number,.work-details #renderStatus,.footer,.discipline-panel label,.studio-principle>span,.shelf-title>p{font-family:var(--sans);font-size:10px;font-weight:750;letter-spacing:.115em}.top-description{margin-left:auto;color:var(--dim);text-align:center}.top-separator{padding:0 12px;color:#66766a}.archive-link{border:1px solid var(--line);padding:14px 17px;color:var(--mint);white-space:nowrap}.archive-link:hover{background:var(--panel)}
.product-frame{display:grid;grid-template-columns:minmax(290px,345px) minmax(0,1fr);gap:clamp(22px,2.7vw,50px);padding:32px 0 35px}.controls{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding-top:12px}.eyebrow{color:var(--gold);margin:0 0 20px}.controls h1{font-family:var(--serif);font-size:clamp(36px,3.25vw,54px);line-height:1.04;font-weight:400;letter-spacing:-.045em;margin:0 0 20px}.controls h1 em{font-weight:400;color:var(--mint)}.intro{font-family:var(--serif);font-size:17px;color:var(--soft);line-height:1.43;max-width:305px;margin:0 0 28px}.mode-switch{padding:0;margin:0 0 24px;border:0;min-width:0}.mode-switch legend{margin-bottom:10px;color:var(--dim)}.segment{display:flex;min-width:0;gap:0;border:1px solid var(--line);background:var(--panel-deep);padding:4px}.mode-option{min-width:0;flex:1;background:none;border:0;color:var(--dim);font-size:10px;font-weight:850;letter-spacing:.035em;padding:13px 8px;white-space:nowrap}.mode-option.active{background:var(--mint);color:#1d3027}.mode-option:hover:not(.active){color:var(--ink)}.discipline-panel{display:flex;flex-direction:column;gap:0;min-height:226px}.discipline-panel[hidden]{display:none}.discipline-panel label{color:var(--soft);margin-bottom:8px}.discipline-panel select,.discipline-panel input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:0;padding:10px 13px;background:#252b28;color:var(--ink);margin:0 0 19px}.discipline-panel select{color-scheme:dark}.discipline-panel input{font-size:18px;font-weight:700;letter-spacing:.01em}.control-help{font-family:var(--serif);color:var(--dim);line-height:1.35;font-size:13px;margin:0 0 21px}.action-generate{display:flex;justify-content:space-between;align-items:center;border:0;background:var(--mint);color:#1e3427;text-align:left;font-size:13px;font-weight:900;letter-spacing:.095em;padding:19px 18px}.action-generate span{font-size:24px;line-height:.5;font-weight:400}.action-generate:hover{background:#f2f3cb}.mini-actions{display:flex;gap:8px;margin-top:10px}.ghost-button{flex:1;padding:14px 8px;border:1px solid var(--line);background:transparent;color:var(--soft);font-size:10px;font-weight:800;letter-spacing:.07em}.ghost-button:hover{border-color:var(--mint);color:var(--mint)}.studio-principle{margin-top:auto;padding:35px 8px 4px 0}.studio-principle>span{color:var(--gold)}.studio-principle p{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--dim);line-height:1.35;max-width:300px}
.workspace{min-width:0}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--soft);padding:10px 1px 16px}.canvas-heading>div{display:flex;align-items:center;gap:10px}.status-orb{display:block;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px #c7e8c422}.status-orb.busy{background:var(--gold);box-shadow:0 0 0 4px #eac79e22;animation:pulse 1.2s infinite}.work-number{color:var(--dim);white-space:nowrap}.canvas-wrap{position:relative;overflow:hidden;width:100%;aspect-ratio:1200/740;background:linear-gradient(140deg,#c6d3c7,#e8dccc);border:9px solid #3a403b;box-shadow:0 2px 0 #121514,0 14px 36px #0002}.canvas-wrap.logo-surface{background-color:#edece5;background-image:linear-gradient(90deg,transparent 49.8%,#00000008 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#00000008 50%,transparent 50.2%);background-size:76px 76px}canvas#artwork{width:100%;height:100%;display:block;object-fit:fill}.canvas-overlay{position:absolute;bottom:20px;left:20px;padding:10px 14px;background:#1c2928da;color:var(--mint);font-size:10px;letter-spacing:.12em;font-weight:850;pointer-events:none}.canvas-overlay[hidden]{display:none}.work-details{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:21px 0 24px;border-bottom:1px solid var(--line)}.work-details .small-label{color:var(--dim)}.work-details p{font-family:var(--serif);font-size:19px;margin:6px 0 0;text-transform:capitalize;color:var(--ink)}.work-details #renderStatus{color:var(--dim);margin-top:14px;text-align:right;white-space:nowrap}.vote-section{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0 14px}.vote-description{display:flex;flex-direction:column;gap:6px;max-width:240px}.vote-description strong{font-family:var(--serif);font-weight:400;font-size:24px}.vote-description span{color:var(--dim);font-size:12px;line-height:1.5}.vote-actions{display:flex;gap:10px;align-items:center}.vote-button{min-width:128px;min-height:51px;padding:14px 17px;border:1px solid var(--line);font-size:12px;letter-spacing:.06em;font-weight:900}.vote-button.reject{background:transparent;color:var(--coral);border-color:#866253}.vote-button.reject:hover{background:#382a2a}.vote-button.keep{background:#d8e7b8;border-color:#d8e7b8;color:#253123}.vote-button.keep:hover{background:#f5f4d0}.feedback-line{min-height:20px;font-size:11px;color:var(--dim);text-align:right;letter-spacing:.03em}
.shelf{border-top:1px solid var(--line);padding:37px 0 45px}.shelf-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:23px}.shelf-title .eyebrow{margin-bottom:10px}.shelf-title h2{font:normal 32px/1.05 var(--serif);letter-spacing:-.025em;margin:0}.shelf-title h2 span{font:800 10px var(--sans);vertical-align:middle;padding-left:9px;color:var(--mint)}.shelf-title>p{margin:0;line-height:1.55;color:var(--dim);max-width:250px;letter-spacing:0;text-transform:none}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.empty-gallery{font-family:var(--serif);grid-column:1/-1;color:var(--dim);font-size:17px;padding:10px 0 38px}.saved-item{display:flex;flex-direction:column;gap:10px;text-align:left;padding:0;background:none;border:0;color:var(--soft);min-width:0}.saved-item img{width:100%;aspect-ratio:1200/740;object-fit:cover;border:2px solid var(--line);background:#d8d5c8}.saved-item:hover img{border-color:var(--mint)}.saved-item span{font-size:11px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0 35px;color:var(--dim)}.footer div{display:flex;align-items:center;flex-wrap:wrap;gap:24px}.footer a{color:var(--mint)}
@keyframes pulse{50%{opacity:.45}}
@media(max-width:1030px){.top-description{display:none}.masthead{justify-content:space-between}.product-frame{grid-template-columns:minmax(270px,315px) minmax(0,1fr);gap:24px}.vote-section{flex-wrap:wrap}.vote-actions{margin-left:auto}.controls h1{font-size:38px}.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:730px){.shell{padding:0 17px}.masthead{min-height:71px}.brand{font-size:25px}.archive-link{font-size:8px;padding:12px 10px;max-width:137px;white-space:normal;text-align:center}.product-frame{display:flex;flex-direction:column;gap:20px;padding:22px 0 26px}.controls{padding-top:0}.controls h1{font-size:38px;margin-bottom:12px}.intro{font-size:16px;max-width:unset;margin-bottom:20px}.mode-switch{margin-bottom:19px}.discipline-panel{min-height:unset}.control-help{display:none}.discipline-panel select,.discipline-panel input{margin-bottom:13px;min-height:45px}.action-generate{padding:18px}.studio-principle{display:none}.canvas-heading{padding:6px 2px 12px}.canvas-heading-text{font-size:9px}.canvas-wrap{border:5px solid #3a403b}.canvas-overlay{bottom:8px;left:9px;font-size:8px}.work-details{padding:16px 0 17px}.work-details p{font-size:17px}.work-details #renderStatus{font-size:8px}.vote-section{margin:16px 0 12px;gap:12px}.vote-description{max-width:unset;width:100%}.vote-description strong{font-size:21px}.vote-description span{font-size:11px}.vote-actions{width:100%;margin-left:0}.vote-button{flex:1;min-width:0}.feedback-line{text-align:left;font-size:10px}.shelf{padding:27px 0}.shelf-title{align-items:start}.shelf-title h2{font-size:27px}.shelf-title>p{display:none}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.footer{flex-direction:column;font-size:9px;gap:9px}.footer div{gap:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

/* Build 296: method discovery is an explicit choice, not an invisible shuffle. */
.method-line{display:block;margin-top:8px;color:var(--gold);font:700 10px/1.4 var(--sans);letter-spacing:.08em}
.experiments[hidden]{display:none}
.experiments{border-top:1px solid var(--line);margin-top:20px;padding-top:22px}
.experiments-title .small-label{color:var(--gold)}
.experiments-title h2{font:normal 24px/1.16 var(--serif);margin:8px 0}
.experiments-title p{font:13px/1.5 var(--sans);color:var(--dim);margin:0 0 16px;max-width:620px}
.experiment-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.experiment-card{display:flex;flex-direction:column;text-align:left;padding:7px 7px 12px;color:var(--ink);background:var(--panel);border:1px solid var(--line);min-width:0;gap:8px}
.experiment-card:hover{border-color:var(--mint);background:#303b34}
.experiment-card:focus-visible{outline:3px solid var(--gold)}
.experiment-card img{display:block;width:100%;aspect-ratio:390/241;object-fit:cover;background:#566b6a}
.experiment-card strong{font-size:10px;letter-spacing:.1em;color:var(--mint);font-weight:900;padding:0 5px}
.experiment-card span{font:12px/1.3 var(--serif);color:var(--soft);padding:0 5px;overflow-wrap:anywhere}
@media(max-width:730px){.experiments{margin-top:15px;padding-top:15px}.experiments-title h2{font-size:21px}.experiment-cards{gap:8px}.experiment-card{padding:5px 5px 10px}.experiment-card strong{font-size:9px}.experiment-card span{font-size:11px}.method-line{font-size:9px}}

/* Build 297 — image-verified counterfactuals and a genuine blind A/B test. */
.audit-trigger{width:100%;margin-top:11px;text-align:center;color:var(--gold)}
.method-line#visualMetric{display:block;margin-top:6px;color:var(--gold);font-variant-numeric:tabular-nums}
.rejected-reference{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:10px;border:1px dashed var(--line);background:var(--panel-deep)}
.rejected-reference[hidden]{display:none}
.rejected-reference img{display:block;max-width:150px;width:31%;aspect-ratio:1200/740;object-fit:cover}
.rejected-reference figcaption{font-size:10px;font-weight:800;line-height:1.45;letter-spacing:.08em;color:var(--dim)}
.experiment-card .image-distance{display:block;padding:0 5px;font-size:10px;font-weight:750;letter-spacing:.06em;color:var(--gold);line-height:1.3}
.empty-experiments{grid-column:1/-1;color:var(--dim);font:italic 16px/1.4 var(--serif)}
.blind-panel{border-top:1px solid var(--line);margin:30px 0;padding-top:25px}
.blind-panel[hidden]{display:none}
.blind-panel h2{font:normal 26px/1.12 var(--serif);margin:10px 0}
.blind-panel p{font:12px/1.45 var(--sans);color:var(--dim)}
.blind-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.blind-card{border:1px solid var(--line);background:var(--panel);padding:7px 7px 13px;min-width:0;color:var(--mint)}
.blind-card:hover{border-color:var(--gold)}
.blind-card img{width:100%;aspect-ratio:390/241;display:block;object-fit:cover;margin-bottom:10px}
.blind-card strong{font-size:12px;letter-spacing:.14em}
.blind-panel #blindCount{font-weight:800;color:var(--mint)}
@media(max-width:730px){.rejected-reference figcaption{font-size:9px}.blind-cards{gap:8px}.blind-card{padding:5px 5px 9px}}

/* Build 299: image-model studio sits above, not inside, the procedural painter. */
[hidden]{display:none!important}
.segment .mode-option{white-space:normal;min-width:0;letter-spacing:.02em;padding:12px 4px}
.discipline-panel textarea,.imagine-decision textarea{display:block;width:100%;resize:vertical;min-height:78px;padding:12px 13px;margin:0 0 14px;background:#252b28;border:1px solid var(--line);color:var(--ink);font:14px/1.45 var(--sans)}
.discipline-panel textarea:focus,.imagine-decision textarea:focus{outline:2px solid var(--mint);outline-offset:2px}
.model-budget{font-size:11px;line-height:1.55;color:var(--dim);margin:12px 0 21px}
.imagination-frame{position:relative;width:100%;aspect-ratio:4/3;max-height:min(67vh,760px);background:#282e2b;border:7px solid #3a403b;display:flex;justify-content:center;align-items:center;overflow:hidden}
.imagine-empty{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px;text-align:center;max-width:550px}
.imagine-empty strong{font:normal clamp(24px,3.1vw,43px)/1.12 var(--serif);letter-spacing:-.025em;color:var(--mint)}
.imagine-empty span{font:normal 17px/1.45 var(--serif);color:var(--soft)}
#imaginePicture{display:block;width:100%;height:100%;object-fit:contain}
.imagine-busy{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;letter-spacing:.08em;background:#101918d9;color:var(--mint)}
#imagineMemory{font:800 10px var(--sans);color:var(--gold);max-width:270px;text-align:right;line-height:1.6}
.imagine-decision{margin-top:24px}.imagine-decision>.small-label{display:block;color:var(--soft);margin-bottom:13px}
.critique-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.critique-chips button{background:#212826;border:1px solid var(--line);color:var(--soft);font:750 11px var(--sans);padding:10px 11px}
.critique-chips button.selected,.critique-chips button:hover{border-color:var(--mint);color:var(--mint)}
.imagine-buttons{display:flex;gap:12px;justify-content:flex-end;margin-top:15px}.imagine-buttons button{min-width:155px}
.imagination-more{margin:20px 0 8px}.imaginary-workspace .feedback-line{text-align:left;margin-top:15px;font-size:12px}
.imagination-history{display:grid;gap:8px;margin-top:24px;grid-template-columns:repeat(2,1fr)}
.imagine-history-item{border:1px solid var(--line);background:#202523;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;font-size:11px;color:var(--soft);line-height:1.4}
.imagine-history-item strong{font-size:10px;color:var(--gold);letter-spacing:.08em}
@media(max-width:730px){.segment .mode-option{font-size:9px;min-height:49px}.imagination-frame{max-height:65vh}.imagine-buttons button{min-width:0;flex:1}.imagination-history{grid-template-columns:1fr}.model-budget{font-size:10px}}

.imagine-history-item img{width:70px;height:53px;object-fit:cover;flex:0 0 70px;border:1px solid var(--line)}

/* 302 / executable-rule studio — same canvas engine on the archive page. */
[hidden]{display:none!important}
.rule-frame{position:relative;display:flex;align-items:center;justify-content:center;
  background:#282e2b;border:8px solid #3a403b;aspect-ratio:8/5;overflow:hidden}
.rule-frame canvas{display:block;width:100%;height:100%;object-fit:fill}
.rule-mini{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px;margin-bottom:9px}
.rule-mini button{white-space:normal;text-align:left;font-size:10px;min-height:36px}
#ruleControls select{font-size:12px;margin-bottom:13px;line-height:1.4;min-height:43px}
#ruleFile{font-size:11px;padding:10px;border:1px solid var(--line);margin-bottom:16px;max-width:100%;width:100%}
#ruleReworkBtn{margin-bottom:13px;white-space:normal}
.rule-vote{margin:16px 0 15px}
.rule-gallery-heading{font:400 24px var(--serif);color:var(--soft);margin:28px 0 12px}
.rule-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:28px}
.rule-card{margin:0;border:1px solid var(--line);padding:7px;background:#202523}
.rule-card img{width:100%;aspect-ratio:248/156;object-fit:cover;display:block}
.rule-card figcaption{font:600 10px/1.45 var(--sans);color:var(--soft);padding:8px 3px;word-break:break-word}
@media(max-width:730px){
 .rule-frame{border-width:5px}
 .rule-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .rule-vote .vote-button{font-size:10px;white-space:normal}
 .segment .mode-option{font-size:9px;padding:11px 3px;letter-spacing:-.01em}
}

/* Build 303 — continuously evolving composited canvas */
.abstraction-control{margin:14px 0 16px;padding:14px 12px 12px;border:1px solid #78937f;background:#19241e}
.abstraction-control>.small-label{display:block;margin:0 0 12px;color:var(--mint);font-size:10px}
.abstraction-control .control-help{display:block;margin:4px 0 12px;font-size:11px;line-height:1.5;color:var(--soft)}
.abstraction-control select{width:100%;margin-bottom:10px}
.abstraction-control .rule-inline{display:flex;align-items:flex-start;gap:9px;line-height:1.35;margin:8px 0 15px;font-size:11px;letter-spacing:0}
.rule-inline input{flex:none;width:16px;height:16px;accent-color:var(--mint);margin:0}
.rule-loop-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.rule-loop-buttons button{font-size:10px;padding:11px 6px;white-space:normal;min-height:42px}
.rule-loop-buttons #ruleLoopStart{grid-column:1/-1;text-align:center}
#ruleLoopStatus{margin:12px 0 0;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.rule-loop-history{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0 18px}
.rule-loop-frame{margin:0;padding:5px;border:1px solid var(--line);background:var(--panel-deep)}
.rule-loop-frame img{width:100%;aspect-ratio:164/104;display:block;object-fit:cover}
.rule-loop-frame figcaption{font:750 9px/1.3 var(--sans);padding:6px 2px 2px;color:var(--dim);overflow-wrap:anywhere}
@media(max-width:730px){
  .rule-loop-history{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .abstraction-control{padding:13px 10px}
}

/* BUILD 304 — every letter is an editable map of typographic anatomy. */
.glyph-editor{display:flex;flex-direction:column;gap:0;border:1px solid #697e75;
 background:#1d2725;padding:16px 13px 13px;margin:9px 0 17px}
.glyph-editor>.small-label{color:var(--mint);font-size:11px;margin:0 0 12px}
.glyph-help{font:13px/1.5 var(--serif);color:var(--soft);margin:0 0 14px}
.glyph-switch{display:flex;align-items:flex-start;gap:10px;text-transform:none;
 letter-spacing:.01em;line-height:1.4;color:var(--soft);margin:4px 0 11px;font-size:11px}
.glyph-editor .glyph-switch input{width:17px;height:17px;min-height:0;margin:0;
 flex:0 0 17px;accent-color:var(--mint)}
.glyph-fields{display:grid;grid-template-columns:1fr;gap:0;margin-top:7px}
.glyph-fields label{margin:5px 0 7px}
.glyph-fields select{font-size:11px;line-height:1.4;margin:0 0 11px;min-height:42px}
.glyph-fields input[type=range]{appearance:auto;width:100%;height:22px;min-height:22px;
 margin:0 0 14px;accent-color:var(--mint);border:0;background:none;padding:0}
.glyph-fields output{color:var(--gold)}
.glyph-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 10px}
.glyph-actions button{font:850 9px/1.35 var(--sans);letter-spacing:.05em;min-height:43px;
 padding:10px 6px;background:transparent;border:1px solid var(--line);color:var(--soft);
 white-space:normal}
.glyph-actions button:first-child{grid-column:span 2;background:var(--mint);color:#1f3729;border-color:var(--mint)}
.glyph-actions button:hover{border-color:var(--mint)}
.glyph-status{font-size:11px;line-height:1.45;overflow-wrap:anywhere;color:var(--gold);
 background:#121b19;padding:10px;margin:0 0 18px;min-height:36px}
.glyph-glossary{display:flex;flex-wrap:wrap;gap:5px;max-height:230px;overflow:auto;
 border:1px solid var(--line);padding:8px 6px;margin:9px 0 0}
.glyph-term{font:800 9px/1.35 var(--sans);padding:6px 7px;border:1px solid #587668;
 background:#273a32;color:#d8e7dc;cursor:pointer}
.glyph-term.absent{color:#65766c;border-color:#313c35;background:#1b2420;cursor:default}
.glyph-term:focus-visible{outline:2px solid var(--mint)}
#letteringControls>.control-help{margin-top:7px}
@media(max-width:730px){
 .glyph-editor{padding:12px 10px}
 .glyph-editor .glyph-switch{display:flex;line-height:1.4}
 .glyph-editor .glyph-help{display:block;font-size:12px}
 .glyph-glossary{max-height:175px}
 .glyph-actions button{font-size:10px;min-height:45px}
}

/* 304 / visual laws shared with landscape construction */
.landscape-law-panel{border:1px solid #4a685b;padding:12px 10px 6px;margin:5px 0 17px;
 background:#1d2925;display:flex;flex-direction:column;gap:3px}
.landscape-law-panel>.glyph-switch{display:flex;align-items:center;gap:8px}
.landscape-law-panel>.glyph-switch input{width:17px;height:17px;min-height:0;
 margin:0;flex:none;accent-color:var(--mint)}
.landscape-law-panel .control-help{font-size:12px;line-height:1.5;margin:9px 0}
#landscapeConstraintLaw,#landscapeConstraintMark{font-size:12px;margin:5px 0 13px}
#landscapeMutateLaw{margin-top:2px;min-height:40px}
@media(max-width:730px){.landscape-law-panel .control-help{display:block}}

/* 304 / heritable continuous letterform experiment history */
.logo-evolution-panel{border:1px solid #527b67;padding:12px 11px 15px;margin:0 0 17px;
 background:#17251e}
.logo-evolution-panel>summary{cursor:pointer;color:var(--mint);font:850 11px/1.55 var(--sans);
 letter-spacing:.07em;list-style-position:inside}
.logo-evolution-panel .glyph-help{font:13px/1.5 var(--serif);margin:13px 0;color:var(--soft)}
.logo-evolution-panel>label{display:block;margin:11px 0 7px}
.logo-evolution-panel>select{width:100%;min-height:40px;margin:0 0 11px}
.logo-evolution-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.logo-evolution-actions button{font:800 10px/1.4 var(--sans);padding:10px 6px;
 border:1px solid #6a8777;min-height:40px;color:var(--mint);background:#1c352a}
.logo-evolution-actions #logoEvolutionStart{grid-column:span 2;background:#cce1bd;color:#192d20}
#logoEvolutionStatus{font:11px/1.4 var(--sans);color:var(--gold);margin:13px 0 8px}
#logoEvolutionStrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#logoEvolutionStrip figure{margin:0;border:1px solid #52695b;padding:4px}
#logoEvolutionStrip img{display:block;width:100%;aspect-ratio:200/123;object-fit:cover}
#logoEvolutionStrip figcaption{font:8px/1.25 var(--sans);padding-top:5px;color:var(--soft);overflow-wrap:anywhere}
@media(max-width:730px){.logo-evolution-panel{padding:11px 9px}.logo-evolution-actions button{font-size:10px}}

/* 307 — CREATIVE PROCESS IS THE ART FORM: the score performs the mutations. */
.canvas-wrap,.rule-frame{position:relative}
.creative-performance-panel{position:absolute;inset:0;z-index:8;overflow:hidden;
 background:#e3e0d3;pointer-events:none}
.creative-performance-panel[hidden]{display:none!important}
.creative-performance-overlay{display:block;width:100%;height:100%;object-fit:fill}
.creative-performance-meta{position:absolute;left:3%;right:3%;bottom:5%;
 display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
 padding:11px 13px;border-left:3px solid #dfb17a;
 color:#f1f5e9;background:rgba(19,34,31,.92);
 box-shadow:0 2px 10px #0004}
.creative-performance-action{font:900 12px/1.4 var(--sans,Arial,sans-serif);
 letter-spacing:.06em;text-transform:uppercase}
.creative-performance-method{font:12px/1.4 var(--sans,Arial,sans-serif);
 color:#d4c7a8;overflow-wrap:anywhere}
.creative-performance-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:7px;background:#1d2a25;border:1px solid #405f53;
 padding:9px;margin:7px 0 14px}
.creative-performance-controls>button{min-width:0;min-height:41px;white-space:normal;
 border:1px solid #779789;background:#1e3029;color:#dceadb;
 font:800 10px/1.3 var(--sans,Arial,sans-serif);
 padding:8px 4px;cursor:pointer}
.creative-performance-controls>button:disabled{opacity:.48;cursor:default}
.creative-performance-controls>button:first-child:not(:disabled){color:#16251c;background:#d1e2c5}
.creative-performance-ledger{grid-column:1/-1;display:flex;flex-wrap:wrap;
 gap:4px 7px;list-style:none;padding:0;margin:4px 0 0;
 min-height:21px;overflow-wrap:anywhere}
.creative-performance-ledger>li{font:700 9px/1.3 var(--sans,Arial,sans-serif);
 padding:3px 5px;background:#30453b;color:#d2e3da}
.creative-performance-ledger>li:last-child{background:#6d694e;color:#f1eac7}
@media(max-width:680px){
 .creative-performance-controls{padding:7px;gap:5px}
 .creative-performance-controls>button{font-size:9px;padding:7px 3px}
 .creative-performance-action{font-size:10px}
 .creative-performance-method{font-size:10px}
 .creative-performance-meta{left:2%;right:2%;bottom:3%;padding:7px 9px;gap:3px}
 .creative-performance-ledger>li{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .creative-performance-panel{display:none!important}
}

/* 308 / two independent φ taste systems, plus their measured interaction. */
.phi-taste-panel{margin:12px 0 17px;border:1px solid #8b966b;background:#233024}
.phi-taste-panel>details{padding:9px 13px 13px}
.phi-taste-panel summary{cursor:pointer;color:#dfe9c4;
 font:900 11px/1.45 var(--sans,Arial,sans-serif);letter-spacing:.08em}
.phi-taste-panel p{font:12px/1.55 var(--sans,Arial,sans-serif);
 color:#d3d7c5;overflow-wrap:anywhere;margin:11px 0}
.phi-taste-panel label{display:block;font:800 10px var(--sans,Arial,sans-serif);
 color:#dfe9c4;margin:14px 0 8px}
.phi-taste-panel select{display:block;width:100%;max-width:100%;min-height:43px;
 margin:0 0 10px;font-size:12px}
.phi-taste-panel .phi-conditions{font-size:11px;color:#deb989;line-height:1.55}
.phi-taste-panel .phi-taste-status{background:#17241b;border-left:2px solid #d7b27b;
 padding:9px;font-size:11px;color:#d4e6cf}
.phi-live-evidence{display:block;line-height:1.45;font:10px/1.55 var(--sans,Arial,sans-serif);
 color:#a6c7af;overflow-wrap:anywhere;padding:7px 10px;
 background:#17231d;border-left:3px solid #b4b37b;margin:7px 0}
.phi-live-evidence[data-qualifies="true"]{color:#ccebc4;border-color:#b8d88c}
.phi-live-evidence[data-qualifies="false"]{color:#e1c89b;border-color:#b4865b}
@media(max-width:730px){
 .phi-taste-panel>details{padding:10px}
 .phi-live-evidence{font-size:10px}
}

/* BUILD 310 — instrument panel hidden until invited. The work moves itself. */
.artist-autonomy-note{font:12px/1.55 var(--sans,Arial,sans-serif);color:#c4dac7;
  border-left:3px solid #b2ce9a;padding:6px 10px;background:#1d2d25;
  margin:0 0 12px}
.advanced-configuration{margin:7px 0 17px;border:1px solid #567163;
  background:#1c2822;padding:9px 11px;overflow:hidden}
.advanced-configuration>summary{cursor:pointer;font:800 10px/1.45 var(--sans,Arial,sans-serif);
  letter-spacing:.04em;color:#c3e0c2;list-style-position:inside}
.advanced-configuration[open]>summary{margin-bottom:13px;
  padding-bottom:9px;border-bottom:1px solid #466153}
.advanced-configuration>label{display:block;margin:11px 0 6px}
.advanced-configuration>select,.advanced-configuration>input[type=file]{width:100%;min-height:42px}
.advanced-configuration .control-help{display:block;font-size:11px;line-height:1.5}
.advanced-configuration .rule-inline{display:flex;align-items:center;gap:9px}
.surviving-ideas{background:#233b2d;border-left:3px solid #e2b67d;
 padding:9px 10px;font:11px/1.5 var(--sans,Arial,sans-serif);
 color:#e5eac9;letter-spacing:.01em;margin:10px 0 4px}
.rule-interventions>.mini-actions{margin:12px 0}
.rule-interventions .ghost-button{margin-bottom:8px}
@media(max-width:730px){
 .advanced-configuration{padding:10px 9px}
 .artist-autonomy-note{display:block;font-size:11px}
 .surviving-ideas{font-size:10px}
}

/* HEXFIELD 311 / a living genealogy of actual sampled geometric shapes. */
.heritage-gallery{display:flex;gap:9px;flex-wrap:wrap;margin:9px 0 17px}
.heritage-specimen{margin:0;flex:1 1 142px;max-width:220px;
 border:1px solid #627c68;background:#1c2c22;padding:9px}
.heritage-specimen svg{display:block;width:100%;height:86px;
 background:#314037;border:1px solid #496552}
.heritage-specimen figcaption{font:700 10px/1.45 var(--sans,Arial,sans-serif);
 color:#d9dbbd;margin:7px 0 0;overflow-wrap:anywhere}
@media(max-width:730px){.heritage-specimen{flex-basis:120px}
 .heritage-specimen svg{height:70px}}

/* 314 / unified surface: one word input, one experimental reference,
 * one living rules canvas. Infrequent configuration remains optional. */
.unified-studio-input{display:grid;gap:6px;margin:12px 0;padding:12px;border:1px solid rgba(137,190,174,.28);border-radius:10px;background:rgba(71,113,93,.055)}
.unified-studio-input label{font-size:11px;letter-spacing:.1em;font-weight:700}
.unified-studio-input input{width:100%;min-width:0;padding:13px 11px;font:700 17px/1.35 ui-monospace,monospace;border:1px solid #849a8c;border-radius:6px;color:inherit;background:rgba(255,255,255,.075)}
.unified-studio-input .control-help{margin:0 0 3px}
.archive-link{cursor:pointer}
.archive-dock[hidden]{display:none!important}
.archive-dock{margin:12px 0 18px;border:1px solid #88a9a0;border-radius:12px;padding:10px;background:#10211e;color:#daece7}
.archive-dock-header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.archive-dock-header .ghost-button{width:auto;min-width:80px}
.archive-dock p,.archive-dock a{font-size:12px;color:#d0e1dc}
#archiveDockFrame{width:100%;height:min(78vh,720px);min-height:420px;border-radius:7px;overflow:hidden}
#archiveDockFrame iframe{width:100%;height:100%;border:0;display:block;background:#0c0c15}
#ruleUseArchive{font-size:12px}
@media(max-width:730px){.archive-dock{padding:6px}#archiveDockFrame{height:71vh;min-height:370px}.archive-dock-header strong{font-size:11px}}

.unified-mode-switch{display:flex!important;flex-wrap:wrap;gap:8px;align-items:flex-start}
.unified-mode-switch>.mode-option{width:auto;min-width:115px;padding-inline:15px;flex:0 0 auto}
.unified-mode-switch .other-sims{flex:1;min-width:170px;margin:0;padding:8px}
.other-sims summary{cursor:pointer}
.other-sims-buttons{display:flex;flex-wrap:wrap;gap:6px;padding-top:7px}
.other-sims-buttons .mode-option{width:auto;min-width:80px;font-size:11px}
@media(max-width:600px){.unified-mode-switch .other-sims{min-width:150px}.unified-mode-switch>.mode-option{min-width:90px}}


/* HEXFIELD 315 — only one visible production surface and four core actions.
   Old simulators remain computation sources, never user-facing tabs/canvases. */
.studio-unified-tag{margin-left:auto;border:1px solid #6c947f;padding:8px 10px;
  color:#c4e6d0;font:800 10px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.065em}
.unified-studio-input{padding:12px 0;border:0;background:none;gap:8px;margin:8px 0 10px}
.unified-studio-input>input{font-size:clamp(15px,2vw,20px);letter-spacing:.035em}
#ruleControls>.artist-autonomy-note{margin-bottom:8px}
#ruleControls>.advanced-configuration{margin:6px 0}
#ruleControls>.abstraction-control{margin:10px 0 15px}
#ruleControls>.abstraction-control>.control-help{font-size:12px;line-height:1.4;margin:3px 0 10px}
#ruleControls #ruleLoopStatus{font:11px/1.45 var(--sans,Arial,sans-serif);
  background:#1c2c26;border-left:2px solid #8bc1a0;padding:8px 9px}
#ruleControls .rule-loop-buttons{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0}
#ruleControls .rule-loop-buttons #ruleLoopStart{flex:3 1 190px;min-height:53px;grid-column:auto;
  font-size:13px;letter-spacing:.04em}
#ruleControls .rule-loop-buttons #ruleLoopStop{flex:1 1 91px;min-height:53px}
#ruleControls #rulePaint,#ruleControls #ruleLoopOnce{width:100%;margin:9px 0 4px}
#ruleControls #ruleUseArchive,#ruleControls #ruleImagine{width:100%;margin:9px 0}
.source-lab-link{display:block;color:#b3dcca;font:11px/1.5 var(--sans,Arial,sans-serif);
  text-decoration:underline;margin:7px 0 11px}
.model-prompt-slot>textarea{width:100%;min-height:65px}
#ruleWorkspace>.work-details{margin:11px 0}
#ruleWorkspace>.work-details p{font:12px/1.45 var(--sans,Arial,sans-serif);margin:3px 0}
#ruleWorkspace #ruleGoldenEvidence{font-size:11px}
#ruleWorkspace>.advanced-configuration{margin-top:10px}
#ruleWorkspace .rule-vote{border:0;background:none;padding:0}
#ruleWorkspace .rule-vote .imagine-buttons{display:flex;gap:10px}
#ruleWorkspace .rule-vote .vote-button{min-height:48px;flex:1}
#ruleWorkspace .rule-gallery-heading{font-size:18px}
#ruleWorkspace .rule-loop-history{margin:8px 0}
#ruleWorkspace .rule-gallery{margin:9px 0}
#ruleWorkspace .rule-frame{box-shadow:0 5px 22px #0004}
/* Secondary canvases are still internal rendering buffers; there is no
   visible legacy alternative studio even if a script toggles its hidden flag. */
#imaginationWorkspace,#proceduralWorkspace,#proceduralActions,
#imaginationControls,#landscapeControls,#letteringControls,#shelf{display:none!important}
@media(max-width:730px){
 .studio-unified-tag{font-size:8px;padding:6px 8px;max-width:125px;text-align:center}
 #ruleControls .rule-loop-buttons #ruleLoopStart{flex:3 1 150px}
 #ruleControls .rule-loop-buttons #ruleLoopStop{flex:1 1 76px}
 #ruleWorkspace .rule-vote .imagine-buttons{gap:6px}
}


/* Build 318 / one living artwork appears FIRST (both DOM and visual order).
   Input and one Pause/Resume action follow it. All configuration is secondary.
   Never hide the canvas while the renderer prepares its next frame. */
.product-frame{display:flex;flex-direction:column;gap:16px;padding-top:10px}
.product-frame>.workspace{order:0;min-width:0}
.product-frame>.controls{order:1;min-width:0;padding:8px 0 20px;
  display:flex;flex-direction:column;max-width:none}
#ruleWorkspace{width:100%;max-width:1140px;margin:0 auto}
#ruleWorkspace .rule-frame{width:100%;border-width:6px;aspect-ratio:8/5;
  max-height:72svh;background:#202b25}
.canvas-word-rail{display:flex;gap:12px;align-items:flex-start;
  margin:11px 0 6px;background:#202823;padding:12px}
.canvas-word-rail .unified-studio-input{flex:1 1 50%;min-width:0;
  padding:0;margin:0;display:flex;flex-direction:column}
.canvas-word-rail .unified-studio-input label{font:800 10px/1.5 var(--sans);
  letter-spacing:.09em;color:var(--mint);margin:0 0 5px}
.canvas-word-rail .unified-studio-input input{font:800 clamp(16px,2.2vw,23px)/1.2 var(--sans);
  letter-spacing:.04em;background:#27372f;color:var(--ink);
  border:1px solid #779b7c;min-height:50px;padding:10px 12px;margin:0}
.canvas-word-rail .unified-studio-input .control-help{font:11px/1.4 var(--sans);
  margin:5px 0 0;color:#c0d2c4;display:block;max-height:42px;overflow:hidden}
.canvas-word-rail .rule-loop-buttons{flex:0 0 min(30%,205px);display:flex;min-height:50px}
.canvas-word-rail .rule-loop-buttons #ruleLoopStop{width:100%;flex:1;
  font-size:12px;letter-spacing:.055em;border:1px solid #71957b;
  background:#28392f;color:#d2efd4;min-height:50px}
#ruleHeroStatus{margin:4px 0 11px;color:#c3e2bf;font:800 10px/1.5 var(--sans);
 letter-spacing:.065em}
#ruleWorkspace .rule-vote{margin:10px 0}
#ruleControls{min-height:0}
#ruleControls>.abstraction-control>.rule-loop-buttons{display:none}
#ruleControls .abstraction-control{border:1px solid #374e40}
#ruleControls>p.model-budget{margin:7px 0}
#ruleControls #ruleSurvivors{font-size:11px}
.product-frame>.controls>.intro{max-width:680px}
@media(max-width:730px){
  .product-frame{gap:9px;padding:8px 0 25px}
  #ruleWorkspace .canvas-heading{padding:7px 1px 10px}
  #ruleWorkspace .canvas-heading-text{font-size:10px}
  #ruleWorkspace .work-number{font-size:8px}
  #ruleWorkspace .rule-frame{max-height:none;border-width:3px;aspect-ratio:8/5}
  .canvas-word-rail{padding:9px 8px;margin:8px 0 3px;gap:7px}
  .canvas-word-rail .unified-studio-input{flex:1 1 65%}
  .canvas-word-rail .unified-studio-input input{font-size:16px;min-height:48px;padding:8px}
  .canvas-word-rail .unified-studio-input label{font-size:9px}
  .canvas-word-rail .unified-studio-input .control-help{font-size:9px;
    margin-top:5px;max-height:28px}
  .canvas-word-rail .rule-loop-buttons{flex:0 0 99px}
  .canvas-word-rail .rule-loop-buttons #ruleLoopStop{font-size:10px;min-height:48px}
  #ruleHeroStatus{font-size:9px;margin:4px 0}
  .product-frame>.controls{padding:15px 0 0;border-top:1px solid #415a46}
  .product-frame>.controls>h1{font-size:28px;margin-bottom:8px}
  .product-frame>.controls>.intro{font-size:13px;margin-bottom:8px}
  #ruleControls .abstraction-control{margin:6px 0}
}

/* 327 — one obvious style switch and one obvious abstraction dial. */
.canvas-word-rail{flex-wrap:wrap}
.canvas-word-rail .rule-loop-buttons{
  flex:1 1 100%;display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:8px;min-height:auto;
}
.canvas-word-rail .rule-loop-buttons button{
  min-height:45px;line-height:1.25;white-space:normal;
}
#ruleChangeStyle{font-weight:900;letter-spacing:.06em}
#ruleRepeatStyle:disabled{opacity:.45}
.style-control-rail{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:10px 13px;border:1px solid rgba(193,202,173,.29);
  background:rgba(38,49,43,.45);border-radius:8px;
}
.style-control-rail label{font:900 11px/1.4 var(--sans);letter-spacing:.08em}
.style-control-rail select{min-height:42px;flex:1 1 205px;
  padding:8px 10px;border-radius:5px;max-width:420px}
.style-control-rail span{font:11px/1.5 var(--sans);flex:1 1 230px}
#ruleStyleStatus{margin:7px 0 9px;font-size:11px;line-height:1.5}
@media(max-width:730px){
 .canvas-word-rail .rule-loop-buttons{flex:1 1 100%;display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .canvas-word-rail .rule-loop-buttons #ruleChangeStyle{
   grid-column:1/-1;min-height:52px;font-size:13px}
 .canvas-word-rail .rule-loop-buttons #ruleRepeatStyle,
 .canvas-word-rail .rule-loop-buttons #ruleLoopStop{
   min-height:43px;font-size:10px}
 .style-control-rail{gap:7px;padding:9px}
 .style-control-rail select{flex:1 1 100%;max-width:none}
 .style-control-rail span{flex:1 1 100%}
}