:root{color-scheme:light;--paper:#f5f3ed;--panel:#fcfbf8;--ink:#252822;--muted:#71736c;--line:#deded5;--accent:#ae4c31;--focus:#9b4027;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}a{color:inherit}button{color:inherit}svg{display:block}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;left:16px;top:12px;padding:12px 18px;background:var(--ink);color:white;z-index:10;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}
.app-header{min-height:88px;padding:20px 36px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;font-size:24px;font-weight:700;letter-spacing:-1.2px;white-space:nowrap}.brand-symbol{width:23px;height:23px;fill:var(--accent)}.brand-light{font-weight:400}.brand-period{color:var(--accent)}.workspace-name{font-size:12px;color:var(--muted);padding-left:28px;border-left:1px solid var(--line)}.foundation-label{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:5px;color:#65675f;font-size:11px;letter-spacing:.02em}.foundation-label>span{height:5px;width:5px;border-radius:50%;background:var(--accent)}
.workspace{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:322px minmax(0,1fr);min-height:calc(100vh - 88px)}.design-panel{padding:34px 26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:26px}.eyebrow{text-transform:uppercase;font-size:9px;letter-spacing:.17em;margin:0 0 18px;color:var(--accent);font-weight:700}.panel-intro h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:36px;line-height:1.12;letter-spacing:-1.4px;margin:0 0 15px;max-width:270px}.intro-copy{font-size:12px;line-height:1.8;color:var(--muted);margin:0;max-width:255px}.sample-card{border:1px solid #c8c9bd;border-radius:7px;padding:7px;background:var(--panel);box-shadow:0 4px 12px #24271e05}.sample-art{height:84px;background:#d6c3a5;position:relative;overflow:hidden;isolation:isolate;border-radius:3px}.sample-art:after{content:"";position:absolute;left:0;bottom:0;right:0;height:24px;background:#c5ab88;z-index:-1}.sample-art span:nth-child(1){position:absolute;width:70px;height:92px;top:13px;left:21%;border:17px solid #f3e8d4;border-bottom:0;border-radius:50px 50px 0 0;transform:rotate(-8deg);box-shadow:8px 4px 10px #6e48331f}.sample-art span:nth-child(2){position:absolute;width:45px;height:45px;right:22%;bottom:9px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ce8863,#97543d);box-shadow:7px 8px 7px #73523f30}.sample-art span:nth-child(3){position:absolute;width:51px;height:13px;background:#e8d5b5;bottom:0;right:20%}.sample-caption{display:flex;align-items:center;justify-content:space-between;padding:11px 5px 6px}.sample-caption strong{font-size:11px;font-weight:600;display:block;margin-bottom:5px}.sample-caption div>span{font-size:10px;color:var(--muted)}.sample-number{font-family:Georgia,serif;font-size:26px;color:#a5a795}
.control-group{padding:0;margin:0;border:0;min-width:0}.control-group legend,.control-heading label{font-size:11px;font-weight:600;padding:0;margin-bottom:12px}.mood-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mood-button{display:flex;align-items:center;flex-direction:column;gap:8px;min-height:76px;background:transparent;border:1px solid var(--line);border-radius:5px;padding:10px 5px;font-size:10px;transition:border-color .15s,background .15s}.mood-button:hover{background:#fff9}.mood-button[aria-pressed=true]{border-color:var(--accent);background:#eee6db}.mood-swatch{width:30px;height:23px;border-radius:3px;border:1px solid #0000000c}.swatch-clay{background:linear-gradient(90deg,#eee4d5 0 50%,#aa573a 50%)}.swatch-moss{background:linear-gradient(90deg,#e8eadf 0 50%,#56664e 50%)}.swatch-ink{background:linear-gradient(90deg,#e3e4e5 0 50%,#364a5a 50%)}.control-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.control-heading output{font-size:10px;color:var(--muted)}.control-heading label{margin-bottom:8px}.spacing-group input{display:block;width:100%;height:44px;margin:0;accent-color:var(--accent);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:4px}.panel-actions{display:flex;flex-direction:column;gap:5px;margin-top:0}.remix-button{min-height:45px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#faf8f2;border:1px solid var(--ink);border-radius:5px;font-size:11px;font-weight:600;transition:background .15s}.remix-button:hover{background:#41463a}.reset-button{min-height:44px;background:transparent;border:0;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.reset-button:hover{color:var(--ink)}.foundation-note{font-size:10px;line-height:1.65;color:#777a70;border-top:1px solid var(--line);padding-top:15px;margin:auto 0 0}
.preview-region{padding:20px 28px 0;min-width:0;display:flex;flex-direction:column}.preview-toolbar{height:58px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.preview-title{display:flex;align-items:center;gap:7px;min-height:34px;font-size:11px;color:#62665b}.live-dot{background:#8b9677;width:5px;height:5px;border-radius:50%}.device-options{display:flex;border:1px solid var(--line);border-radius:5px;padding:3px;gap:3px;background:#ecece5}.device-options button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:83px;padding:5px 10px;border:0;border-radius:3px;font-size:10px;color:var(--muted);background:transparent}.device-options button svg{width:14px;height:14px}.device-options button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #0000000d}.preview-stage{flex:1;min-height:650px;background:#e7e7df;border:1px solid #d5d6cc;border-radius:8px;padding:19px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background-image:radial-gradient(#8d95822e .5px,transparent .5px);background-size:6px 6px}.preview-viewport{width:100%;max-width:1240px;container-type:inline-size;transition:max-width .25s ease}.preview-stage[data-device=phone] .preview-viewport{max-width:350px}@media(min-width:1600px){.workspace{grid-template-columns:350px minmax(0,1fr)}.design-panel{padding:42px 34px}.preview-region{padding:25px 38px 0}}
@media(max-width:1000px){.app-header{padding:18px 22px;gap:22px;min-height:76px}.workspace{grid-template-columns:275px minmax(0,1fr);min-height:calc(100vh - 76px)}.design-panel{padding:28px 20px;gap:24px}.panel-intro h1{font-size:32px}.preview-region{padding:16px 18px 0}.preview-stage{padding:13px}.foundation-label{font-size:10px}.workspace-name{padding-left:21px}.sample-art{height:75px}}
@media(max-width:760px){.app-header{flex-wrap:wrap;gap:12px;min-height:76px;padding:17px 20px}.brand{font-size:22px}.brand-symbol{width:21px;height:21px}.workspace-name{display:none}.foundation-label{font-size:9px;padding:7px 9px}.workspace{grid-template-columns:1fr}.design-panel{border-right:0;padding:28px 20px;display:grid;grid-template-columns:1fr 1fr;gap:25px 22px;align-items:start}.panel-intro{grid-column:1/-1}.panel-intro h1{max-width:450px;font-size:39px;letter-spacing:-1.5px}.intro-copy{max-width:430px}.sample-card{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:100px 1fr;gap:12px}.sample-art{height:69px}.sample-caption{padding:0 8px 0 0}.sample-art span:nth-child(1){left:12%;width:42px;border-width:11px;top:12px}.sample-art span:nth-child(2){right:12%;width:30px;height:30px}.sample-art span:nth-child(3){right:8%;width:38px}.sample-caption strong{font-size:12px}.control-group{grid-column:1/-1}.mood-options{gap:10px}.mood-button{flex-direction:row;justify-content:center;min-height:49px;gap:10px;font-size:11px}.mood-swatch{width:28px;height:22px}.spacing-group{margin-top:1px}.panel-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 115px;gap:10px}.foundation-note{grid-column:1/-1;margin:0;font-size:10px;padding-top:13px}.preview-region{padding:0 14px}.preview-toolbar{height:60px;align-items:center;padding:0 3px}.preview-title{font-size:10px}.device-options button{min-height:44px;min-width:45px;padding:6px 9px}.device-options button span{display:none}.device-options button svg{width:17px;height:17px}.preview-stage{min-height:0;padding:10px;background-size:5px 5px}.preview-footer{font-size:8px;padding:0 3px;gap:7px;min-height:46px}.preview-footer output{min-width:84px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.rendered-preview{width:100%;position:relative}.rendered-preview iframe{display:block;width:100%;height:780px;border:0;border-radius:3px;background:#f6efe1;box-shadow:0 3px 13px #353f2212}.preview-stage[data-device=phone] iframe{height:720px}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;font-size:9px;color:#777c6c}.preview-footer p{display:flex;align-items:center;gap:6px;margin:0}.preview-footer svg{width:11px;height:11px;fill:none;stroke:currentColor}.preview-footer output{text-align:right;min-width:95px}.no-script{padding:15px 30px;color:#773f29;font-size:13px}button:disabled,input:disabled{opacity:.5;cursor:wait}@media(max-width:760px){.rendered-preview iframe{height:720px}.preview-footer{font-size:8px}.preview-stage[data-device=phone] iframe{height:720px}}