/* The glow studio is shared across all 16 language pages. */
.neon-page { --studio-bg:#0e1525; --line:#283044; --muted:#929daf; --mint:#87f3dc; background:var(--bg); color:#edf1f8; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.6; }
.neon-page::before { display:none; }
.neon-page button,.neon-page input { font:inherit; }
.neon-page button { cursor:pointer; color:inherit; }
.neon-page button:disabled { cursor:default; opacity:.38; }
.neon-page [hidden] { display:none!important; }
.neon-page button,.neon-page a,.neon-page input { -webkit-tap-highlight-color:transparent; }
.neon-page :focus-visible { outline:2px solid var(--mint);outline-offset:4px; }
.neon-page svg { width:20px;height:20px;flex-shrink:0; }
.site-header { max-width:1300px;margin:0 auto;height:89px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative; }
.back-link,.category-link { font-size:12px;color:#a7b0c2; }
.back-link:hover,.category-link:hover { color:var(--mint); }
.site-header .nav-title { position:static;transform:none;color:#f0f3fb;font-size:11px;font-family:var(--pixel);letter-spacing:-.3px;display:flex;align-items:center;text-shadow:none; }
.nav-title span { color:var(--mint); }
.nav-title i { display:inline-block;width:5px;height:5px;background:var(--mint);margin-left:6px; }
.neon-page .theme-bar { position:absolute;top:72px;gap:7px;z-index:2;padding:5px 9px; }
.neon-page .theme-dot { width:10px;height:10px; }
.neon-main { max-width:1168px;margin:0 auto;padding:44px 32px 28px; }
.page-heading { display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:27px; }
.eyebrow { display:flex;align-items:center;gap:9px;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--mint);margin-bottom:11px; }
.eyebrow>span { width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #87f3dc70; }
.heading-copy h1 { max-width:780px;font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1.3px;font-weight:600;text-wrap:balance; }
.heading-aside { text-align:right;flex-shrink:0;font-size:12px;line-height:1.85; }
.heading-aside span { display:block;color:#acb5c5; }
.heading-aside span+span { color:#6f7c94; }
.studio { border:1px solid #30394c;border-radius:18px;background:var(--studio-bg);overflow:hidden;box-shadow:0 28px 80px #00000029; }
.studio-top { min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line);gap:12px; }
.mode-switch { display:flex;padding:4px;gap:3px;background:#080f1d;border:1px solid var(--line);border-radius:10px; }
.mode-switch button { display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#929daf;padding:9px 18px;border-radius:6px;font-size:12px;font-weight:600; }
.mode-switch button svg { width:16px;height:16px; }
.mode-switch button[aria-pressed=true] { color:var(--mint);background:#1b3438;box-shadow:inset 0 0 0 1px #335750; }
.gallery-button { border:0;background:transparent;display:flex;align-items:center;gap:8px;font-size:12px!important;color:#c2cbd9!important;padding:8px 0 8px 12px; }
#gallery-count { background:#283047;color:#c1c8d8;border-radius:5px;min-width:23px;padding:0 6px;text-align:center; }
.studio-body { display:grid;grid-template-columns:minmax(0,1fr) 251px; }
.board-column { min-width:0;padding:0 22px; }
.board-status { min-height:53px;display:flex;align-items:center;font-size:11px;color:#95a2b8; }
.live-dot { width:5px;height:5px;background:var(--mint);display:inline-block;border-radius:50%;margin-right:7px; }
.drawing-board { position:relative;isolation:isolate;border:1px solid #2d384d;border-radius:9px;overflow:hidden;background:#090f1e; }
#drawing-canvas { display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none;user-select:none;cursor:crosshair;image-rendering:auto; }
#drawing-canvas:focus-visible { outline-offset:-4px; }
.empty-state { pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:24px; }
.empty-state .empty-art { width:230px;height:150px;filter:drop-shadow(0 0 12px #9d7ce650);margin-bottom:26px;opacity:.9; }
.empty-state p { font-size:23px;color:#dbe1ed;letter-spacing:-.5px;font-weight:500; }
.empty-state>span { font-size:12px;color:#7f8da5;margin-top:6px; }
.canvas-footer { display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:43px;color:#7e8ba3;font-size:10px; }
.canvas-footer>span { flex-shrink:0;font-family:ui-monospace,monospace;font-size:9px;color:#53617a; }
.tool-panel { padding:23px 21px 14px;background:#121a2c;border-left:1px solid var(--line); }
.tool-section+.tool-section { margin-top:23px; }
.section-label { display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;font-weight:600;letter-spacing:1.6px;line-height:1.5;color:#adb7ca;margin-bottom:11px; }
.section-label>span { font-size:9px;font-weight:400;letter-spacing:0;color:#5e6d86; }
.brushes { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.brushes button { min-height:48px;display:flex;gap:8px;align-items:center;justify-content:center;background:#111929;border:1px solid #2e374b;border-radius:7px;font-size:11px; }
.brushes button[data-tool=rainbow] svg { color:#c29bfd; }
.brushes button[data-tool=stardust] svg { color:#f9c785; }
.brushes button[aria-pressed=true] { color:var(--mint);background:#1b3338;border-color:#527d72; }
.brushes button:not(:disabled):hover { border-color:#779185; }
.colors { display:grid;grid-template-columns:repeat(8,1fr);gap:6px; }
.swatch { border:3px solid #121a2c;width:100%;aspect-ratio:1;min-width:0;border-radius:50%;background:var(--swatch);outline:1px solid transparent;position:relative; }
.swatch[aria-pressed=true] { outline-color:var(--swatch); }
.swatch[aria-pressed=true]::after { content:'';position:absolute;width:4px;height:4px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#162338; }
.tool-note { font-size:10px;color:#8c9bb1;margin-top:10px;line-height:1.5; }
.size-heading { display:flex;justify-content:space-between;align-items:center; }
.size-heading .section-label { margin:0; }
#brush-value { color:#c4cedd;background:#232d43;border:1px solid #354058;border-radius:4px;padding:0 7px;font-size:11px; }
#brush-size { width:100%;display:block;margin:12px 0 5px;accent-color:var(--mint);height:18px;cursor:pointer; }
.range-labels { display:flex;justify-content:space-between;color:#8492a7;font-size:9px; }
.symmetry { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.symmetry button { border:1px solid #303a4e;background:#111929;border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0;font-size:10px;color:#a6b2c7; }
.symmetry button svg,.single-stroke { width:20px;height:20px;line-height:20px; }
.symmetry button[aria-pressed=true] { border-color:#6a6c99;background:#29283f;color:#d2c4fd; }
.actions-section { padding-top:18px;border-top:1px solid var(--line); }
.edit-actions { display:flex;gap:8px;margin-bottom:14px; }
.icon-button { width:36px;height:36px;display:inline-flex;justify-content:center;align-items:center;border:1px solid #333f54;border-radius:7px;background:transparent;color:#aeb9ca; }
.icon-button svg { width:16px;height:16px; }
.clear-button { display:flex;align-items:center;gap:6px;margin-left:auto;font-size:11px!important;color:#bdacb7!important;border:0;background:transparent;padding:0 4px; }
.clear-button svg { width:15px;height:15px; }
.primary-button,.secondary-button { display:flex;align-items:center;justify-content:center;gap:9px;border-radius:7px;padding:11px 12px;font-size:11px!important;line-height:1.4;font-weight:600!important;min-height:40px; }
.primary-button { border:1px solid #a8ffe9;background:var(--mint);color:#102c2a!important; }
.primary-button:not(:disabled):hover { background:#baffed; }
.secondary-button { border:1px solid #3b465a;background:#182235;color:#c6d0df!important; }
.secondary-button:not(:disabled):hover { background:#233047; }
.primary-button svg,.secondary-button svg { width:16px;height:16px; }
.actions-section>.primary-button,.actions-section>.secondary-button { width:100%;margin-top:9px; }
.local-note { text-align:center;font-size:9px;line-height:1.8;color:#7e8ba2;margin-top:12px; }
.studio-bottom { display:flex;justify-content:space-between;align-items:center;padding:13px 23px;border-top:1px solid var(--line);color:#7d8ba3;gap:12px; }
.studio-bottom>span:first-child { display:flex;align-items:center;gap:8px;font-size:10px; }
.studio-bottom svg { width:14px;height:14px;color:#a691ca; }
.studio-bottom>span+span { font-size:8px;letter-spacing:1.5px;color:#7c899f; }
.challenge-strip { padding:18px 22px 16px;border-bottom:1px solid var(--line); }
.challenge-strip>.section-label { color:#929fb5; }
.designs { display:grid;grid-template-columns:repeat(8,1fr);gap:8px; }
.design-button { border:1px solid #303a50;border-radius:8px;background:#111b2e;padding:10px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px!important; }
.design-button svg { width:35px;height:35px;stroke:var(--design-color);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;fill:none; }
.design-button small { height:13px;color:#74849d;font-size:8px;letter-spacing:2px; }
.design-button[aria-pressed=true] { border-color:var(--design-color);background:#222c40; }
.design-button[aria-pressed=true] small { color:var(--design-color); }
.challenge-status { padding:12px 0;width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 14px; }
.challenge-status>div:first-child { display:flex;align-items:center;gap:12px; }
#design-number { color:#6d7e98;font-size:9px; }
#design-name { color:#c1cddd;font-size:12px;font-weight:500; }
.coverage-wrap { display:flex;align-items:baseline;gap:6px; }
#coverage { color:var(--mint);font-size:16px;line-height:1.3; }
.coverage-wrap span { font-size:10px; }
.progress-track { height:3px;background:#283347;border-radius:3px;align-self:center;overflow:hidden; }
#progress-fill { display:block;height:100%;width:0;background:var(--mint);transition:width .18s; }
#precision { font-size:9px;text-align:right;color:#a3b0c4; }
.completion { position:absolute;bottom:16px;left:16px;right:16px;text-align:center;padding:22px 20px 20px;border:1px solid #658580;border-radius:11px;background:#101f2aee;box-shadow:0 10px 35px #0008;backdrop-filter:blur(14px); }
.completion .section-label { justify-content:center;margin-bottom:5px;color:var(--mint); }
.result-stars { color:#ffd080;font-size:24px;letter-spacing:6px;line-height:1.6; }
.completion h2 { font-size:22px;letter-spacing:-.5px;font-weight:500; }
.completion p { font-size:11px;color:#a9b8cc;margin:7px 0 16px; }
.result-actions { display:flex;justify-content:center;gap:10px; }
.result-close { position:absolute;right:10px;top:10px;border:0; }
.toast { position:fixed;bottom:30px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 36px);width:max-content;padding:13px 20px;background:#d3f4e8;color:#173c34;border:1px solid #fff6;border-radius:9px;box-shadow:0 10px 30px #0006;z-index:20000;font-size:12px; }
.game-info { margin:68px auto 0;max-width:970px;color:#9facbf;font-size:14px;line-height:1.85; }
.game-info h2 { color:#e0e6f0;font-size:19px;letter-spacing:-.3px;font-weight:500;line-height:1.4;margin-bottom:16px; }
.intro-block { max-width:760px;margin-bottom:37px; }
.intro-block h2 { font-size:24px; }
.game-info .eyebrow { font-size:9px;letter-spacing:1.6px; }
.info-columns { display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.info-columns ol,.info-columns ul { padding-inline-start:20px; }
.info-columns li+li { margin-top:12px; }
.info-columns li::marker { color:#a8dccf; }
.faq { margin-top:38px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { padding:17px 0;cursor:pointer;color:#c4cddb;font-size:14px; }
.faq details p { padding:0 0 18px;font-size:13px; }
.related { margin-top:35px; }
.related>div { display:flex;flex-wrap:wrap;gap:12px; }
.related a { border:1px solid var(--line);background:#121a2c;border-radius:7px;color:#b5c5d8;padding:11px 17px;font-size:12px;display:flex;gap:30px;justify-content:space-between; }
.related a span { color:var(--mint); }
.page-footer { margin-top:58px;padding-top:23px;border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:30px; }
.page-footer>a { font-size:9px;letter-spacing:2px;white-space:nowrap;color:#a9b8cc; }
.page-footer nav { max-width:720px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:10px; }
.page-footer nav a { color:#8696ae; }
.page-footer nav a[aria-current=page] { color:var(--mint); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#gallery-dialog { margin:auto;width:min(780px,calc(100% - 30px));max-height:88dvh;overflow:auto;background:#121c2e;color:#edf1f8;border:1px solid #53617a;border-radius:17px;padding:28px;box-shadow:0 40px 100px #000a; }
#gallery-dialog::backdrop { background:#050916cc;backdrop-filter:blur(5px); }
.dialog-heading { display:flex;justify-content:space-between;align-items:center;gap:20px; }
.dialog-heading h2 { font-size:25px;font-weight:500;letter-spacing:-.7px; }
.dialog-heading .section-label { color:var(--mint);margin-bottom:7px; }
.gallery-note { font-size:12px;color:#a0adc2;margin-top:12px; }
.gallery-empty { text-align:center;color:#a6b2c7;padding:55px 10px;line-height:2;font-size:14px; }
.gallery-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px; }
.gallery-art { display:block;width:100%;padding:0;border:1px solid #354159;background:#080e1d;border-radius:8px;overflow:hidden; }
.gallery-art img { width:100%;height:auto;display:block; }
.gallery-card p { font-size:11px;color:#b6c2d5;margin-top:7px; }
.text-button { color:var(--mint)!important;border:0;background:transparent;font-size:11px!important;padding:7px 0; }
#gallery-preview { margin-top:18px; }
#preview-image { display:block;width:100%;max-width:520px;margin:10px auto 20px;border-radius:8px; }
#gallery-preview>.primary-button { margin:0 auto; }
.noscript-message { padding:20px;color:#ffd080; }
.neon-page .feedback-fab { font-size:9px; }
@media(min-width:1050px) { .board-column { padding-left:26px;padding-right:26px; } }
@media(max-width:980px) { .neon-main { padding:35px 23px 25px; }.heading-aside { display:none; }.studio-body { grid-template-columns:minmax(0,1fr) 226px; }.tool-panel { padding:20px 16px; }.tool-section+.tool-section { margin-top:19px; }.board-column { padding:0 16px; }.colors { gap:4px; }.empty-state .empty-art { width:180px;height:120px;margin-bottom:15px; }.empty-state p { font-size:21px; }.tool-note,.local-note { font-size:9px; } }
@media(max-width:720px) {
  .site-header { height:73px;padding:0 20px; }.site-header .nav-title { font-size:9px; }.category-link { display:none; }.back-link { font-size:11px; }.neon-page .theme-bar { top:59px; }.neon-main { padding:33px 14px 22px; }.page-heading { margin-bottom:19px; }.eyebrow { font-size:8px;letter-spacing:1.5px;margin-bottom:9px; }.heading-copy h1 { font-size:27px;letter-spacing:-.8px; }.studio { border-radius:12px; }.studio-top { min-height:64px;padding:10px 12px;gap:5px; }.mode-switch button { padding:8px 10px;font-size:11px;gap:5px; }.mode-switch button svg { width:14px;height:14px; }.gallery-button { font-size:10px!important;padding-left:5px;gap:5px; }.gallery-button>svg { width:16px;height:16px; }.gallery-button>span:last-child { min-width:18px;padding:0 3px; }.studio-body { display:flex;flex-direction:column; }.tool-panel { order:-1;border-left:0;border-bottom:1px solid var(--line);padding:14px 12px;display:grid;grid-template-columns:1fr 1fr;gap:12px 17px; }.tool-section+.tool-section { margin-top:0; }.section-label { font-size:8px;letter-spacing:1px;margin-bottom:8px; }.section-label>span { display:none; }.brushes-section { grid-column:1/-1; }.brushes { grid-template-columns:repeat(4,1fr);gap:6px; }.brushes button { min-height:36px;gap:5px;font-size:10px; }.brushes svg { width:16px;height:16px; }.colors-section { align-self:center; }.colors { gap:5px; }.swatch { border-width:2px; }.tool-note { display:none; }.size-section { display:flex;flex-direction:column;justify-content:center; }.size-heading .section-label { font-size:8px; }.range-labels { display:none; }#brush-size { height:17px;margin:7px 0 0; }#brush-value { font-size:10px; }.symmetry-section { display:flex;align-items:center;gap:9px;grid-column:1/-1; }.symmetry-section .section-label { width:72px;margin:0;line-height:1.6;flex-shrink:0; }.symmetry { flex:1;gap:6px; }.symmetry button { padding:6px 3px;flex-direction:row;justify-content:center;gap:5px;font-size:9px; }.symmetry svg,.single-stroke { width:14px;height:14px;line-height:14px; }.actions-section { grid-column:1/-1;display:flex;align-items:center;gap:7px;padding-top:11px; }.edit-actions { gap:4px;margin:0;flex-shrink:0; }.icon-button { width:31px;height:33px; }.clear-button { font-size:0!important;padding:0 3px; }.clear-button svg { width:15px; }.actions-section>.primary-button,.actions-section>.secondary-button { min-height:33px;font-size:9px!important;padding:7px 6px;margin:0;gap:5px;flex:1;width:auto; }.actions-section>.primary-button svg,.actions-section>.secondary-button svg { width:12px;height:12px; }.local-note { display:none; }.board-column { padding:0 12px; }.board-status { min-height:41px;font-size:10px; }.canvas-footer { min-height:38px;font-size:9px; }.canvas-footer>span { display:none; }.empty-state { padding-bottom:12px; }.empty-state .empty-art { width:170px;height:110px;margin-bottom:14px; }.empty-state p { font-size:20px; }.empty-state>span { font-size:11px; }.studio-bottom { padding:11px 13px; }.studio-bottom>span:first-child { font-size:9px; }.studio-bottom>span+span { font-size:7px;letter-spacing:.5px; }.studio-bottom svg { width:12px;height:12px; }.challenge-strip { padding:13px 12px; }.designs { grid-template-columns:repeat(4,1fr);gap:6px; }.design-button { padding:7px 4px;display:grid;grid-template-columns:25px 1fr;gap:0 5px;text-align:left; }.design-button svg { width:25px;height:25px;grid-row:span 2; }.design-button span { font-size:9px; }.design-button small { font-size:7px;letter-spacing:1px; }.challenge-status { padding:11px 0;gap:5px 8px; }#design-name { font-size:10px; }#design-number { display:none; }#precision { font-size:8px; }#coverage { font-size:14px; }.completion { left:8px;right:8px;bottom:8px;padding:16px 10px; }.completion h2 { font-size:18px; }.completion p { font-size:10px;margin:5px 0 12px; }.result-stars { font-size:20px; }.result-actions { gap:7px; }.result-actions button { font-size:10px!important;min-height:36px;padding:9px; }.game-info { margin-top:42px;font-size:13px; }.game-info h2 { font-size:18px; }.intro-block { margin-bottom:24px; }.intro-block h2 { font-size:21px; }.info-columns { grid-template-columns:1fr;gap:29px;padding:25px 0; }.faq { margin-top:28px; }.faq summary { font-size:13px; }.related>div { gap:8px; }.related a { padding:9px 12px;font-size:11px;gap:12px; }.page-footer { margin-top:40px;flex-direction:column;gap:17px; }.page-footer nav { gap:9px 16px; }.gallery-grid { grid-template-columns:repeat(2,1fr);gap:12px; }#gallery-dialog { padding:20px; }.dialog-heading h2 { font-size:21px; }.toast { bottom:20px;font-size:11px; }.neon-page .update-chip { bottom:12px;left:12px;font-size:8px; }
}
@media(max-width:370px) { .gallery-button>span:not(#gallery-count) { display:none; }.tool-panel { gap:12px; }.colors { gap:3px; }.actions-section>.secondary-button { font-size:8px!important; }.actions-section>.primary-button { font-size:8px!important; }.studio-bottom>span+span { display:none; }.heading-copy h1 { font-size:25px; }.result-actions button { font-size:9px!important; } }
@media(prefers-reduced-motion:reduce) { .neon-page * { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }
@media(max-width:720px) { .neon-page .update-chip { top:auto;right:auto;bottom:12px;left:12px; } }