/* Deepn platform tokens (packages/ui/src/styles/theme.css, light) + the sketch layer */
:root{
  --background:hsl(38 25% 94%); --card:hsl(38 22% 97%); --foreground:hsl(0 0% 10%);
  --primary:hsl(20 38% 52%); --primary-border:hsl(20 32% 42%); --primary-fg:#fff;
  --secondary:hsl(40 20% 90%); --muted:hsl(40 18% 94%); --muted-fg:hsl(40 6% 45%);
  --accent:hsl(40 20% 92%); --border:hsl(40 10% 85%); --input:hsl(40 10% 88%);
  --radius:0.75rem; --note:hsl(40 40% 92%); --logo:hsl(24 42% 35%);
  --ink:#1C1A18; --paper:#fff; --dot:hsl(20 20% 60% / .18); --field:#fff; --pick:hsl(20 38% 52% / .12); --hover:hsl(20 38% 52% / .06);
  color-scheme:light;
  --sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"DM Serif Display","Cormorant Garamond",Georgia,serif;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
}
/* Deepn .dark tokens: warm dark grey, sage primary. System preference unless the person picks. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --background:hsl(220 10% 12%); --card:hsl(220 8% 15%); --foreground:hsl(210 20% 94%);
  --primary:hsl(160 30% 50%); --primary-border:hsl(160 30% 40%); --primary-fg:hsl(210 20% 96%);
  --secondary:hsl(155 18% 22%); --muted:hsl(220 8% 18%); --muted-fg:hsl(220 10% 66%);
  --accent:hsl(42 35% 30%); --border:hsl(220 10% 28%); --input:hsl(220 10% 30%);
  --note:hsl(42 35% 20%); --logo:hsl(160 30% 50%);
  --ink:hsl(38 25% 92%); --paper:hsl(220 8% 15%); --dot:hsl(210 20% 94% / .09); --field:hsl(220 8% 13%); --pick:hsl(160 30% 50% / .2); --hover:hsl(160 30% 50% / .1);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --background:hsl(220 10% 12%); --card:hsl(220 8% 15%); --foreground:hsl(210 20% 94%);
  --primary:hsl(160 30% 50%); --primary-border:hsl(160 30% 40%); --primary-fg:hsl(210 20% 96%);
  --secondary:hsl(155 18% 22%); --muted:hsl(220 8% 18%); --muted-fg:hsl(220 10% 66%);
  --accent:hsl(42 35% 30%); --border:hsl(220 10% 28%); --input:hsl(220 10% 30%);
  --note:hsl(42 35% 20%); --logo:hsl(160 30% 50%);
  --ink:hsl(38 25% 92%); --paper:hsl(220 8% 15%); --dot:hsl(210 20% 94% / .09); --field:hsl(220 8% 13%); --pick:hsl(160 30% 50% / .2); --hover:hsl(160 30% 50% / .1);
  color-scheme:dark; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--background) radial-gradient(var(--dot) 1px, transparent 1px);background-size:22px 22px;color:var(--foreground);font-family:var(--sans);font-size:16px;line-height:1.5}
.app{max-width:560px;margin:0 auto;padding-block:22px 22px;padding-inline:18px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;width:100%}
.app.wide{max-width:1040px}
.app .screen{margin-block:auto;width:100%}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--serif);font-weight:400;letter-spacing:0}
p{margin:0}

/* card */
.screen{background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);padding:24px 22px 26px;box-shadow:0 1px 2px hsl(20 20% 20% / .06),0 12px 32px -12px hsl(20 30% 30% / .22)}
.topbar{display:flex;justify-content:space-between;align-items:center;color:var(--foreground);margin-bottom:18px;flex:0 0 auto;gap:10px}
.wordmark{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:.01em}
.wordmark svg{flex:0 0 auto}
.topright{display:flex;align-items:center;gap:10px}
.topbar small{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-fg);font-weight:500;white-space:nowrap}
.theme{height:34px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--primary);background:var(--card);color:var(--primary);display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;box-shadow:0 1px 0 hsl(20 30% 30% / .12)}
.theme:hover{background:var(--pick)}
@media (max-width:480px){.theme{height:30px;font-size:11px;padding:0 10px 0 8px;gap:5px}}
@media (max-width:480px){.topbar small{display:none}}
/* tool-page header, like the app's tools */
.toolhead{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.chip{width:38px;height:38px;border-radius:10px;background:var(--pick);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.tooltitle{font-family:var(--serif);font-size:20px;line-height:1.1;color:var(--foreground)}
.toolsub{font-size:12px;color:var(--muted-fg);margin-top:3px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);font-weight:600;margin-bottom:6px}
.pagefoot{font-size:12px;color:var(--muted-fg);text-align:center;margin-top:24px;flex:0 0 auto}
.pagefoot a{color:inherit}
.brand{font-family:var(--hand);font-size:22px;color:var(--primary);display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand small{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-fg);white-space:nowrap;font-weight:500}

/* type */
.screen h1{font-size:30px;line-height:1.12;margin-top:14px}
.screen h2{font-size:24px;line-height:1.18;margin-top:22px}
.screen p{font-size:15px;color:var(--muted-fg);margin-top:10px}
.screen p.ink{color:var(--foreground)}
.hand{font-family:var(--hand)}
.wound-name{font-family:var(--serif);font-size:38px;line-height:1.05;margin-top:8px;color:var(--foreground)}
.frame{font-size:13px;color:var(--muted-fg);margin-top:12px;padding:8px 12px;background:var(--muted);border-radius:var(--radius);border:1px dashed var(--border)}

/* controls */
.btn{display:block;width:100%;text-align:center;margin-top:18px;padding:13px 16px;border-radius:var(--radius);background:var(--primary);color:var(--primary-fg);font-weight:600;font-size:15px;border:1px solid var(--primary-border);cursor:pointer;font-family:var(--sans);text-decoration:none;box-shadow:0 1px 0 hsl(20 30% 30% / .15)}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:transparent;color:var(--primary);border-color:var(--primary);box-shadow:none;margin-top:10px}
.btn:focus-visible,.opt:focus-visible,input:focus-visible,.check:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.opt{display:block;width:100%;text-align:left;margin-top:10px;padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:15px;background:var(--field);color:var(--foreground);cursor:pointer;font-family:var(--sans);line-height:1.4;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--primary);background:var(--hover)}
.opt.pick{background:var(--pick);border-color:var(--primary)}
.scenario{font-family:var(--hand);font-size:26px;line-height:1.12;margin-top:16px;color:var(--foreground)}
.prog{height:6px;background:var(--secondary);border-radius:6px;margin-top:14px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--primary);transition:width .25s ease}
.caption{font-family:var(--hand);font-size:21px;text-align:center;margin-top:12px;line-height:1.1;color:var(--primary)}
.field{display:block;width:100%;margin-top:12px;padding:12px;border:1px solid var(--input);border-radius:var(--radius);font-size:16px;background:var(--field);color:var(--foreground);font-family:var(--sans)}
label.lbl{display:block;font-size:13px;color:var(--muted-fg);margin-top:14px;font-weight:500}
.err{color:hsl(350 45% 45%);font-size:13px;margin-top:6px}
.tag{display:inline-block;font-family:var(--hand);font-size:21px;padding:2px 12px;border:1px solid var(--foreground);border-radius:999px;margin:6px 6px 0 0;background:var(--field);color:var(--foreground)}
.tag.dim{opacity:.3}
.lock{position:relative;margin-top:8px}
.lock .blur{filter:blur(4px);user-select:none;pointer-events:none}
.lock .key{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--hand);font-size:24px;color:var(--primary);line-height:1.05;padding:0 16px}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--field);font-size:15px;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--primary)}
.check.on{background:var(--pick);border-color:var(--primary)}

