.picture-panel { display:grid; gap:12px; } .picture-panel .picture-question { font-size:15px; color:var(--text); line-height:1.45; } .picture-idea { font-size:13px; color:var(--muted); } .picture-surface { position:relative; overflow:hidden; border-radius:var(--radius-md); width:100%; touch-action:manipulation; } .picture-surface[data-interactive="true"] { cursor:crosshair; } .picture-surface img { display:block; width:100%; height:auto; border-radius:0!important; } .picture-dimmer { position:absolute; inset:0; pointer-events:none; } .local-question { position:absolute; pointer-events:none; background:rgba(255,255,255,.95); color:var(--text); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; font-size:12px; line-height:1.35; width:max-content; max-width:calc(100% - 16px); max-height:calc(100% - 16px); overflow:auto; box-shadow:0 2px 8px #0002; } .picture-panel button { font-size:13px; } .picture-help { font-size:12px; color:var(--muted); } .image-error { color:var(--muted); font-size:13px; }

body { padding:8px 20px; }
.sandbox-intro { max-width:1200px; margin:0 auto 12px; }
.sandbox-intro h1 { font-size:18px; line-height:1.3; font-weight:700; color:var(--purple-primary); margin:0 0 12px; }
.context-grid { display:grid; gap:6px; }
.context-grid > div, .try-it { font-size:14px; line-height:1.4; }
.context-grid h2::after, .try-it h2::after { content:": "; }
.context-grid p + p::before { content:" "; }
.context-grid h2, .try-it h2 { display:inline; font-size:14px; line-height:inherit; margin:0; }
.context-grid p, .try-it p { display:inline; font-size:14px; line-height:inherit; margin:0; }
.try-it { margin-top:12px; }
.privacy-note { font-size:14px; line-height:1.4; margin:6px 0 0; color:var(--muted); }
.step-selector { display:flex; gap:16px; margin-top:12px; }
.step-selector button { min-height:40px; font-size:14px; flex:0 0 auto; padding:8px 14px; }
.step-selector button[aria-pressed="true"] { background:var(--purple-primary); color:var(--surface); }
.workspace { gap:24px; grid-template-columns:minmax(0,560px) minmax(0,380px); }
.writing-pane { height:clamp(390px,calc(100dvh - 280px),590px); min-height:390px; }
.prompt-card { margin-bottom:10px; }
.support-card { padding:30px 12px 12px; gap:8px; }
.picture-panel { gap:8px; }
.picture-help { margin:0; }
#picture-surface { width:min(100%, calc(100dvh - 500px)); min-width:180px; justify-self:center; }
footer { min-height:40px; }
@media (max-width:760px) {
 body { padding:14px; }
 .context-grid { gap:6px; }
 .context-grid > div { display:block; }
 .context-grid h2, .try-it h2 { display:block; margin-bottom:2px; }
 .workspace { grid-template-columns:minmax(0,1fr); }
 .writing-pane { height:470px; min-height:390px; }
 .writing-surface { min-height:0; }
 #picture-surface { width:100%; min-width:0; }
 .step-selector { flex-wrap:wrap; }
 .step-selector button { flex:0 0 auto; }
}
/* Sandbox framing and local decision UI; student interactions are unchanged. */
.sandbox-intro h1 a { color:inherit; text-decoration:none; }
.try-steps { display:flex; flex-wrap:wrap; gap:6px 28px; margin:6px 0 6px; padding-left:20px; font-size:14px; }
.try-it { margin-top:8px; }
.context-grid > div { line-height:1.35; }
.vote-section { max-width:988px; margin:24px auto 0; border-top:1px solid var(--line); padding-top:16px; }
.vote-section h2 { font-size:20px; margin:0 0 6px; }
.vote-section p { margin:6px 0 12px; font-size:14px; color:var(--muted); }
.vote-section fieldset { display:flex; flex-wrap:wrap; gap:12px 20px; border:1px solid var(--line); border-radius:var(--radius-md); padding:12px; margin-bottom:12px; }
.vote-section legend { font-size:14px; }
.vote-section label { font-size:14px; }
.vote-section input { accent-color:var(--purple-primary); }
#vote-why { display:block; height:72px; min-height:72px; padding:10px; margin-top:6px; border:1px solid var(--line); border-radius:var(--radius-md); resize:vertical; }
.optional-demo a { color:var(--purple-primary); }
.writing-pane { height:clamp(340px,calc(100dvh - 358px),510px); min-height:340px; }
#picture-surface { width:min(100%,calc(100dvh - 568px)); }
@media(max-width:760px) { .try-steps { display:block; } .try-steps li { margin:4px 0; } .writing-pane { height:470px; } #picture-surface { width:100%; } }