:root{--ink:#263a39;--muted:#647572;--paper:#f6f4ed;--line:#d9ded4;--accent:#e8f28e;background:var(--paper);color:var(--ink);color-scheme:light}
.flag-experience{min-height:100svh;background:var(--paper)}.flag-shell{max-width:1560px;margin:auto;padding:28px 52px 24px;background:var(--paper)}.flag-nav{display:flex;align-items:center;justify-content:space-between;gap:20px}.flag-edition,.flag-label,.flag-edition+button,.flag-canvas-footer,.flag-result figcaption{font:12px 'Space Mono',monospace;letter-spacing:1px}.flag-edition{color:var(--muted)}.flag-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:52px 0 34px;border-bottom:1px solid var(--line)}.flag-heading .small-label{font-size:12px;letter-spacing:1.8px}.flag-heading h1{font-size:clamp(48px,5.6vw,82px);font-weight:500;letter-spacing:-4px;line-height:1;margin:18px 0 0}.flag-heading h1 em{font-family:Georgia,serif;font-weight:400}.flag-heading p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 4px}.flag-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:50px;padding-top:32px}.flag-sidebar{display:flex;flex-direction:column;gap:28px;border-right:1px solid var(--line);padding-right:28px}.flag-label{display:block;font-size:11px;line-height:1.6;font-weight:400;margin:0 0 15px}.flag-modes{display:grid;gap:5px}.flag-modes button{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid transparent;text-align:left;border-radius:5px;font-size:15px}.flag-modes button span+span{font-size:11px;letter-spacing:3px}.flag-modes button[aria-pressed=true]{background:var(--ink);color:#fff}.flag-modes button:hover{border-color:var(--ink)}.mode-description{font-size:14px;line-height:1.6;margin:12px 0 6px}.palette-note{font-size:12px;line-height:1.6;color:var(--muted);margin:0}#drawing-tools{border:0;margin:0;padding:0;min-width:0}#drawing-tools legend{padding:0}.flag-palette{display:flex;flex-wrap:wrap;gap:10px;margin:3px 0 16px}.flag-swatch{width:40px;height:40px;background:var(--swatch);border:1px solid #263a3940;border-radius:50%;position:relative}.flag-swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:4px}.flag-swatch[aria-pressed=true]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:var(--swatch-text);font-size:20px;text-shadow:0 0 2px #8882}.flag-tools{display:grid;grid-template-columns:1fr 1fr .8fr;gap:6px;margin:20px 0}.flag-tools button{padding:10px 4px;font-size:13px;background:#eaece4;border:1px solid transparent;border-radius:4px}.flag-tools .flag-fill{grid-column:3;grid-row:1 / span 2;align-self:stretch;border-color:var(--ink)}.flag-tools button:hover{border-color:var(--ink)}.flag-tools button[aria-pressed=true]{border-color:var(--ink);background:#dde7d7}.flag-brush{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:13px}.flag-brush input{grid-column:1/-1;width:100%;accent-color:var(--ink);margin:0}.flag-brush output{font-family:'Space Mono',monospace;font-size:12px}.flag-history{display:flex;justify-content:space-between;gap:8px;margin-top:8px}.flag-history button{padding:9px 0;font-size:13px}.flag-history button:hover{text-decoration:underline}button:disabled{opacity:.4;cursor:default}.flag-session{margin-top:auto;padding:20px 0;border-top:1px solid var(--line)}.flag-session .flag-label{margin-bottom:8px}.flag-session p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}.flag-studio{min-width:0}.flag-prompt{display:flex;align-items:center;justify-content:space-between;gap:16px}.flag-prompt .flag-label{margin-bottom:6px}.flag-prompt h2{font-size:clamp(26px,3.5vw,42px);letter-spacing:-1.5px;line-height:1.2;font-weight:500;margin:0}.flag-hint{font-size:13px;line-height:1.7;color:var(--muted);margin:14px 0 22px}.flag-artboard{position:relative;width:100%;max-width:min(760px,calc(420px * var(--flag-ratio,1.5)));margin:0 auto;box-shadow:0 5px 18px #263a3909;background-color:#fff;background-image:linear-gradient(45deg,#eef0eb 25%,transparent 25%),linear-gradient(-45deg,#eef0eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0eb 75%),linear-gradient(-45deg,transparent 75%,#eef0eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;outline:1px solid #263a3928}.flag-artboard canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.flag-artboard canvas:focus-visible{outline:3px solid var(--ink);outline-offset:5px}#flag-cursor{position:absolute;width:14px;height:14px;border:2px solid #111;border-radius:50%;box-shadow:0 0 0 2px #fff;transform:translate(-50%,-50%);pointer-events:none}.flag-canvas-footer{display:flex;justify-content:space-between;gap:12px;margin:14px 0 22px;color:var(--muted);font-size:10px;letter-spacing:.7px}.flag-submit-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px}.flag-submit-row p{font-size:13px;color:var(--muted);line-height:1.7;margin:0;max-width:400px}.flag-primary{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 20px;border-radius:5px;font-size:14px;white-space:nowrap}.flag-primary:hover{background:#3c5450}.flag-result{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding:25px;background:#e9eddf;border:1px solid #d7deca;border-radius:8px}.flag-score .flag-label{margin:0}.flag-score h3{font:66px 'DM Sans',sans-serif;letter-spacing:-4px;line-height:1;margin:10px 0}.flag-score h3>span+span{font-size:30px;letter-spacing:-1px}.flag-score p{font-size:14px;line-height:1.6;margin:10px 0 0}.flag-score .scoring-note{font-size:12px;color:var(--muted)}.flag-result figure{margin:0;align-self:center}.flag-result figcaption{font-size:10px;margin-bottom:12px;line-height:1.7}.flag-result img{display:block;width:100%;height:auto;max-height:260px;object-fit:contain;object-position:left;filter:drop-shadow(0 3px 6px #263a3910)}.flag-result-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #263a3920;padding-top:18px}.flag-result-actions>button:first-child{font-size:13px;text-decoration:underline;text-underline-offset:4px}.flag-studio-bottom{display:flex;justify-content:flex-end;gap:20px;align-items:center;margin-top:28px}.flag-studio-bottom .fullscreen-button{font-size:12px}
@media(max-width:900px){.flag-shell{padding:24px}.flag-heading{padding-top:38px}.flag-heading h1{letter-spacing:-2px}.flag-heading p{font-size:13px}.flag-workspace{grid-template-columns:210px minmax(0,1fr);gap:24px}.flag-sidebar{padding-right:20px}.flag-heading .small-label{font-size:10px}.flag-primary{padding:14px;font-size:12px;gap:14px}.flag-submit-row{flex-wrap:wrap}.flag-result{grid-template-columns:1fr;padding:20px}.flag-result-actions{flex-wrap:wrap}.flag-edition{font-size:10px}}
@media(max-width:620px){.flag-studio #drawing-tools{margin-bottom:24px}.flag-shell{padding:20px 18px}.flag-edition{display:none}.flag-heading{display:block;padding:32px 0 25px}.flag-heading h1{font-size:56px}.flag-heading p{margin-top:18px}.flag-workspace{display:flex;flex-direction:column;gap:28px;padding-top:24px}.flag-sidebar{border:0;padding:0;gap:24px}.flag-modes{grid-template-columns:repeat(4,1fr);gap:5px}.flag-modes button{padding:12px 5px;justify-content:center;font-size:13px}.flag-modes button span+span{display:none}.mode-description{margin-top:8px}.flag-palette{margin-top:5px;gap:15px}.flag-swatch{width:36px;height:36px}.flag-tools{margin:16px 0;gap:7px}.flag-tools button{font-size:12px}.flag-brush{grid-template-columns:auto 28px 1fr;align-items:center}.flag-brush input{grid-column:auto}.flag-history{justify-content:flex-start;gap:28px}.flag-session{padding:12px 0 0}.flag-session .flag-label{display:none}.flag-prompt h2{font-size:30px}.flag-result{grid-template-columns:1fr 1fr;gap:18px}.flag-score h3{font-size:54px}.flag-result-actions{grid-column:1/-1}.flag-hint{font-size:12px;margin-bottom:16px}.flag-canvas-footer{font-size:9px}.flag-submit-row p{font-size:12px}.flag-submit-row .flag-primary{width:100%}.flag-studio-bottom{margin-top:22px}}
@media(max-width:390px){.flag-result{grid-template-columns:1fr}.flag-heading h1{font-size:49px}.flag-prompt h2{font-size:26px}}
.flag-experience button{border:1px solid var(--ink)}
.flag-experience .game-utilities button{border-color:transparent}
.flag-history button{padding:9px 12px;border-radius:4px}
.flag-result-actions>button:first-child{padding:10px 14px;border-radius:4px}
.flag-studio-bottom .fullscreen-button{padding:8px 10px;border-radius:4px}
@media (min-width:901px){
  .flag-experience{--text-scale:1.38;--small-text-scale:1.518;font-size:1.2rem}
  .flag-edition{font-size:14.4px}
  .flag-nav .exit-experiment{font-size:24px}
  .flag-nav .help-button{font-size:14.4px}
  body[data-game="draw-the-flag"]>.skip-link{font-size:1.2rem}
  .flag-heading .small-label{font-size:14.4px}
  .flag-label{font-size:13.2px}
  .palette-note{font-size:14.4px}
  .flag-swatch[aria-pressed=true]::after{font-size:24px}
  .flag-brush{font-size:15.6px}
  .flag-brush output{font-size:14.4px}
  .flag-history button{font-size:15.6px}
  .flag-hint{font-size:15.6px}
  .flag-canvas-footer{font-size:12px}
  .flag-result figcaption{font-size:12px}
  .flag-result-actions>button:first-child{font-size:15.6px}
  .flag-studio-bottom .fullscreen-button{font-size:14.4px}
  .flag-experience .dialog-close{font-size:33.6px}
  .flag-shell{height:100svh;padding:16px 32px;display:grid;grid-template-rows:auto minmax(0,1fr)}
  .flag-heading{padding:14px 0 16px}
  .flag-heading h1{font-size:clamp(48px,6.6svh,72px);letter-spacing:-2px;margin-top:8px}
  .flag-heading p{font-size:16.8px;line-height:1.5}
  .flag-workspace{min-height:0;grid-template-columns:clamp(360px,28.8vw,420px) minmax(0,1fr);gap:28px;padding-top:16px}
  .flag-sidebar{min-height:0;justify-content:safe flex-end;gap:clamp(12px,2svh,22px);padding-right:24px}
  .flag-label{margin-bottom:8px}
  .flag-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .flag-modes button{padding:clamp(8px,1svh,12px) 12px;font-size:16.8px;line-height:21.6px}
  .flag-modes button span+span{font-size:10.8px;letter-spacing:0}
  .mode-description{font-size:14.4px;line-height:1.4;margin:6px 0 0}
  .flag-palette{gap:8px;margin:5px 0 12px}
  .flag-swatch{width:36px;height:36px}
  .flag-tools{gap:8px;margin:12px 0}
  .flag-tools button{padding:8px 6px;font-size:16.8px;line-height:21.6px}
  .flag-brush{grid-template-columns:auto 28px minmax(0,1fr);align-items:center;gap:8px;line-height:21.6px}
  .flag-brush input{grid-column:auto}
  .flag-history{margin-top:6px;justify-content:flex-start}
  .flag-history button{padding:6px 10px;line-height:21.6px}
  .flag-session{margin-top:0;padding:10px 0 0}
  .flag-session .flag-label{margin-bottom:4px}
  .flag-session p{font-size:14.4px;line-height:1.4}
  .flag-studio{min-height:0;display:grid;grid-template-areas:'prompt' 'hint' 'canvas' 'caption' 'result' 'utilities';grid-template-rows:auto auto minmax(0,1fr) auto auto auto}
  .flag-prompt{grid-area:prompt;justify-content:center;text-align:center}
  .flag-prompt .flag-label{margin-bottom:3px}
  .flag-prompt h2{font-size:38.4px;line-height:1.15}
  .flag-hint{grid-area:hint;margin:6px 0 10px;line-height:1.4;text-align:center}
  .flag-canvas-area{grid-area:canvas;min-height:0;min-width:0;display:grid;place-items:center;container-type:size}
  .flag-artboard{width:min(100cqw,calc(100cqh * var(--flag-ratio,1.5)));max-width:100%;margin:0}
  .flag-canvas-footer{grid-area:caption;margin:8px 0;line-height:16.8px}
  .flag-sidebar .flag-submit-row{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px}
  .flag-submit-row p{font-size:14.4px;line-height:1.4}
  .flag-primary{padding:11px 16px;font-size:15.6px;line-height:21.6px}
  .flag-result{grid-area:result;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:14px;margin-top:10px;padding:12px}
  .flag-score h3{font-size:45.6px;letter-spacing:-2px;margin:4px 0}
  .flag-score h3>span+span{font-size:26.4px}
  .flag-score p{font-size:14.4px;line-height:1.35;margin:4px 0 0}
  .flag-score .scoring-note{font-size:13.2px}
  .flag-result figcaption{margin-bottom:6px}
  .flag-result img{max-height:100px}
  .flag-result-actions{grid-column:auto;flex-direction:column;justify-content:center;gap:10px;border:0;padding:0}
  .flag-studio:has(.flag-result:not([hidden])) .flag-hint,
  .flag-studio:has(.flag-result:not([hidden])) .flag-canvas-footer{display:none}
  .flag-studio-bottom{grid-area:utilities;margin-top:8px}
}
@media (min-width:901px) and (max-height:800px){
  .flag-sidebar .palette-note,
  .flag-session .flag-label{display:none}
}
@media (min-width:901px) and (max-height:680px){
  .flag-shell{padding:12px 24px}
  .flag-heading{padding:8px 0 10px}
  .flag-heading .small-label{font-size:12px}
  .flag-workspace{padding-top:12px}
  .flag-sidebar{gap:10px}
  .flag-modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .flag-modes button{justify-content:center;padding:8px 4px;font-size:14.4px}
  .flag-modes button span+span{display:none}
  .flag-tools{margin:8px 0}
  .flag-tools button{padding:6px 4px;font-size:15.6px}
  .flag-sidebar .flag-submit-row{gap:8px;padding-top:10px}
  .flag-session .flag-label{display:none}
  .flag-result{gap:10px;padding:10px}
  .flag-result img{max-height:80px}
}
@media (max-width:620px){
  .flag-history{gap:8px}
  .flag-history button{padding:7px 9px}
  .flag-studio-bottom .game-utilities{width:100%;gap:6px}
  .flag-studio-bottom .game-utilities .support-link{gap:4px}
  .flag-studio-bottom .game-utilities button{padding:8px 6px;min-height:44px}
}

.flag-experience{--coffee-bg:#263a39;--coffee-ink:#f6f4ed;--coffee-edge:#263a39;--coffee-radius:5px;--coffee-shadow:0 3px 0 #a9b6a7}
@media(max-width:600px){.flag-studio-bottom .game-utilities{flex-wrap:wrap}.flag-studio-bottom .game-utilities .support-link{padding-inline:10px}}

.flag-experience .game-footer{margin-top:16px}@media(min-width:901px){.flag-shell{grid-template-rows:auto minmax(0,1fr) auto}.flag-studio{grid-template-areas:'prompt' 'hint' 'canvas' 'caption' 'result';grid-template-rows:auto auto minmax(0,1fr) auto auto}}