/* sketches: the drawings keep the pen-on-paper look */
svg.doodle{width:100%;height:auto;display:block;margin-top:14px}
.doodle *{stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.doodle text{stroke:none;fill:var(--ink);font-family:var(--hand);font-size:15px}
.doodle text.big{font-size:19px}
.doodle text.act{font-style:italic}
.doodle .box{fill:var(--paper)}
.doodle .dotted{stroke-dasharray:4 6}

.section{padding-top:20px;margin-top:22px;border-top:1px solid var(--border)}
.section h2{margin-top:0}
.small{font-size:12px;text-align:center;color:var(--muted-fg);margin-top:10px}
.restart{background:none;border:0;color:var(--muted-fg);font-size:12px;cursor:pointer;text-decoration:underline;margin-top:10px;font-family:var(--sans)}
@media (prefers-reduced-motion: reduce){.prog i,.opt{transition:none}}

/* two-column sections on wide screens */
.two{display:grid;grid-template-columns:1fr;gap:6px 36px;align-items:center}
.two .art{order:-1}
.two.keep .art{order:1}
.section.two{align-items:start}
@media (min-width:820px){
  .screen{padding:36px 40px 40px}
  .two{grid-template-columns:1.05fr 1fr}
  .two .art{order:0}
  .two.flip .art{order:-1}
  .screen h1{font-size:40px}
  .wound-name{font-size:48px}
  .app.wide .btn{max-width:420px}
  .landing-copy p{font-size:17px}
}

/* background doodles (wide screens only) */
.backdrop{display:none}
@media (min-width:1000px){
  .backdrop{display:block;position:fixed;inset:0;pointer-events:none;z-index:0}
  .dd{position:absolute;opacity:.26;width:200px}
  .dd svg{margin:0}
  .dd-1{left:4%;top:12%;transform:rotate(-4deg)}
  .dd-2{left:5%;bottom:14%;width:220px;transform:rotate(3deg)}
  .dd-3{right:5%;top:10%;width:220px;transform:rotate(5deg)}
  .dd-4{right:4%;bottom:12%;transform:rotate(-3deg)}
  .dd-5{left:3%;top:48%;width:200px}
  .dd-6{right:6%;top:46%;width:200px;transform:rotate(-6deg)}
  .dd-7{left:22%;bottom:6%;width:110px;transform:rotate(8deg)}
  .dd-8{right:20%;top:4%;width:170px;transform:rotate(3deg)}
  .app.wide .dd-1,.app.wide .dd-5,.app.wide .dd-2{left:1%}
  .app.wide .dd-3,.app.wide .dd-6,.app.wide .dd-4{right:1%}
  .app.wide .dd-7,.app.wide .dd-8{display:none}
  .topbar,.screen,.pagefoot{position:relative;z-index:1}
}