.sandbox-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.liquid-sandbox .tool-widget { min-width:0; width:100%; }
.liquid-sandbox .CodeMirror { height:300px; border:1px solid var(--border-color); border-radius:8px; font-size:13px; line-height:1.6; }
.liquid-sandbox .CodeMirror-scroll { overflow:auto !important; }
.liquid-sandbox #editor { width:100%; min-height:300px; }
.sandbox-intro { margin-bottom:24px; max-width:850px; }
.sandbox-example-card { margin-bottom:24px !important; }
.sandbox-chooser { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; }
.sandbox-chooser > div { flex:1; max-width:560px; }
.sandbox-badge { padding:8px 12px; font-size:.75rem; font-weight:700; border-radius:20px; background:var(--light-blue-1); color:var(--dark-blue); }
.sandbox-example-notes { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:12px; }
.sandbox-example-notes p { margin:0; font-size:.875rem; }
.sandbox-example-notes strong { display:block; margin-bottom:4px; color:var(--dark-blue); }
.sandbox-example-notes span { overflow-wrap:anywhere; }
.sandbox-example-card a, .sandbox-reference a { font-size:.875rem; color:var(--dark-blue); text-decoration:underline; text-underline-offset:3px; }
.sandbox-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sandbox-card-heading .tw-label { margin:0; }
.sandbox-secondary { background:var(--white); border:1px solid var(--border-color); border-radius:8px; padding:8px 12px; color:var(--dark-blue); font-size:.8rem; font-weight:600; line-height:1.5; }
.sandbox-secondary:hover { background:var(--light-blue-1); }
.sandbox-secondary:disabled { opacity:.45; cursor:default; }
.liquid-sandbox .sandbox-help { font-size:.8rem; line-height:1.6; margin:12px 0; color:var(--dark-blue); }
.sandbox-data-details { border-top:1px solid var(--border-color); margin-top:18px; padding-top:16px; }
.sandbox-data-details summary { cursor:pointer; font-size:.875rem; font-weight:700; color:var(--dark-blue); }
.sandbox-data-details label { display:block; }
.liquid-sandbox .sandbox-json { height:220px; resize:vertical; font-family:monospace; line-height:1.6; font-size:12px; white-space:pre; background:var(--light-blue-1); }
.sandbox-actions { display:flex; gap:10px; margin-top:18px; }
.sandbox-actions .tw-action-btn { flex:1; }
.sandbox-actions .sandbox-secondary { flex:0 0 auto; }
.sandbox-result-card { position:static; }
.sandbox-view-switch { display:flex; padding:4px; border-radius:10px; background:var(--light-blue-1); border:0; gap:4px; }
.sandbox-view-switch label { flex:1; margin:0; position:relative; cursor:pointer; }
.sandbox-view-switch input { position:absolute; opacity:0; }
.sandbox-view-switch span { display:block; border-radius:7px; padding:9px 12px; font-size:.8rem; text-align:center; color:var(--dark-blue); }
.sandbox-view-switch input:checked + span { background:var(--dark-blue); color:var(--white); font-weight:700; }
.sandbox-view-switch input:focus-visible + span { outline:3px solid var(--dark-blue); outline-offset:2px; }
#sandbox-preview { width:100%; height:360px; border:1px solid var(--border-color); border-radius:8px; background:var(--white); }
.liquid-sandbox .sandbox-output { height:360px; resize:vertical; background:var(--dark-blue); color:var(--white); font-family:monospace; white-space:pre; font-size:12px; }
#sandbox-error { padding:14px; border:1px solid currentColor; border-radius:8px; color:var(--dark-blue); background:var(--light-blue-1); white-space:pre-wrap; overflow-wrap:anywhere; font-size:.8rem; }
.sandbox-empty { padding:24px; font-size:.875rem; }
.sandbox-reference { margin-top:28px; padding:24px 28px; border:1px solid var(--border-color); border-radius:16px; }
.sandbox-reference h2 { font-size:1.1rem; margin-bottom:12px; color:var(--dark-blue); }
.sandbox-reference p { font-size:.875rem; margin-bottom:10px; }
.sandbox-reference-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; }
.liquid-sandbox button:focus-visible, .liquid-sandbox textarea:focus-visible, .liquid-sandbox select:focus-visible, .liquid-sandbox summary:focus-visible { outline:3px solid var(--dark-blue); outline-offset:3px; }
@media(max-width:767px) { .sandbox-grid { grid-template-columns:minmax(0,1fr); } .sandbox-chooser { align-items:flex-start; flex-direction:column; gap:12px; } .sandbox-chooser > div { width:100%; } .sandbox-example-notes { grid-template-columns:1fr; gap:12px; } .sandbox-result-card { position:static; } .sandbox-card-heading { gap:8px; } .sandbox-actions { flex-wrap:wrap; } .sandbox-actions .tw-action-btn { flex-basis:100%; } .sandbox-actions .sandbox-secondary { width:100%; } #sandbox-preview, .liquid-sandbox .sandbox-output { height:300px; } .sandbox-reference { padding:20px; } }