/* Legomatic — instruction-booklet design language.
   Dark "sprue grey" chrome, light manual pages, the grey parts-callout box. */

:root{
  --ink:#1A1D21; --ink2:#2C3138; --paper:#EFF1F4; --callout:#D5D9E0;
  --red:#D01012; --yellow:#FFCF00; --blue:#006CB7; --green:#00A44F;
  --dim:#8A929E; --line:#B9BFC9;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--ink); color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;
}

header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--ink2)}
.mark{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.02em;font-size:17px}
.dots{display:flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--red)} .dots i:nth-child(2){background:var(--yellow)}
.dots i:nth-child(3){background:var(--blue)} .dots i:nth-child(4){background:var(--green)}

main{max-width:800px;margin:0 auto;padding:24px 16px 64px}
footer{padding:24px 20px;text-align:center;font-family:var(--mono);font-size:11px;color:#5A626D}

h1{font-size:40px;line-height:1.02;letter-spacing:-.035em;margin:0 0 14px;font-weight:900;max-width:13ch}
h1 span{color:var(--yellow)}
.lede{color:var(--dim);font-size:15px;line-height:1.55;max-width:48ch;margin:0}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--dim);margin:0 0 10px}
.eyebrow.hot{color:var(--yellow)}

button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.link{background:0;border:0;color:var(--dim);font-size:12px;font-weight:700}
.hidden{display:none !important}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px;margin:32px 0}
.btn{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;border:0;border-radius:12px;
     font-weight:900;font-size:16px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);text-decoration:none}
.btn .ico{font-size:24px;line-height:1}
.btn.primary{background:var(--yellow);color:var(--ink)}
.btn.ghost{background:var(--ink2);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.3)}

.panel{background:var(--paper);color:var(--ink);border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.35);padding:16px}
.card{background:var(--paper);color:var(--ink);border-radius:12px;overflow:hidden;
      box-shadow:0 8px 20px rgba(0,0,0,.3);border:0;text-align:left;width:100%;display:block;padding:0}
.grid{display:grid;gap:12px}
.grid.tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.part{background:var(--callout);border-radius:8px;padding:10px 6px;display:flex;flex-direction:column;
      align-items:center;justify-content:flex-end;gap:7px;min-height:96px;text-align:center}
.part .sz{font-family:var(--mono);font-size:12px;font-weight:700}
.part .cn{font-size:10px;color:#5E6673;line-height:1.2}
.part .qty{font-family:var(--mono);font-size:11px;font-weight:700}
.part.short{background:#E7D6D6}

/* CSS-drawn brick glyph */
.brick{display:inline-flex;flex-direction:column;align-items:center}
.brick .studs{display:flex;gap:3px;margin-bottom:-1px}
.brick .studs span{display:block;border-radius:3px 3px 0 0;filter:brightness(1.14)}
.brick .body{border-radius:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.22)}

.bar{height:7px;background:var(--callout);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .35s ease}
.bar.warn i{background:var(--yellow)}
.pill{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:4px;background:var(--ink);color:#fff}

.step{display:flex;background:var(--paper);color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.step .n{background:var(--ink);color:var(--yellow);font-family:var(--mono);font-size:19px;font-weight:700;
         padding:16px 0 0;min-width:52px;text-align:center;flex-shrink:0}
.step .body{padding:16px;flex:1}
.step h3{margin:0;font-size:17px;letter-spacing:-.015em}
.step p{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:#3A414B}
.step.done{opacity:.5}
.callout{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;background:var(--callout);
         border-radius:8px;padding:10px 12px;margin-top:12px}
.callout .item{display:flex;align-items:flex-end;gap:6px}
.callout .x{font-family:var(--mono);font-size:12px;font-weight:700}
.check{display:flex;align-items:center;gap:7px;margin-top:12px;background:0;border:0;padding:0}
.box{width:21px;height:21px;border-radius:5px;border:2px solid var(--line);display:flex;
     align-items:center;justify-content:center;font-weight:900;font-size:13px}
.box.on{background:var(--green);border-color:var(--green);color:#fff}

#overlay{width:100%;display:block;border-radius:12px;background:#000}
.scanwrap{position:relative;border-radius:12px;overflow:hidden}
.scanwrap .sweep{position:absolute;left:0;right:0;top:0;height:24%;
  background:linear-gradient(180deg,transparent,rgba(255,207,0,.45),transparent);
  animation:sweep 1.3s ease-in-out infinite alternate}
@keyframes sweep{to{transform:translateY(330%)}}

.calib{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.calib input[type=range]{flex:1;min-width:150px;accent-color:var(--yellow)}
.calib label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:#5E6673;font-weight:700}

.err{display:flex;gap:10px;background:#3A1F20;border:1px solid var(--red);border-radius:10px;
     padding:12px 14px;margin-bottom:20px;color:#F3D3D3;font-size:14px;line-height:1.45}
.note{background:var(--ink2);border-radius:12px;padding:14px 16px;font-size:13.5px;color:#C3C9D2;line-height:1.55}
.note b{color:#fff}
a{color:var(--yellow)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media (max-width:520px){
  h1{font-size:31px}
  .actions{grid-template-columns:1fr}
  main{padding:20px 14px 48px}
}