/* SWISS / INTERNATIONAL TYPOGRAPHIC STYLE */
:root{
  --paper:#f4f2ec;
  --ink:#111111;
  --red:#e30613;
  --grey:#8a8a8a;
  --line:#111111;
  --dark:#0d0d0d;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;
  max-width:980px;
  margin:0 auto;
  padding:0 24px 60px;
}
img{-webkit-user-drag:none;user-drag:none}

/* header */
.top-rule{border-top:14px solid var(--ink);padding-top:18px;margin-bottom:8px}
.brand-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:4px solid var(--ink);padding-bottom:10px}
.brand{font-weight:900;font-size:22px;letter-spacing:2px}
.tagline{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--grey)}
h1{font-size:clamp(44px,9vw,96px);font-weight:900;letter-spacing:-3px;line-height:.95;margin:26px 0 10px}
h1 .red{color:var(--red)}
.sub{font-size:15px;max-width:560px;line-height:1.5;margin-bottom:40px}

/* steps */
.step{margin-bottom:56px}
.step-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.num{background:var(--red);color:#fff;font-weight:900;font-size:15px;padding:6px 10px;letter-spacing:1px}
.step-head h2{font-size:24px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.step-head .rule{flex:1;height:6px;background:var(--ink)}
.note{font-size:13px;color:#444;margin-bottom:14px;max-width:640px;line-height:1.5}
.hidden{display:none!important}

/* dropzone */
.dropzone{border:4px dashed var(--ink);background:#fff;min-height:190px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.dropzone:hover,.dropzone.over{background:#ffe9ea;border-color:var(--red)}
.dz-title{font-size:26px;font-weight:900;letter-spacing:-.5px;text-align:center}
.dz-sub{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--grey);text-align:center;margin-top:8px}

/* buttons */
.row{display:flex;align-items:center}
.gap{gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{font-family:inherit;font-weight:900;font-size:13px;letter-spacing:1.5px;padding:14px 22px;border:3px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.btn:hover{background:var(--ink);color:#fff}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:#b0050f;border-color:#b0050f}
.btn.ghost{background:transparent}
.btn.big{font-size:16px;padding:18px 30px}

/* selected info */
.selinfo{display:flex;gap:18px;margin-top:20px;background:#fff;border:3px solid var(--ink);padding:16px;align-items:flex-start}
.selinfo img{width:130px;height:130px;object-fit:cover;border:2px solid var(--ink)}
.selname{font-weight:900;font-size:15px;word-break:break-all}
.seldims{font-size:12px;color:var(--grey);font-weight:700;letter-spacing:1px;margin:6px 0 2px}

/* stage */
.stage-wrap{position:relative;background:#fff;border:3px solid var(--ink)}
.stage-wrap.dark{background:var(--dark)}
.stage-wrap canvas{display:block;width:100%;max-height:480px}
#heightCanvas{image-rendering:auto}
.stage-status{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:11px;font-weight:900;letter-spacing:2px;padding:8px 12px}
.stage-wrap.dark .stage-status{background:var(--red)}

/* controls */
.controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:640px){.controls{grid-template-columns:1fr}}
.ctl{background:#fff;border:3px solid var(--ink);padding:12px 14px;display:block}
.ctl span{font-size:11px;font-weight:900;letter-spacing:1.5px;display:block;margin-bottom:8px}
.ctl span b{color:var(--red)}
.ctl input[type=range]{width:100%;accent-color:var(--red)}
.ctl.check{display:flex;align-items:center;gap:10px;cursor:pointer}
.ctl.check span{margin:0}
.ctl.check input{width:20px;height:20px;accent-color:var(--red)}

/* specs */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
@media(max-width:640px){.specs{grid-template-columns:1fr 1fr}}
.spec{background:var(--ink);color:#fff;padding:12px}
.spec .k{font-size:10px;font-weight:900;letter-spacing:2px;color:#bbb}
.spec .v{font-size:20px;font-weight:900;margin-top:4px}

/* done */
.done-card{background:#fff;border:4px solid var(--ink);padding:28px}
.done-title{font-size:13px;font-weight:900;letter-spacing:3px;color:var(--grey)}
.done-file{font-size:34px;font-weight:900;letter-spacing:-1px;margin:8px 0}
.done-specs{font-size:13px;font-weight:700;color:#444;margin-bottom:8px}
.print-tips{margin-top:26px;border:3px solid var(--ink);padding:20px;background:#fff}
.print-tips h3{font-size:13px;font-weight:900;letter-spacing:3px;margin-bottom:10px;color:var(--red)}
.print-tips ul{margin-left:20px;font-size:14px;line-height:1.9}

/* footer */
.foot{margin-top:70px}
.foot .rule{height:8px;background:var(--ink);margin-bottom:12px}
.foot-row{display:flex;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:2px;color:var(--grey)}