/* Narty's Robot Garden (templates/practice/garden.html) */
.gd {
  --gd-green: #15803d;
  --gd-green-soft: #dcfce7;
  --gd-ink: #0f172a;
  --gd-muted: #64748b;
  --gd-line: #e2e8f0;
  --gd-card: #ffffff;
  --gd-code-bg: #0f1a2b;
  --gd-code-ink: #e2e8f0;
  --gd-code-line: 1.6;
  --gd-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  background: linear-gradient(180deg, #f0fdf4 0, #f8faff 340px);
  padding-bottom: 3rem;
}

/* ── Hero ── */
.gd-hero { padding: 1.4rem 0 .6rem; }
.gd-banner { display: flex; align-items: center; gap: 1.1rem; margin: .8rem 0 1.1rem; }
.gd-banner-narty { flex: none; width: 92px; height: 92px; }
.gd-kicker { margin: 0 0 .15rem; font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gd-green); }
.gd-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 .3rem; color: var(--gd-ink); }
.gd-lede { margin: 0; max-width: 46rem; color: #334155; font-size: 1.02rem; }

.gd-levels { display: flex; align-items: center; gap: .8rem; }
.gd-levels ol { display: flex; gap: .45rem; list-style: none; margin: 0; padding: .2rem .1rem .5rem; overflow-x: auto; scrollbar-width: thin; flex: 1; }
.gd-lv {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .45rem; align-items: center;
  min-width: 8.6rem; padding: .45rem .7rem .45rem .5rem; border: 1.5px solid var(--gd-line); border-radius: 12px;
  background: var(--gd-card); color: var(--gd-ink); text-align: left; font-size: .8rem; line-height: 1.15;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.gd-lv:not(:disabled):hover { transform: translateY(-2px); border-color: #86efac; box-shadow: 0 6px 16px -10px rgba(21, 128, 61, .6); }
.gd-lv:disabled { opacity: .5; cursor: not-allowed; background: #f8fafc; }
.gd-lv.is-current { border-color: var(--gd-green); box-shadow: 0 0 0 3px var(--gd-green-soft); }
.gd-lv-n {
  grid-row: span 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: #f1f5f9; font-weight: 700; font-size: .85rem;
}
.gd-lv.is-done .gd-lv-n { background: var(--gd-green); color: #fff; }
.gd-lv-t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.4rem; }
.gd-lv-s { color: #f59e0b; font-size: .7rem; letter-spacing: .05em; }
.gd-lv-s .bi-tree-fill { color: var(--gd-green); }
.gd-stars-total { flex: none; margin: 0; font-weight: 700; color: #b45309; white-space: nowrap; }
.gd-stars-total i { color: #f59e0b; }

.gd-save { margin: .1rem 0 0; font-size: .82rem; color: var(--gd-muted); }
.gd-save a { color: var(--gd-green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.gd-save.is-error { color: #b45309; }

/* ── Layout ── */
.gd-main {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "brief side" "editor side" "help side";
}
.gd-brief { grid-area: brief; }
.gd-editor-card { grid-area: editor; }
.gd-help { grid-area: help; display: grid; gap: 1rem; }
.gd-side { grid-area: side; display: grid; gap: 1rem; position: sticky; top: 76px; }
@media (max-width: 960px) {
  .gd-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brief" "side" "editor" "help"; }
  .gd-side { position: static; }
}

.gd-card { background: var(--gd-card); border: 1px solid var(--gd-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px -12px rgba(15, 23, 42, .12); }

/* ── Brief ── */
.gd-brief { padding: 1.1rem 1.25rem; }
.gd-brief-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .25rem; font-size: .78rem; color: var(--gd-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.gd-concept { text-transform: none; letter-spacing: 0; background: var(--gd-green-soft); color: #166534; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; }
.gd-brief-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; margin: 0 0 .4rem; }
.gd-story { margin: 0 0 .6rem; color: #334155; }
.gd-goal { margin: 0; padding: .55rem .75rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; font-size: .93rem; }
.gd-goal i { color: #d97706; }

/* ── Buttons ── */
.gd-btn {
  display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 10px; padding: .5rem .9rem;
  background: var(--gd-green); color: #fff; font-weight: 500; font-size: .9rem; line-height: 1.2;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.gd-btn:hover:not(:disabled) { background: #166534; }
.gd-btn:active:not(:disabled) { transform: scale(.96); }
.gd-btn:disabled { opacity: .45; cursor: not-allowed; }
.gd-btn:focus-visible, .gd-lv:focus-visible, .gd-link:focus-visible { outline: 3px solid #86efac; outline-offset: 2px; }
.gd-btn--run { padding-inline: 1.1rem; font-weight: 700; box-shadow: 0 6px 16px -8px rgba(21, 128, 61, .8); }
.gd-btn--ghost { background: #f1f5f9; color: var(--gd-ink); }
.gd-btn--ghost:hover:not(:disabled) { background: #e2e8f0; }
.gd-btn--sm { font-size: .82rem; padding: .35rem .7rem; }
.gd-link { border: 0; background: none; padding: 0; color: var(--gd-green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }

/* ── Editor ── */
.gd-editor-card { overflow: hidden; }
.gd-toolbar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid var(--gd-line); }
.gd-speed { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--gd-muted); }
.gd-speed input { width: 90px; accent-color: var(--gd-green); }
.gd-speed span { min-width: 3.3rem; }

.gd-editor { display: flex; background: var(--gd-code-bg); height: 23rem; font-family: var(--gd-mono); font-size: 14.5px; line-height: var(--gd-code-line); }
.gd-gutter {
  flex: none; margin: 0; padding: .8rem .55rem .8rem .8rem; min-width: 2.9rem; text-align: right; color: #475569;
  background: #0b1422; overflow: hidden; font: inherit; user-select: none; white-space: pre;
}
.gd-code { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.gd-hl, .gd-code textarea {
  margin: 0; padding: .8rem .9rem 2rem; font: inherit; letter-spacing: 0; tab-size: 4; white-space: pre; border: 0;
}
.gd-hl { position: absolute; inset: 0 auto auto 0; min-width: 100%; color: var(--gd-code-ink); pointer-events: none; will-change: transform; }
.gd-hl code { font: inherit; color: inherit; }
.gd-l { display: block; min-height: calc(1em * var(--gd-code-line)); margin: 0 -.9rem; padding: 0 .9rem; border-left: 3px solid transparent; }
.gd-l.is-active { background: rgba(250, 204, 21, .14); border-left-color: #facc15; }
.gd-l.is-error { background: rgba(239, 68, 68, .2); border-left-color: #f87171; }
.gd-code textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; resize: none; outline: none; overflow: auto;
  background: transparent; color: transparent; caret-color: #facc15;
}
.gd-code textarea::selection { background: rgba(56, 189, 248, .35); color: transparent; }
.gd-code textarea[readonly] { cursor: default; }
.t-k { color: #c4b5fd; font-weight: 600; }
.t-f { color: #7dd3fc; }
.t-c { color: #fca5a5; }
.t-n { color: #fdba74; }
.t-s { color: #86efac; }
.t-m { color: #64748b; font-style: italic; }
.gd-editor-foot { margin: 0; padding: .5rem .9rem; font-size: .78rem; color: var(--gd-muted); border-top: 1px solid var(--gd-line); }
.gd.is-running .gd-editor { box-shadow: inset 0 0 0 2px rgba(250, 204, 21, .35); }

/* ── Stage ── */
.gd-stage-card { padding: .8rem; }
.gd-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-height: 120px; }
.gd-stage canvas { display: block; max-width: 100%; border-radius: 12px; }
.gd-bubble {
  position: relative; align-self: stretch; margin: 0; padding: .5rem .8rem; border-radius: 12px; background: #f1f5f9;
  font-size: .9rem; color: #1e293b; min-height: 2.4rem;
}
.gd-result {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
  background: rgba(15, 23, 42, .35); border-radius: 12px; backdrop-filter: blur(2px); animation: gd-fade .25s ease-out;
}
.gd-result[hidden] { display: none; }
.gd-result-box { background: #fff; border-radius: 16px; padding: 1.2rem 1.4rem; text-align: center; max-width: 22rem; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); animation: gd-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.gd-result-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin: .2rem 0 .3rem; }
.gd-result-box p { margin: 0 0 .9rem; color: #334155; font-size: .93rem; }
.gd-result-stars { font-size: 2rem; color: #f59e0b; margin: 0 !important; display: flex; justify-content: center; gap: .25rem; }
.gd-result-stars i { animation: gd-star .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i, 0) * .15s); }
.gd-result-stars .bi-emoji-frown { color: #94a3b8; }
.gd-result-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
@keyframes gd-fade { from { opacity: 0; } }
@keyframes gd-pop { from { transform: scale(.85); opacity: 0; } }
@keyframes gd-star { from { transform: scale(0) rotate(-40deg); } }

.gd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; font-size: .88rem; }
.gd-stat { color: var(--gd-muted); margin-right: auto; }
.gd-stat b { color: var(--gd-ink); font-variant-numeric: tabular-nums; }
.gd-progress { display: flex; flex-wrap: wrap; gap: .35rem; }
.gd-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; background: #f1f5f9; font-weight: 500; font-variant-numeric: tabular-nums; }
.gd-chip.is-done { background: var(--gd-green-soft); color: #166534; }
.gd-chip--time { background: #fffbeb; color: #92400e; }
.gd-ico { width: 1.05em; height: 1.05em; }

/* ── Console ── */
.gd-console-card { overflow: hidden; }
.gd-console-head { display: flex; justify-content: space-between; align-items: center; padding: .45rem .8rem; font-size: .8rem; color: var(--gd-muted); border-bottom: 1px solid var(--gd-line); }
.gd-console { height: 8.5rem; overflow: auto; padding: .5rem .8rem; font-family: var(--gd-mono); font-size: 13px; line-height: 1.5; background: #fbfcfe; }
.gd-console:empty::before { content: "print() output, warnings and errors show up here."; color: #94a3b8; font-family: var(--font-body); }
.gd-log { white-space: pre-wrap; word-break: break-word; }
.gd-log--warn { color: #b45309; }
.gd-log--err { color: #b91c1c; font-weight: 600; }
.gd-log--win { color: var(--gd-green); font-weight: 600; }

/* ── Help panels ── */
.gd-panel { padding: 0; }
.gd-panel summary { padding: .75rem 1rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; gap: .45rem; align-items: center; }
.gd-panel summary::-webkit-details-marker { display: none; }
.gd-panel summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; transition: transform .2s; color: var(--gd-muted); }
.gd-panel[open] summary::after { transform: rotate(180deg); }
.gd-docs { list-style: none; margin: 0; padding: 0 1rem .8rem; display: grid; gap: .4rem; }
.gd-docs li { display: grid; grid-template-columns: minmax(9.5rem, auto) 1fr; gap: .1rem .7rem; align-items: baseline; font-size: .88rem; color: #334155; padding: .3rem .4rem; border-radius: 8px; }
.gd-docs li.is-new { background: #f0fdf4; }
.gd-docs code { font-family: var(--gd-mono); font-size: .84rem; color: #6d28d9; background: none; padding: 0; }
.gd-new { grid-column: 1; grid-row: 2; justify-self: start; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--gd-green); border-radius: 999px; padding: .05rem .45rem; }
.gd-docs li.is-new span:last-child { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 520px) { .gd-docs li { grid-template-columns: 1fr; } .gd-new { grid-row: auto; } .gd-docs li.is-new span:last-child { grid-column: 1; grid-row: auto; } }
.gd-hints { padding: 0 1rem 1rem; font-size: .92rem; }
.gd-hints ol { margin: 0 0 .6rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.gd-solution pre { margin: .6rem 0 .4rem; padding: .7rem .9rem; border-radius: 10px; background: var(--gd-code-bg); color: var(--gd-code-ink); font-family: var(--gd-mono); font-size: 13px; overflow: auto; }

/* ── Narty banner art (shared partial; same rules as practice.css) ── */
.narty { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.narty * { transform-box: fill-box; }
.narty-shadow { fill: rgba(0, 0, 0, .25); }
.narty-body { transform-box: view-box; transform-origin: 60px 112px; animation: gd-bob 3s ease-in-out infinite; }
.narty-eyes { transform-origin: center; animation: gd-blink 4.2s infinite; }
.narty-heart { transform-origin: center; }
.narty-flag { transform-box: view-box; transform-origin: 82px 77px; animation: gd-wave 4s ease-in-out infinite; }
@keyframes gd-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes gd-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes gd-wave { 0%, 55%, 100% { transform: rotate(0); } 62%, 76% { transform: rotate(-18deg); } 69%, 83% { transform: rotate(8deg); } }

@media (max-width: 600px) {
  .gd-banner-narty { width: 64px; height: 64px; }
  .gd-lede { font-size: .95rem; }
  .gd-levels { flex-direction: column; align-items: stretch; gap: .2rem; }
  .gd-stars-total { order: -1; }
  .gd-editor { height: 19rem; font-size: 14px; }
  .gd-speed { margin-left: 0; width: 100%; }
  .gd-brief { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gd *, .gd *::before { animation: none !important; transition: none !important; }
}

/* Topic-page card (home/templates/home/subsection.html) */
.gd-promo {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1.1rem 1.3rem;
  border-radius: 18px; background: linear-gradient(120deg, #f0fdf4, #ecfeff); border: 1px solid #bbf7d0; color: var(--ink, #0f172a);
  transition: transform .2s, box-shadow .2s;
}
.gd-promo:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(21, 128, 61, .55); color: inherit; }
.gd-promo-art { width: 72px; height: 72px; }
.gd-promo h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0 0 .2rem; }
.gd-promo p { margin: 0; color: #334155; font-size: .93rem; }
.gd-promo-kicker { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; color: #15803d !important; }
.gd-promo .ap-btn { white-space: nowrap; }
@media (max-width: 640px) { .gd-promo { grid-template-columns: auto 1fr; } .gd-promo .ap-btn { grid-column: 1 / -1; justify-self: start; } }