/* Abuela's flower box. Shares the accepted lesson interior: dark ink, warm gold, Fraunces/DM Sans. */
.box-studio{background:#0c1524;border-block:1px solid rgba(255,255,255,.18)}
.box-wrap{max-width:1150px;margin:auto;padding:90px 32px}
.box-heading h2{font-size:clamp(36px,5vw,62px);margin:10px 0 18px}
.box-heading>p{max-width:620px;font-size:18px}
.box-ask{display:flex;gap:18px;align-items:center;margin:0 0 26px;max-width:680px}
.box-ask img{width:96px;height:96px;object-fit:cover;border-radius:8px;flex:none}
.box-ask blockquote{margin:0;font-family:Fraunces,Georgia,serif;font-size:22px;color:#fff;line-height:1.3}
.box-ask cite{display:block;font-family:'DM Sans',sans-serif;font-style:normal;font-size:13px;color:#a6b4c6;margin-top:6px}
#box-work{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;align-items:start}
.box-main{min-width:0}
.box-stage{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(#f3d9c4,#e9c3a4 62%,#c99a76 62%,#b8876a)}
.box-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(150,90,60,.08) 0 2px,transparent 2px 46px)}
#paint-area{position:relative;touch-action:none;cursor:crosshair;outline-offset:4px}
#paint-area:focus-visible{outline:3px solid #e4c463}
#box-svg{display:block;width:100%;height:auto}
#box-work.showing-saved .box-stage{box-shadow:0 0 0 3px #e4c463}
#slot-buttons{position:absolute;inset:0 0 auto 0;height:44%;pointer-events:none}
#slot-buttons .slot{position:absolute;bottom:0;transform:translateX(-50%);width:max(44px,15%);height:max(44px,80%);min-height:0;padding:0;border:2px dashed rgba(20,16,10,.55);border-radius:12px;background:rgba(255,255,255,.12);pointer-events:auto}
#slot-buttons .slot:hover{background:rgba(255,255,255,.3)}
.box-tools{display:flex;flex-direction:column;gap:14px}
.box-tools p{margin:0}
#box-step{font-family:Fraunces,Georgia,serif;font-size:26px;color:#fff;margin:0}
#box-status{min-height:72px;font-size:17px}
.tool-row{display:flex;gap:8px;flex-wrap:wrap}
.tool-row button{flex:1 1 30%;padding:10px 8px;font-size:14px}
.tool-row button[aria-pressed=true]{border:2px solid #c9a227;background:#1c2a3b;font-weight:700}
.pot{display:inline-block;width:16px;height:16px;border-radius:50%;margin-right:6px;vertical-align:-3px;border:1px solid #14100a}
.box-actions{display:flex;gap:9px;flex-wrap:wrap}
.box-actions button{flex:1}
#look-street{width:100%}
#street-dialog{max-width:820px}
#street-svg{display:block;width:100%;height:auto;border-radius:10px;background:#9fc9e8}
.street-ask{font-size:18px}
.box-reflection{border-top:1px solid rgba(255,255,255,.18);margin-top:46px;padding-top:22px;max-width:780px}
.box-reflection p{font-size:18px}
@media(max-width:760px){.box-wrap{padding:48px 18px}#box-work{grid-template-columns:1fr;gap:20px}.box-heading>p{font-size:16px}#box-status{min-height:0;font-size:16px}#box-step{font-size:22px}.box-ask{gap:12px}.box-ask img{width:72px;height:72px}.box-ask blockquote{font-size:18px}.tool-row button{font-size:13px}}

.dialog-head{flex-wrap:wrap}#street-dialog .dialog-head h2{font-size:28px}