/* Generated from archer-problem.html. Edit that file, then run: python3 .design/extract-story.py archer/archer-problem.html archer */
/* Layout: one card. A 5:3 illustration stage (portrait on phones), the scene's line beneath it, controls along the bottom.
   Warm paper, flat figures, white space as the hero. Amber is the tax, red is used twice, teal waits for scene 6. */
.pw{
  --paper:#faf8f5; --card:#ffffff; --sunken:#f4f1ec; --ink:#17191b; --ink-2:#2c3134; --muted:#5d6469; --subtle:#8c9297;
  --line:#e8e4dd; --line-2:#d8d3ca;
  --amber:#a2650f; --amber-wash:#f6ecdc; --red:#a34438; --teal:#0d6e6e; --teal-wash:#e3eeec;
  --fig:#17191b; --fig-2:#3b4146; --device:#2c3134; --device-2:#4a5055; --wood:#ece5d9; --wood-2:#d8cdbb; --light:#fff3dc; --plant:#8e9b8c;
  --shadow:0 18px 40px rgba(23,25,27,.08);
  --head:"Space Grotesk",Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --body:Inter,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

.pw{color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-align:left}
.pw [hidden]{display:none!important}
.pw p{color:inherit;max-width:none}
.pw button{font:inherit;color:inherit;cursor:pointer}
.pw :focus-visible{outline:2px solid var(--ink);outline-offset:2px}


/* The player */
.pw{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pw .pw-top{display:flex;align-items:center;gap:12px;min-height:48px;padding:7px 12px 7px 18px;border-bottom:1px solid var(--line)}
.pw .pw-eyebrow{flex:1 1 0;margin:0;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pw .pw-eyebrow b{color:var(--ink);font-weight:500}
.pw .pw-tools{flex:none;margin-left:auto;display:flex;align-items:center;gap:8px}
.pw .pw-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:500 13px/1 var(--body);white-space:nowrap}
.pw .pw-chip:hover{border-color:var(--ink)}
.pw .pw-chip i{font-style:normal;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pw .pw-icon{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-2);border-radius:999px;background:var(--card)}
.pw .pw-icon:hover{border-color:var(--ink)}
.pw .pw-snd svg{width:16px;height:16px}
.pw .pw-snd[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pw .pw-icon svg{width:16px;height:16px}
.pw .pw-pop{position:absolute;z-index:20;top:50px;right:14px;display:grid;gap:4px;min-width:220px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.pw .pw-pop button{display:grid;gap:2px;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:transparent}
.pw .pw-pop button:hover,.pw .pw-pop button[aria-checked="true"]{background:var(--sunken)}
.pw .pw-pop b{font:600 14px/1.2 var(--head)}
.pw .pw-pop span{font-size:12px;color:var(--muted)}

.pw .pw-stage{position:relative;aspect-ratio:var(--ar,5/3);max-height:max(240px,calc(100svh - 390px));width:100%;background:var(--paper);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer}
.pw .pw-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pw .pw-ui{position:absolute;inset:0;pointer-events:none}
.pw .pw-ui>*{pointer-events:auto}
.pw .pw-clock{position:absolute;left:16px;top:14px;margin:0;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--muted);pointer-events:none}
.pw .pw-clock b{color:var(--ink);font-weight:500}

.pw .pw-toast{position:absolute;right:16px;top:14px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;width:min(300px,calc(100% - 32px));padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow);pointer-events:none}
.pw .pw-toast i{grid-row:span 2;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.pw .pw-toast b{font:600 14px/1.25 var(--body)}
.pw .pw-toast span{font:400 12px/1.3 var(--mono);color:var(--muted)}

.pw .pw-act{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:600 15px/1 var(--body);white-space:nowrap;box-shadow:var(--shadow)}
.pw .pw-act:hover{background:var(--ink-2)}
.pw .pw-place{min-height:52px;padding:0 26px;font-size:17px;animation:pwPulse 1.8s ease-in-out infinite}
.pw .pw-place:hover{animation:none}
@keyframes pwPulse{0%,100%{box-shadow:0 0 0 0 rgba(13,110,110,.0),var(--shadow)}50%{box-shadow:0 0 0 8px rgba(13,110,110,.22),var(--shadow)}}
@media (prefers-reduced-motion: reduce){.pw .pw-place{animation:none}}
.pw .pw-act.ghost{background:var(--card);color:var(--ink);border-color:var(--line-2)}
.pw .pw-hint{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);margin:0;font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;pointer-events:none}

.pw .pw-roles{position:absolute;left:16px;right:16px;top:clamp(14px,4%,28px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pw .pw-role{display:grid;align-content:start;gap:6px;min-width:0;padding:14px 14px 16px;text-align:left;border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:0 6px 18px rgba(23,25,27,.05);transition:border-color .2s}
.pw .pw-role:hover,.pw .pw-role:focus-visible{border-color:var(--ink)}
.pw .pw-role svg{width:26px;height:30px}
.pw .pw-role b{font:600 17px/1.15 var(--head);letter-spacing:-.01em}
.pw .pw-role span{font-size:12.5px;line-height:1.35;color:var(--muted)}
.pw .pw-role small{margin-top:4px;font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.pw .pw-role em{font-style:normal;font-size:13.5px;line-height:1.3;color:var(--ink)}

.pw .pw-copy{display:grid;align-content:start;gap:6px;min-height:150px;padding:14px clamp(18px,3vw,32px) 12px;border-top:1px solid var(--line)}
.pw .pw-line{margin:0;max-width:30ch;font:600 clamp(26px,3vw,38px)/1.1 var(--head);letter-spacing:-.03em;text-wrap:balance}
.pw .pw-line.big{max-width:28ch;font-size:clamp(28px,3.4vw,44px)}
.pw .pw-sub{margin:0;max-width:60ch;font-size:clamp(17px,1.6vw,20px);line-height:1.4;color:var(--ink-2)}
.pw .pw-sub:empty{display:none}

.pw .pw-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid var(--line)}
.pw .pw-segs{flex:1;display:flex;gap:4px;min-width:0}
.pw .pw-seg{position:relative;flex:1 1 0;min-width:0;height:28px;padding:0;border:0;background:transparent}
.pw .pw-seg::before{content:"";position:absolute;left:0;right:0;top:13px;height:3px;border-radius:2px;background:var(--line-2)}
.pw .pw-seg i{position:absolute;left:0;top:13px;height:3px;border-radius:2px;background:var(--ink);width:0}
.pw .pw-seg.done i{width:100%;background:var(--muted)}
.pw .pw-seg.now i{background:var(--ink)}
.pw .pw-seg.teal i{background:var(--teal)}
.pw .pw-count{font:500 12px/1 var(--mono);color:var(--muted);white-space:nowrap;min-width:44px;text-align:center}

.pw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* SVG type */
.pw .t-head{font-family:var(--head);font-weight:600;letter-spacing:-.01em}
.pw .t-body{font-family:var(--body)}
.pw .t-mono{font-family:var(--mono)}

@media (max-width:640px){
  .pw .pw-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;left:10px;right:10px;top:10px}
  .pw .pw-role{padding:10px 11px 12px;gap:4px}
  .pw .pw-role svg{display:none}
  .pw .pw-role b{font-size:15px}
  .pw .pw-role span{font-size:11.5px}
  .pw .pw-role em{font-size:12px}
  .pw .pw-copy{min-height:150px}
  .pw .pw-sub{font-size:16px}
  .pw .pw-toast{top:10px;right:10px;padding:10px 12px;width:min(260px,calc(100% - 20px))}
  .pw .pw-eyebrow span{display:none}
}
@media (prefers-reduced-motion: reduce){ .pw *{transition:none!important} }