/* New sections share the site's spacing, typography and accent colors. */
.site-tools{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;max-width:620px}
.site-tools :is(a,button),.journal-filters button,.code-tabs button,.code-toolbar button,.share-actions :is(a,button){border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:10px 14px;color:var(--text);font:inherit;font-size:.8rem;min-height:44px}
.site-tools :is(a,button):hover,.journal-filters button:hover,.share-actions :is(a,button):hover{border-color:var(--purple)}
.site-tools button[aria-pressed=true],.journal-filters button[aria-pressed=true]{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}
.code-workbench{border:1px solid var(--border);border-radius:24px;overflow:hidden;background:#101521;color:#f1f3fb}
.code-tabs{display:flex;gap:8px;padding:16px;border-bottom:1px solid #ffffff18;flex-wrap:wrap}
.code-tabs button{background:#182033;color:#becae0;border-color:#364259}
.code-tabs button[aria-selected=true]{background:#c4d8ff;color:#111a2b;border-color:#c4d8ff}
.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;font:13px ui-monospace,monospace;color:#b6c6df}
.code-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#copy-code{display:inline-flex;align-items:center;gap:6px}
#copy-code svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#copy-code.is-copied{background:#123226;color:#d9ffe8;border-color:#2f8f62}
#code-output{margin:0 22px 8px;padding:12px 14px;border-radius:12px;background:#07140e;color:#b7f7cb;font:13px/1.6 ui-monospace,monospace;white-space:pre-wrap}
.code-toolbar button{background:#1c293e;color:#f1f3fb;border-color:#526079}
.code-workbench pre{margin:0;padding:20px 24px;overflow:auto;font-size:15px;line-height:1.8;tab-size:4}
.code-workbench code{color:#c4e5fc;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.code-workbench p{padding:0 24px;color:#b5c1d6;font-size:.85rem}
.code-workbench textarea{display:block;width:calc(100% - 48px);margin:16px 24px;background:#0b111c;color:#f1f3fb;min-height:200px;border:1px solid #526079;border-radius:12px;padding:12px;font:14px ui-monospace,monospace}
.journal-filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.journal-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.journal-entry,.score-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px;min-width:0}
.journal-entry h3{line-height:1.45;margin:18px 0 12px}.journal-entry>p:last-child{margin-bottom:0}
.journal-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.journal-meta span{color:var(--purple)}
.score-filters{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:24px;width:100%;min-width:0}.score-filters label{display:grid;gap:6px;font-size:.8rem;min-width:0;flex:1 1 140px;max-width:100%}
.score-filters select,.snake-settings select{width:100%;max-width:100%;min-width:0;min-height:44px;padding:8px 28px 8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit}
.leaderboard{border-collapse:collapse;width:100%;text-align:left;font-variant-numeric:tabular-nums}.leaderboard caption{text-align:left;padding-bottom:16px;color:var(--muted);font-size:.85rem}.leaderboard :is(th,td){padding:14px 8px;border-bottom:1px solid var(--border)}.leaderboard th{color:var(--muted);font-size:.8rem}.leaderboard td:nth-child(3){white-space:nowrap;font-variant-numeric:tabular-nums}
#leaderboard-empty{padding:24px 0;margin:0}.score-note{font-size:.8rem;margin:20px 0 0}
.snake-settings{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 16px;color:#c8d3e4;padding:0 12px}.snake-settings select{background:#111b2b;color:#f1f3fb;border-color:#435370}.snake-settings small{color:#a9b9d0;font-size:.72rem}.snake-settings select:disabled{opacity:.65}.snake-dock{overflow-y:auto;max-height:calc(100dvh - 24px)}
.share-dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid var(--border);border-radius:24px;background:var(--surface);color:var(--text);padding:26px}.share-dialog::backdrop{background:#080b14b8;backdrop-filter:blur(8px)}.share-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.share-heading h2{font-size:1.5rem;letter-spacing:-.5px}.share-heading button{min-width:44px;min-height:44px;border:1px solid var(--border);background:transparent;color:inherit;border-radius:12px;font-size:1.5rem}.share-dialog>img{display:block;width:min(250px,100%);height:auto;margin:20px auto;padding:8px;background:white;border-radius:16px}.share-dialog>label{display:block;font-size:.8rem;margin-bottom:8px}.share-dialog>input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit}.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}#share-status{font-size:.85rem;margin:16px 0 0}
@media(max-width:900px){.journal-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.journal-list{grid-template-columns:1fr}.journal-entry,.score-card{padding:20px}.code-workbench pre{font-size:13px;padding:16px}.code-toolbar{padding:12px 16px}.code-workbench p{padding-inline:16px}.site-tools{gap:6px}.site-tools :is(a,button){font-size:.75rem;padding:8px 10px}.score-filters{gap:10px}.score-filters label{flex:1 1 0;min-width:0}.share-dialog{padding:20px}.snake-settings{gap:8px}.snake-settings small{flex-basis:100%}.leaderboard :is(th,td){padding:12px 4px;font-size:.85rem}}