:root{color:#20221e;font-synthesis:none;--ink:#20221e;--muted:#676053;--paper:#f2ede2;--rule:#20221e33;--accent:#8a4232;background:#ded5c4;font-family:Georgia,Times New Roman,serif}*,:before,:after{box-sizing:border-box}html{background:radial-gradient(circle at 14% 0,#ffffff80,#0000 31rem),linear-gradient(145deg,#e4dccd,#d3c4aa);min-width:320px;min-height:100%}body{min-height:100vh;margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,input[type=range]{cursor:pointer}.page-shell{gap:clamp(3.5rem,7vw,6.5rem);width:min(100% - 2rem,76rem);margin-inline:auto;padding-block:clamp(2.5rem,6vw,5.5rem);display:grid}.introduction{border-bottom:1px solid var(--rule);grid-template-columns:minmax(0,1.4fr) minmax(17rem,.6fr);align-items:end;gap:2rem;padding-bottom:2rem;display:grid}.introduction h1,.section-heading h2,.control-panel h3,.courtyard-card h3,.variation-card h3,.introduction p,.section-heading p,.courtyard-card p,.control-panel p,.variation-card p{margin-block:0}.introduction h1{letter-spacing:-.045em;max-width:12ch;margin-top:.5rem;font-size:clamp(2.6rem,6vw,5.25rem);font-weight:400;line-height:.92}.introduction-details>p{max-width:29rem;color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.65}.project-links{flex-wrap:wrap;gap:1rem;margin-top:1.25rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.875rem;font-weight:650;display:flex}.project-links a,.export-panel a{color:var(--ink);text-underline-offset:.25rem}.export-panel{border-block:1px solid var(--rule);background:#f2ede27a;gap:1rem;min-width:0;padding:clamp(1rem,3vw,2rem);display:grid}.export-panel h2{margin:0 0 .75rem;font-size:2rem;font-weight:400}.export-panel p{max-width:60ch;margin:0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.6}.export-panel .install-command{margin-top:.75rem}.export-actions{flex-wrap:wrap;gap:.75rem;display:flex}.export-actions button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:.12rem;padding:.75rem 1rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.875rem;font-weight:650}.export-actions button:disabled{cursor:wait;opacity:.55}#export-status,#code-details summary{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.875rem}#code-details{min-width:0}#code-details summary{cursor:pointer;text-underline-offset:.25rem;width:fit-content;text-decoration:underline}#generation-code{border:1px solid var(--rule);background:var(--paper);width:100%;min-height:24rem;color:var(--ink);resize:vertical;border-radius:0;margin-top:1rem;padding:1rem;font:.875rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;display:block}.eyebrow,.section-index,.variation-place{color:#6f614c;letter-spacing:.17em;text-transform:uppercase;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.69rem;font-weight:750}.playground-section,.gallery-section{gap:1.75rem;display:grid}.section-heading{justify-content:space-between;align-items:end;gap:2rem;display:flex}.section-heading h2{letter-spacing:-.035em;margin-top:.4rem;font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1}.section-heading>p,.gallery-tools>p{max-width:25rem;color:var(--muted);text-align:right;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.82rem;line-height:1.55}.playground-layout{border:1px solid var(--rule);background:#f2ede27a;grid-template-columns:minmax(0,1.58fr) minmax(17rem,.62fr);align-items:start;gap:1rem;padding:1rem;display:grid;box-shadow:0 1.5rem 4.5rem #4839221a}.courtyard-card{width:100%;min-height:34rem;color:var(--ink);background:#f8f5ecd6;border:1px solid #20221e57;padding:13rem 2.5rem 2.5rem;display:block;position:relative;overflow:hidden}.courtyard-card[data-canvas=portrait]{min-height:36rem;padding-top:13.5rem}.courtyard-card[data-canvas=panorama]{min-height:32rem;padding-top:12.5rem}.card-content{z-index:1;gap:.8rem;max-width:32rem;display:grid;position:relative}.courtyard-card h3{letter-spacing:-.025em;font-size:clamp(1.9rem,4vw,2.85rem);font-weight:400;line-height:1.02}.courtyard-card .card-content>p:not(.eyebrow,.status){color:#514b40;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.92rem;line-height:1.55}.actions{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:.3rem;display:flex}.actions button,.actions a,.control-actions button,.load-variation,#shuffle-gallery{border-radius:.12rem}.actions button{border:1px solid var(--ink);background:var(--ink);color:#f4eddc;padding:.68rem .9rem}.actions a{color:#34362f;text-underline-offset:.25rem;padding:.55rem .2rem;text-decoration-thickness:1px}.actions button:hover,.primary-control:hover{background:#35382f}:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.status{color:#706655;min-height:1.2em;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.76rem}.control-panel{background:#e8e0d0b8;border:1px solid #20221e3d;min-width:0;padding:1.45rem}.control-panel-heading{border-bottom:1px solid var(--rule);padding-bottom:1.25rem}.control-panel h3{margin-top:.35rem;font-size:1.55rem;font-weight:400;line-height:1.1}#playground-controls{gap:1.25rem;padding-top:1.35rem;display:grid}.control{gap:.5rem;min-width:0;display:grid}.control label,.control output{color:#4f493f;letter-spacing:.08em;text-transform:uppercase;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.73rem;font-weight:700}.control output{border:1px solid var(--rule);min-width:3.25rem;color:var(--ink);text-align:center;padding:.15rem .35rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.control-label-row{justify-content:space-between;align-items:center;gap:1rem;display:flex}.control input[type=text],.control select{width:100%;min-width:0;color:var(--ink);background:#faf8f1cc;border:1px solid #20221e59;border-radius:0}.control input[type=text]{padding:.65rem .7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.77rem}.control input[type=range]{width:100%;accent-color:var(--ink);margin:0}.control select{margin-top:.45rem;padding:.62rem 1.8rem .62rem .65rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.8rem}.control-hint{color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif;font-size:.7rem;line-height:1.4}.control-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.control-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;padding-top:.25rem;display:grid}.control-actions button,.load-variation,#shuffle-gallery{border:1px solid var(--ink);min-height:2.65rem;color:var(--ink);background:0 0;padding:.62rem .75rem;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.74rem;font-weight:700}.control-actions .primary-control{background:var(--ink);color:var(--paper)}.note{color:#5e5547;max-width:46rem;margin:-4.5rem 0 0;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.84rem;line-height:1.6}.gallery-heading{border-bottom:1px solid var(--rule);padding-bottom:1.75rem}.gallery-tools{align-items:end;gap:1rem;max-width:33rem;display:flex}#shuffle-gallery{background:#f2ede26b;flex:none}#shuffle-gallery:hover,.control-actions button:not(.primary-control):hover,.load-variation:hover{background:#ffffff6b}#shuffle-gallery:disabled{cursor:wait;opacity:.55}.variation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.75rem 1.25rem;display:grid}.variation-card{align-content:start;gap:1rem;min-width:0;display:grid}.variation-frame{background:#f6f2e8a8;border:1px solid #20221e47;width:100%;padding-bottom:1.75rem;padding-left:1.75rem;padding-right:1.75rem;position:relative;overflow:hidden;box-shadow:0 .9rem 2.5rem #42341e14}.variation-frame-wide{height:13.5rem;padding-top:6rem}.variation-frame-classic{height:15.5rem;padding-top:7.25rem}.variation-frame-tall{height:17.5rem;padding-top:8.5rem}.variation-details{gap:.8rem;min-width:0;padding-inline:.2rem;display:grid}.variation-card .variation-place{margin-bottom:.35rem;font-size:.62rem}.variation-card h3{font-size:1.35rem;font-weight:400;line-height:1.08}.variation-readout{color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif;font-size:.72rem;line-height:1.45}.variation-footer{border-top:1px solid var(--rule);justify-content:space-between;align-items:center;gap:.75rem;min-width:0;padding-top:.8rem;display:flex}.variation-seed{color:#6b6254;overflow-wrap:anywhere;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem}.load-variation{flex:none;min-height:2.25rem;padding:.48rem .58rem;font-size:.68rem}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=56rem){.introduction,.playground-layout{grid-template-columns:1fr}.introduction-details>p{max-width:38rem}.control-panel{padding:1.35rem}.variation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=38rem){.page-shell{gap:3.75rem;width:min(100% - 1rem,76rem)}.introduction,.section-heading,.gallery-tools{align-items:start;gap:1rem;display:grid}.section-heading>p,.gallery-tools>p{text-align:left;max-width:34rem}.playground-layout{padding:.45rem}.courtyard-card{min-height:35rem;padding:13rem 2.125rem 2.25rem}.courtyard-card[data-canvas=portrait]{min-height:35.5rem;padding-top:13.5rem}.courtyard-card[data-canvas=panorama]{min-height:34rem;padding-top:12.5rem}.card-content{gap:.65rem}.actions{gap:.6rem;font-size:.82rem}.actions button{padding:.62rem .7rem}.control-panel{padding:1.15rem}.note{margin-top:-2rem}.gallery-tools,#shuffle-gallery{width:100%}.variation-grid{grid-template-columns:1fr;gap:2.8rem}}@media (width<=22rem){.control-split,.control-actions{grid-template-columns:1fr}.variation-footer{display:grid}.load-variation{width:100%}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}