@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Baloo+2:wght@700;800&family=Sniglet:wght@800&family=Lilita+One&family=Titan+One&family=Bowlby+One&family=Bungee&family=Luckiest+Guy&family=Chewy&family=Pacifico&family=Nunito:wght@400;600;700;800&display=swap');

  :root{
    --panel: var(--paper);
    --muted: var(--ink-3);
    --text: var(--ink);
    --accent: var(--primary);
  }
  .name-coloring-wrapper::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.4px);background-size:22px 22px}

  /* ---------- breadcrumbs / about ---------- */
  /* Shared page chrome from category-v2.css is full-bleed here, so line it up
     with .app's container instead of the viewport edge. */
  .name-coloring-wrapper .c4-cp-topbar,
  .name-coloring-wrapper .c4-cp-about{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding-left:22px;padding-right:22px}
  .name-coloring-wrapper .c4-cp-about{margin-bottom:40px}

  /* ---------- hero ---------- */
  .hero{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:40px 22px 6px;text-align:center}
  .hero h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(26px,4.5vw,38px);margin:0 0 10px;color:var(--ink)}
  .hero p{margin:0 auto;max-width:620px;font-size:15.5px;font-weight:600;color:var(--muted);line-height:1.5}

  /* ---------- app ---------- */
  .app{position:relative;z-index:1;display:flex;gap:24px;align-items:flex-start;
    max-width:1160px;margin:0 auto;padding:28px 22px 40px}

  .panel{flex:0 0 340px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;position:sticky;top:24px;box-shadow:0 10px 30px -18px rgba(60,45,20,.4)}

  .brand{display:flex;align-items:center;gap:10px;margin:0 0 16px}
  .brand .t{font-family:'Fredoka',sans-serif;font-weight:700;font-size:21px;line-height:1.05;margin:0;color:var(--ink)}
  .brand .blob{width:34px;height:34px;flex:0 0 34px}
  .brand p{margin:3px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}

  label.field{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted);margin:18px 0 8px}

  input[type=text],textarea{width:100%;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;
    padding:11px 14px;border:2px solid var(--line);border-radius:11px;color:var(--ink);background:#FCFAF4;outline:none}
  input[type=text]:focus,textarea:focus{border-color:var(--accent)}
  input[type=text]+input[type=text]{margin-top:8px}
  textarea{font-size:16px;line-height:1.5;resize:vertical}

  .seg{display:flex;gap:7px}
  .seg button{flex:1;border:2px solid var(--line);background:#FCFAF4;border-radius:10px;padding:9px 0;
    cursor:pointer;font-weight:800;color:var(--text);font-size:13.5px;font-family:inherit;transition:background .15s}
  .seg button:hover:not([aria-pressed=true]){background:#f0ede1}
  .seg button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
  #mode{margin-bottom:4px}
  #layout{display:grid;grid-template-columns:1fr 1fr;gap:7px}

  .fonts{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
  .fonts button{height:46px;border:2px solid var(--line);background:#FCFAF4;border-radius:10px;
    cursor:pointer;color:var(--ink);line-height:1;padding:0;overflow:hidden;transition:background .15s}
  .fonts button:hover:not([aria-pressed=true]){background:#f0ede1}
  .fonts button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}

  .dropdown{position:relative}
  .dd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
    border:2px solid var(--line);background:#FCFAF4;border-radius:11px;padding:8px 11px;cursor:pointer;
    font-family:inherit;font-weight:800;font-size:14px;color:var(--text);transition:background .15s}
  .dd-trigger:hover{background:#f0ede1}
  .dd-trigger[aria-expanded=true]{border-color:var(--ink)}
  .dd-cur{display:flex;align-items:center;gap:9px;min-width:0}
  .dd-cur span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dd-caret{width:15px;height:15px;flex:0 0 15px;transition:transform .15s}
  .dd-trigger[aria-expanded=true] .dd-caret{transform:rotate(180deg)}
  .dd-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;
    border:2px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -14px rgba(60,45,20,.5);
    padding:6px;max-height:300px;overflow:auto;display:none}
  .dd-menu.open{display:block}
  .dd-opt{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;border-radius:8px;
    padding:7px 9px;cursor:pointer;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--text);text-align:left}
  .dd-opt:hover{background:var(--bg)}
  .dd-opt[aria-selected=true]{background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink)}
  .swatch{width:30px;height:30px;flex:0 0 30px;display:block}
  .swatch svg{width:100%;height:100%;display:block}

  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
  .row .field{margin:0}
  .toggle{position:relative;width:50px;height:28px;border-radius:20px;border:2px solid var(--line);
    background:#FCFAF4;cursor:pointer;padding:0;transition:background .15s,border-color .15s}
  .toggle:hover:not([aria-pressed=true]){background:#f0ede1}
  .toggle[aria-pressed=true]{background:#3FA34D;border-color:#3FA34D}
  .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
    background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
  .toggle[aria-pressed=true]::after{left:24px}

  .palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .palette button{height:36px;border-radius:9px;border:2px solid rgba(0,0,0,.12);cursor:pointer}
  .palette button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:1px}
  .color-help{font-size:12.5px;color:var(--muted);font-weight:600;margin:14px 0 0;line-height:1.4}

  details.box{margin-top:20px;border:2px solid var(--line);border-radius:11px;background:#FCFAF4;padding:0 14px}
  details.box summary{cursor:pointer;font-weight:800;font-size:13.5px;padding:12px 0;color:var(--text);list-style-position:inside}
  details.box[open]{padding-bottom:14px}
  details.box .color-help{margin-top:0;margin-bottom:10px}
  details.box .btn{width:100%;margin-top:10px;background:#fff;border:2px solid var(--ink);color:var(--ink);box-shadow:none}
  details.box .btn:hover{background:#f0ede1}

  .actions{margin-top:22px;display:flex;flex-direction:column;gap:9px}
  .btn{border:none;border-radius:11px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;transition:background .15s, transform .1s, filter .15s}
  .btn-print{background:var(--accent);color:#fff;box-shadow:0 6px 0 -1px var(--primary-ink)}
  .btn-print:hover{filter:brightness(1.08)}
  .btn-print:active{transform:translateY(3px);box-shadow:0 3px 0 -1px var(--primary-ink)}
  .btn-plain{background:#FCFAF4;border:2px solid var(--ink);color:var(--ink);box-shadow:none}
  .btn-plain:hover{background:#f0ede1}
  .btn-plain:active{transform:translateY(1px)}
  .save-as{margin-top:4px}
  .save-label{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted);margin:8px 0 8px}
  .btn-secondary{display:flex;gap:9px}
  .btn-secondary .btn{flex:1;background:#FCFAF4;border:2px solid var(--line);color:var(--text);box-shadow:none;font-size:13.5px;padding:11px}
  .btn-secondary .btn:hover{background:#f0ede1}
  .btn-secondary .btn:active{transform:translateY(1px)}
  .btn[disabled]{opacity:.6;cursor:progress}
  #clear{width:100%;background:#FCFAF4;border:2px solid var(--line);color:var(--text);box-shadow:none;margin-top:14px}
  #clear:hover{background:#f0ede1}

  .hidden{display:none !important}

  .stage{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding-top:4px}
  .sheet-wrap{width:100%;max-width:660px}
  #sheet{background:var(--paper);border-radius:6px;
    box-shadow:0 18px 50px -20px rgba(50,35,10,.55),0 2px 0 rgba(0,0,0,.05);overflow:hidden}
  #sheet svg{display:block;width:100%;height:auto}
  #sheet.coloring path,#sheet.coloring circle,#sheet.coloring ellipse,
  #sheet.coloring rect,#sheet.coloring polygon,#sheet.coloring tspan{pointer-events:all;cursor:pointer}
  #sheet .bg{pointer-events:none}
  #sheet.coloring .ln{pointer-events:none;cursor:default}
  .hint{text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;margin:14px 0 0}

  /* ---------- landing content ---------- */
  .content{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:14px 22px 70px}
  .content h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:24px;color:var(--ink);margin:44px 0 16px}
  .content p{line-height:1.6;font-size:15px;margin:0 0 12px}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
  .card h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;margin:0 0 10px;color:var(--ink)}
  .card ul{margin:0;padding-left:19px}
  .card li{margin:0 0 9px;line-height:1.5;font-size:14.5px}
  .steps{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:6px 22px}
  .steps ol{margin:14px 0;padding-left:22px}
  .steps li{margin:0 0 10px;line-height:1.55;font-size:15px}
  .faq details{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin:0 0 10px;padding:0 18px}
  .faq summary{cursor:pointer;font-weight:800;font-size:15px;padding:14px 0;color:var(--ink)}
  .faq details[open]{padding-bottom:6px}
  .faq p{font-size:14.5px}
  .foot{margin-top:48px;text-align:center;color:var(--muted);font-size:12.5px;font-weight:600}

  @media (max-width:880px){
    .app{flex-direction:column;align-items:stretch;gap:14px}
    .panel{position:static;flex:1 1 auto;width:100%}
    .cols{grid-template-columns:1fr}

    /* The preview goes first and stays pinned under the sticky site header
       (.c4-header, ~61px) while the control panel scrolls beneath it —
       otherwise the whole panel sits between the hero and the canvas and you
       edit blind. Sticky is scoped to .app, so it releases at the landing content. */
    .stage{order:-1;position:sticky;top:61px;z-index:5;
      margin:0 -22px;padding:8px 0 10px;background:var(--bg);
      box-shadow:0 10px 12px -12px rgba(50,35,10,.5)}
    .sheet-wrap{max-width:none;width:100%;display:flex;flex-direction:column;align-items:center}
    /* Size the sheet by height, not width: at 100% width a portrait page eats
       most of the viewport and leaves no room for the controls under it. The
       generated <svg> carries a viewBox but no width/height, so it has no
       intrinsic size to clamp against — render() publishes the page ratio as
       --sheet-ar and the box is sized here instead. Width is the driven axis
       (an explicit height plus max-width would letterbox landscape pages —
       aspect-ratio only fills in the axis left auto). */
    #sheet{--sheet-h:min(34vh,320px);
      width:min(100vw - 44px, var(--sheet-h) * var(--sheet-ar,.707));
      aspect-ratio:var(--sheet-ar,.707);height:auto}
    #sheet svg{width:100%;height:100%}
    .stage .hint{display:none}

    /* Color mode taps individual letters, so give the sheet its full size back. */
    .app.color-mode .stage{position:static;margin:0;padding:0;background:none;box-shadow:none}
    .app.color-mode #sheet{aspect-ratio:auto;height:auto;width:100%;max-width:none}
    .app.color-mode #sheet svg{height:auto}
  }
  @media print{
    @page{margin:14mm}
    body::before{display:none}
    .hero,.content,.panel,.hint,.c4-header,.c4-footer,.c4-mobile-menu,.c4-totop{display:none !important}
    .app{display:block;padding:0;max-width:none}
    /* A printed page is ~816px wide, so the max-width:880px block above applies
       here too — undo its sizing or the sheet prints at preview scale. */
    .stage{padding:0;position:static;margin:0;background:none;box-shadow:none}
    .sheet-wrap{max-width:none;width:100%;display:block}
    #sheet{box-shadow:none;border-radius:0;width:100%;max-width:none;aspect-ratio:auto;height:auto}
    #sheet svg{width:100%;height:auto}
  }