/* The studio's look. Lifted out of index.html on 2026-09-21 so the page can
   carry a strict Content-Security-Policy: an inline <style> needs
   'unsafe-inline', and a policy that allows inline is most of the way to no
   policy at all. */
  /* Tokens lifted from docs/design/system/tokens/. Rung 1 is a single page, so
     it carries the handful it needs rather than the whole design system. */
  :root{
    --ink:#000; --paper:#fff; --cream:#FFFBEB;
    --yellow:#FFD93D;        /* the ONE main action on the screen */
    --yellow-pale:#FFF0B3;   /* every button that is not the main action */
    --deep-purple:#6D28D9;   /* purple with words on it is ALWAYS this, white text */
    --coral:#FF6B6B;
    --orange-wash:#FFF1E0;   /* an oops is orange and calm, NEVER red */
    --orange-edge:#F59E0B;
    --gray-700:#374151; --gray-500:#6B7280;
    --font-display:"Bangers",system-ui,sans-serif;
    --font-text:"Comic Neue","Comic Sans MS",system-ui,sans-serif;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;min-height:100%}
  body{
    background:var(--cream); color:var(--ink);
    font-family:var(--font-text); font-size:19px; line-height:1.45;
    -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
    padding:24px 16px 48px;
  }

  .wrap{max-width:820px;margin:0 auto}

  h1{
    font-family:var(--font-display); font-weight:400;
    font-size:clamp(34px,6vw,52px); letter-spacing:.5px;
    margin:0 0 4px; text-align:center;
  }
  .sub{text-align:center;color:var(--gray-700);margin:0 0 28px;font-size:18px}

  label{display:block;font-weight:700;font-size:21px;margin:0 0 10px}

  textarea{
    width:100%; min-height:132px; resize:none;
    font-family:var(--font-text); font-size:20px; line-height:1.4;
    padding:16px; border:3px solid var(--ink); border-radius:14px;
    background:var(--paper); color:var(--ink);
  }
  input[type=password]{
    width:100%; font-family:var(--font-text); font-size:22px;
    padding:16px; border:3px solid var(--ink); border-radius:14px;
    background:var(--paper); color:var(--ink);
  }
  input[type=password]:focus{outline:4px solid var(--deep-purple);outline-offset:2px}
  textarea::placeholder{color:var(--gray-500)}
  textarea:focus{outline:4px solid var(--deep-purple);outline-offset:2px}

  .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

  button{
    font-family:var(--font-text); font-weight:700; font-size:21px;
    min-height:56px; padding:0 28px;           /* comfortably past the 48pt floor */
    border:3px solid var(--ink); border-radius:14px;
    background:var(--yellow-pale); color:var(--ink);
    cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none;
  }
  button.main{background:var(--yellow);flex:1 1 220px}
  button:active{transform:translateY(2px)}
  button[disabled]{opacity:.55;cursor:default;transform:none}

  .stage{margin-top:28px;text-align:center}

  .picture{
    width:100%; border:3px solid var(--ink); border-radius:14px;
    background:var(--paper); display:block;
  }

  .waiting{
    border:3px dashed var(--ink); border-radius:14px; background:var(--paper);
    padding:40px 20px;
  }
  .waiting p{margin:0;font-size:21px;font-weight:700}
  .waiting .small{font-weight:400;font-size:18px;color:var(--gray-700);margin-top:8px}

  .dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
  @keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

  /* A stop and a wobble look calm, never like an alarm. No shame, no detail. */
  .message{
    border:3px solid var(--ink); border-radius:14px; background:var(--paper);
    padding:22px; font-size:20px; font-weight:700;
  }
  .message.stop{border-color:var(--deep-purple)}

  /* An oops. Orange wash, never red, a 4px edge, and it stays until she taps a
     way out rather than fading on its own. Nothing here blames her. */
  .message.oops{
    border-width:4px; border-color:var(--orange-edge);
    background:var(--orange-wash); text-align:left;
  }
  .oopstitle{
    font-family:var(--font-display); font-size:30px; letter-spacing:.5px;
    margin:0 0 8px; color:var(--ink);
  }
  .oopswords{margin:0; font-size:20px; font-weight:700; color:var(--ink)}
  .ways{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
  .ways button{
    font-family:var(--font-text); font-weight:700; font-size:19px;
    min-height:48px; padding:12px 22px; border:3px solid var(--ink);
    border-radius:14px; background:var(--yellow-pale); cursor:pointer;
  }

  /* Her pictures. Big enough to tap with a finger and to tell apart. */
  .striptitle{
    font-family:var(--font-text); font-weight:700; font-size:21px;
    margin:36px 0 12px; text-align:left;
  }
  .thumbs{display:flex;flex-wrap:wrap;gap:12px}
  .thumb{
    width:112px; height:112px; padding:0; min-height:0;
    border:3px solid var(--ink); border-radius:12px;
    background:var(--paper); overflow:hidden;
  }
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .thumb.on{border-color:var(--deep-purple);border-width:5px}

  @media (prefers-reduced-motion:reduce){
    .dots::after{animation:none;content:"..."}
    button:active{transform:none}
  }