.remix-main{padding-bottom:3rem}.remix-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:2.5rem 0 2rem}.remix-heading h1{font-size:clamp(2.6rem,4.3vw,4.3rem);line-height:1.05;letter-spacing:-.055em;margin:.7rem 0 0}.remix-heading h1 em{font-family:Georgia,serif;font-weight:400}.remix-heading>p{font-size:.98rem;line-height:1.65;max-width:22rem}.remix-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}.remix-controls{border:1px solid #c7c8b9;background:#fffdf6;padding:24px;border-radius:16px;display:flex;flex-direction:column;gap:10px}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.control-heading .eyebrow{font-size:10px;margin:0}.plain-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px;color:var(--ink);font:inherit;font-size:12px}.remix-controls label,.remix-controls legend{font-weight:600;font-size:13px}.remix-controls input[type=text],.remix-controls select{width:100%;min-height:44px;border:1px solid #9baca1;border-radius:7px;background:#fffdf6;padding:10px;color:#102d29;font:inherit;font-size:13px}.remix-controls small{font-size:11px;line-height:1.6;color:#4d625a}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 4px}.color-controls label{display:flex;flex-direction:column;gap:8px}.color-controls input{border:1px solid #a9b2a3;border-radius:8px;background:transparent;width:100%;height:48px;cursor:pointer;padding:4px}.palette-field{border:0;margin:0 0 10px;padding:0}.palette-field legend{font-weight:400;font-size:11px;margin-bottom:8px;color:#4d625a}.palette-buttons{display:flex;gap:6px;flex-wrap:wrap}.palette-buttons button{font:inherit;font-size:11px;padding:9px 11px;min-height:36px;border:1px solid #a9b2a3;border-radius:20px;background:#f5f0e6;cursor:pointer;color:#102d29}.palette-buttons button:nth-child(2){background:#e0d9f0}.palette-buttons button:nth-child(3){background:#f3d1c9}.remix-controls select{margin-bottom:10px}.remix-controls .button{justify-content:center;width:100%;border:0;cursor:pointer;min-height:48px}.remix-controls button:disabled{opacity:.6;cursor:wait}.download-note{font-size:11px;text-align:center;line-height:1.7;margin:0;color:#4d625a}.form-error{font-size:12px;color:#9d342f;margin:0}.form-error:empty{display:none}#download-status{font-size:12px;line-height:1.5;margin:0;overflow-wrap:anywhere}.remix-preview{min-width:0;background:#102d29;border-radius:16px;color:#f5f0e6;overflow:hidden;box-shadow:0 8px 0 #d2d6c5}.preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px}.preview-top h2{letter-spacing:0;line-height:1.4;font:500 13px system-ui,sans-serif;margin:0;overflow-wrap:anywhere}.preview-top span{font:10px ui-monospace,monospace;color:#c5d8b9;white-space:nowrap}.canvas-desk{display:flex;justify-content:center;align-items:center;padding:0 20px;min-height:220px}.canvas-desk canvas{display:block;width:100%;height:auto;max-height:610px;object-fit:contain;background:#15352f}.canvas-desk.tall canvas{width:auto;max-width:100%;height:610px}.canvas-desk.square canvas{width:auto;max-width:100%;height:540px}.remix-transport{display:flex;align-items:center;gap:14px;padding:20px 24px 8px}.remix-transport button{font:500 12px system-ui,sans-serif;padding:10px 13px;background:#d5ed74;color:#102d29;border:0;border-radius:6px;cursor:pointer;min-height:44px;min-width:100px}.remix-transport input{flex:1;min-width:40px;accent-color:#d5ed74;height:30px}.remix-transport output{font:11px ui-monospace,monospace;white-space:nowrap;color:#d9e1d3}.preview-foot{font-size:11px;line-height:1.7;margin:8px 24px 22px;color:#c6d2c4}#boot-status{font-size:12px;margin:12px 24px}#boot-status:empty{display:none}.take-home{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);padding:5rem 0 2rem}.take-home h2{font-size:clamp(2.1rem,3.4vw,3.4rem);letter-spacing:-.04em;line-height:1.1;margin:1rem 0}.take-home h2 em{font-family:Georgia,serif;font-weight:400}.take-home p,.next-steps li{font-size:14px;line-height:1.8}.next-steps{padding:20px 0}.next-steps h3{font-size:18px}.next-steps ol{padding-left:20px;margin:20px 0 28px}.next-steps li{padding-left:8px;margin:12px 0}.remix-message{border:1px solid #aeb69b;padding:20px}.remix-controls :focus-visible,.remix-transport :focus-visible{outline:3px solid #e47649;outline-offset:4px}.remix-controls input:invalid{border-color:#a74335}
@media(max-width:900px){.remix-heading{display:block}.remix-heading>p{margin-top:18px}.remix-workspace{grid-template-columns:240px minmax(0,1fr);gap:16px}.remix-controls{padding:18px}.preview-top{padding:18px}.preview-top span{display:none}.canvas-desk{padding:0 12px}.remix-transport{padding:16px 12px 6px;gap:8px;flex-wrap:wrap}.remix-transport output{margin-left:auto}.preview-foot{margin:12px 16px 20px}.take-home{gap:2rem}}
@media(max-width:640px){.remix-heading{padding:1.4rem 0}.remix-workspace{display:flex;flex-direction:column}.remix-preview{order:-1;width:100%}.remix-controls{width:100%}.canvas-desk{min-height:0}.canvas-desk.tall canvas{height:490px}.canvas-desk.square canvas{height:auto;width:100%}.remix-transport button{min-width:98px}.remix-transport output{font-size:10px}.take-home{grid-template-columns:1fr;padding:3.5rem 0 0;gap:0}.preview-foot{font-size:10px}.remix-heading h1{max-width:12ch}.remix-heading .eyebrow{font-size:9px}.remix-controls .color-controls{grid-template-columns:1fr 1fr}.next-steps{padding-top:0}}

/* Keep the live result beside desktop controls; phone anchors avoid covering fields. */
.preview-return,.preview-edit{display:none}
.remix-preview{position:sticky;top:104px}
.remix-controls input[type=text],.remix-controls select{font-size:15px}
.palette-buttons button{min-height:44px;font-size:12px;padding-inline:13px}
.palette-buttons button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink);border-color:var(--ink)}
.preview-top{gap:12px;padding:13px 20px}
.preview-top h2{flex:1;font-size:14px}
#expand-preview{flex-shrink:0;min-height:44px;padding:9px 12px;border:1px solid #708a78;border-radius:6px;background:transparent;color:#f5f0e6;font-size:12px}
#expand-preview:hover{background:#25463a}
.preview-foot{font-size:12px}
.remix-heading>p{color:var(--muted)}
.remix-controls .download-note{font-size:12px}
.remix-controls .plain-button{min-height:44px}
.remix-preview:fullscreen{display:flex;flex-direction:column;position:static;border-radius:0;background:#102d29;padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));box-shadow:none}
.remix-preview:fullscreen .canvas-desk{flex:1;min-height:0;height:0;padding:0 20px}
.remix-preview:fullscreen .canvas-desk canvas{width:100%;height:100%;max-height:none;object-fit:contain}
.remix-preview:fullscreen .preview-foot{margin-bottom:6px}
@media(max-width:900px){.remix-preview{top:94px}.preview-top{padding:12px 14px}.preview-top h2{font-size:13px}}
@media(max-width:640px){
 .remix-heading{padding-block:24px}
 .remix-heading>p{font-size:14px;line-height:1.7;margin-bottom:0}
 .remix-workspace{gap:20px}
 .remix-preview{position:static;box-shadow:0 5px 0 #d2d6c5;scroll-margin-top:90px}
 .remix-controls{scroll-margin-top:90px}
 .preview-return,.preview-edit{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;font-weight:600}
 .preview-return{margin:0 0 10px}
 .preview-edit{margin:0 12px 12px;color:#f5f0e6;border-top:1px solid #496056}
 .remix-preview:fullscreen .preview-edit{display:none}
 .preview-top{padding:8px 12px}
 .preview-top h2{font-size:13px;line-height:1.4}
 .canvas-desk{height:clamp(150px,27svh,220px);padding:0 10px}
 .canvas-desk canvas,.canvas-desk.tall canvas,.canvas-desk.square canvas{width:100%;height:100%;max-height:100%;object-fit:contain}
 .remix-transport{padding:10px 12px 4px;flex-wrap:nowrap;gap:9px}
 .remix-transport button{min-width:90px;padding:10px;font-size:12px}
 .remix-transport input{height:34px}
 .remix-transport output{font-size:10px;margin-left:0}
 .preview-foot{margin:7px 12px 11px;font-size:11px;line-height:1.55}
 .remix-controls{padding:23px 20px}
 .remix-controls label,.remix-controls legend{font-size:14px}
 .remix-controls input[type=text],.remix-controls select{font-size:16px;min-height:48px}
 .remix-controls small{font-size:12px}
 .palette-buttons button{font-size:13px;min-height:44px}
 .remix-controls .button{font-size:14px}
 .take-home{padding-top:40px}
 .next-steps li,.take-home p{font-size:14px}
}
@media(max-width:360px){.remix-transport{gap:6px;padding-inline:9px}.remix-transport button{min-width:85px;font-size:11px}.remix-transport output{font-size:9px}}