:root{
    --bg:#0E1014; --bg2:#08090B; --card:#161A20; --elev:#1D222A;
    --line:#252B34; --line2:#333B47;
    --text:#E8EAED; --muted:#9AA0A8; --strong:#FFFFFF;
    --blue:#00A8FF; --red:#FF2236; --yellow:#FFC53D; --green:#22E06A; --orange:#FF7A18;
    --display:'Saira Condensed',system-ui,sans-serif;
    --body:'Archivo',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --r:10px; --rs:7px;
    /* 22 mm imprint on a regulation 42.67 mm ball = 51.6% of the ball's width.
       The original mockup used 60%, which oversold the print size. */
    --print-pct:51.6%;
  }
  *{box-sizing:border-box}
  /* Must come with !important: several elements below set display:flex, which
     beats the browser's built-in [hidden]{display:none}. Without this, setting
     .hidden in JS does nothing — the empty-state prompt sat on top of the
     customer's artwork and the tools panel never collapsed. */
  [hidden]{display:none!important}
  html,body{margin:0}
  body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
  ::selection{background:var(--blue);color:#04121E}
  a{color:var(--blue)}
  button,input,select{font-family:inherit}
  :where(a,button,input,select,label,canvas):focus-visible{outline:3px solid var(--blue);outline-offset:2px}

  .hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    gap:14px;height:70px;padding:0 26px;border-bottom:1px solid var(--line);
    background:rgba(14,16,20,.85);backdrop-filter:blur(12px)}
  .brand{display:flex;align-items:center;gap:22px;min-width:0}
  .wordmark{font-family:var(--display);font-weight:900;font-style:italic;font-size:23px;
    text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
    background:linear-gradient(180deg,#fff 0%,#cfd4db 48%,#8b929c 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .wordmark span{-webkit-text-fill-color:var(--blue);color:var(--blue)}
  nav{display:flex;gap:18px;font-family:var(--display);font-weight:700;font-size:13.5px;
    text-transform:uppercase;letter-spacing:.08em}
  nav a{color:var(--muted);text-decoration:none}
  nav a:hover{color:var(--strong)}
  nav .on{color:var(--blue);border-bottom:3px solid var(--blue);padding-bottom:2px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    border-radius:var(--rs);font-family:var(--display);font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;border:2px solid transparent;transition:filter .15s,box-shadow .15s,transform .1s}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn-p{background:var(--blue);color:#04121E;border-color:var(--blue)}
  .btn-p:hover{filter:brightness(1.08);box-shadow:0 0 24px rgba(0,168,255,.35)}
  .btn-g{background:transparent;color:var(--text);border-color:var(--line2)}
  .btn-g:hover{background:var(--elev);color:var(--strong)}
  .btn-d{background:transparent;color:var(--red);border-color:var(--red)}
  .btn:disabled{opacity:.5;cursor:not-allowed}

  .wrap{display:flex;flex-wrap:wrap;gap:22px;max-width:1180px;margin:0 auto;padding:28px;align-items:flex-start}
  .col-a{flex:1 1 460px;min-width:330px}
  .col-b{flex:1 1 370px;min-width:320px;max-width:436px;display:flex;flex-direction:column;gap:14px}

  .stage{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);padding:40px 22px 24px;
    background-image:radial-gradient(circle at 62% 12%,rgba(0,168,255,.10),transparent 58%)}
  .streak{position:absolute;top:-30px;width:6px;height:290px;transform:rotate(18deg);pointer-events:none}
  .ball{position:relative;width:min(430px,84vw);aspect-ratio:1;margin:0 auto;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff 0%,#f1f2f4 45%,#c7cad0 80%,#969ca5 100%);
    box-shadow:inset -14px -20px 36px rgba(0,0,0,.20),0 22px 44px rgba(0,0,0,.5)}
  .dimples{position:absolute;inset:8px;border-radius:50%;pointer-events:none;
    background-image:radial-gradient(circle,rgba(0,0,0,.05) 1.6px,transparent 1.7px);
    background-size:14px 14px;
    -webkit-mask-image:radial-gradient(circle at 35% 30%,#000 40%,transparent 78%);
    mask-image:radial-gradient(circle at 35% 30%,#000 40%,transparent 78%)}
  .stamp{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);font-family:var(--mono);
    font-size:10.5px;color:#6a707a;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
  /* the print area — canvas is sized by JS, this just positions it */
  .area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:var(--print-pct);aspect-ratio:1;touch-action:none;cursor:grab}
  .area.drag{cursor:grabbing}
  #pv{display:block;width:100%;height:100%;border-radius:50%}
  .cut{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--print-pct);
    aspect-ratio:1;border-radius:50%;border:2px dashed rgba(0,168,255,.55);pointer-events:none}
  .cutlbl{position:absolute;left:50%;top:calc(50% - var(--print-pct)/2);transform:translate(-50%,-50%);
    padding:2px 9px;background:rgba(4,18,30,.8);border-radius:99px;font-family:var(--mono);
    font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
    white-space:nowrap;pointer-events:none}
  .empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;text-align:center;color:#8d949d;cursor:pointer;border-radius:50%}
  .empty b{font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
  .empty small{font-size:10.5px}
  .hint{text-align:center;font-size:12.5px;color:var(--muted);margin:14px auto 0;max-width:390px;line-height:1.5}
  /* Adjust controls live directly under the ball. On a phone the old layout put
     the size slider far below the preview, so you couldn't see your logo while
     resizing it — you had to scroll back and forth. */
  .adjust{margin:16px auto 0;max-width:430px;padding:13px;background:var(--elev);
    border:1px solid var(--line2);border-radius:var(--rs);display:flex;flex-direction:column;gap:10px}
  .adjust .tool>label{width:44px}
  .adjust input[type=range]{height:30px}
  .zoomrow{display:flex;align-items:center;gap:8px}
  .zoombtn{width:38px;height:34px;flex-shrink:0;font-size:17px;line-height:1;
    background:var(--card);color:var(--strong);border:1px solid var(--line2);
    border-radius:5px;cursor:pointer}
  .zoombtn:hover{background:var(--bg2)}
  .zoomval{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:44px;text-align:right}
  .gesture{text-align:center;font-size:11.5px;color:var(--muted);margin:8px 0 0}

  .card{padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
  .step{font-family:var(--mono);font-size:11.5px;color:var(--yellow);margin-bottom:9px;letter-spacing:.04em}
  .fld{width:100%;height:44px;padding:0 11px;background:var(--elev);color:var(--strong);
    border:2px solid var(--line2);border-radius:var(--rs);font-size:14px}
  select.fld{font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;
    letter-spacing:.04em;cursor:pointer}
  .blurb{font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.45}
  .row{display:flex;gap:9px}
  .row>*{min-width:0}

  .msg{display:flex;gap:9px;align-items:flex-start;padding:12px 13px;border-radius:var(--rs);
    font-size:13px;line-height:1.45}
  .msg-e{background:rgba(255,34,54,.13);border:1px solid var(--red)}
  .msg-w{background:rgba(255,197,61,.12);border:1px solid var(--yellow)}
  .msg i{font-family:var(--mono);font-style:normal;flex-shrink:0}
  .msg-e i{color:var(--red)} .msg-w i{color:var(--yellow)}
  .msg button{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
    font-size:16px;line-height:1;padding:0 2px}
  .msg button:hover{color:var(--strong)}

  .layers{display:flex;flex-direction:column;gap:5px;margin-top:12px}
  .lay{display:flex;align-items:center;gap:9px;padding:7px 9px;cursor:pointer;
    border:1px solid var(--line);border-radius:var(--rs);background:transparent}
  .lay.sel{background:var(--elev);border-color:var(--line2)}
  .lay .k{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;width:32px}
  .lay .n{flex:1;font-size:12.5px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lay .x{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:15px}
  .lay .x:hover{color:var(--red);background:var(--card)}

  .tools{margin-top:12px;padding:13px;background:var(--elev);border-radius:var(--rs);
    display:flex;flex-direction:column;gap:11px}
  .tool{display:flex;align-items:center;gap:11px}
  .tool>label{font-family:var(--mono);font-size:10.5px;color:var(--muted);width:50px;text-transform:uppercase}
  input[type=range]{flex:1;accent-color:var(--blue)}
  .inks{display:flex;gap:7px;flex-wrap:wrap}
  .ink{width:25px;height:25px;border-radius:50%;cursor:pointer;border:2px solid var(--line2)}
  .ink.on{border-color:#fff}

  .qty{display:flex;align-items:center;gap:12px}
  .stepper{display:flex;align-items:center;border:2px solid var(--line2);border-radius:var(--rs)}
  .stepper button{width:40px;height:42px;background:none;border:none;color:var(--strong);
    font-size:19px;cursor:pointer}
  .stepper button:hover{background:var(--elev)}
  .stepper span{min-width:70px;text-align:center;font-family:var(--mono);font-size:14.5px}
  .tot{flex:1;text-align:right}
  .tot b{display:block;font-family:var(--mono);font-weight:700;font-size:25px;color:var(--strong)}
  .tot small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  .fine{font-size:11px;color:var(--muted);margin:9px 0 0;line-height:1.5}

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

  @media (max-width:520px){
    .hdr{height:auto;padding:10px 15px;flex-wrap:wrap}
    nav{font-size:12px;gap:12px}
    .wrap{padding:16px;gap:16px}
  }