/* ---------- shared page pieces ---------- */
main#app{ outline:none; min-height:60vh; }
.page{ padding-block:44px 90px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.crumbs a{ text-decoration:none; color:var(--cyan); }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span.sep{ color:var(--magenta); }
.phead{ margin-bottom:34px; }
.phead .eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); }
.phead .eyebrow::before{ content:"> "; color:var(--cyan); }
.phead h1{ font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; margin-top:12px; }
.phead p{ color:#A9C0C8; margin-top:14px; max-width:62ch; font-size:1.02rem; }
.row-between{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.mt{ margin-top:34px; }
a.plain{ text-decoration:none; }
.sec{ padding-block:0 70px; }
.sec-title{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.sec-title h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; }
.sec-title a.more{ font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); text-decoration:none; }
.sec-title a.more:hover{ text-decoration:underline; }

/* ---------- sprite tiles ---------- */
.sp{ position:relative; width:100%; aspect-ratio:1; background-color:#fff; background-repeat:no-repeat; }
.dsp{ width:100%; aspect-ratio:1; background-repeat:no-repeat; }

/* ---------- product + collection grids ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pcard{ background:var(--panel); border:1px solid var(--line-soft); text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s, transform .15s; position:relative; }
.pcard:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.pcard .pb{ padding:12px 14px 15px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pcard .pk{ font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pcard .pt{ font-weight:600; font-size:.95rem; line-height:1.25; }
.pcard .pp{ font-family:"JetBrains Mono",monospace; font-size:.82rem; color:var(--cyan); margin-top:auto; padding-top:4px; }
.pcard .sold{ position:absolute; top:10px; left:10px; background:#000; color:var(--magenta); border:1px solid var(--magenta); font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; z-index:2; }
@media (max-width:1000px){ .pgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .pgrid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media (max-width:380px){ .pgrid{ grid-template-columns:1fr; } }

.ctiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ctile{ display:flex; flex-direction:column; text-decoration:none; background:var(--panel); border:1px solid var(--line-soft); transition:border-color .15s, transform .15s; }
.ctile:hover{ border-color:var(--magenta); transform:translateY(-2px); }
.ctile .ct{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px; }
.ctile .t{ font-family:"Chakra Petch",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.92rem; line-height:1.15; }
.ctile .n{ font-family:"JetBrains Mono",monospace; font-size:.68rem; color:var(--cyan); letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:1000px){ .ctiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .ctiles{ grid-template-columns:repeat(2,1fr); } }

.toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:22px; padding:14px 16px; background:rgba(7,12,20,.8); border:1px solid var(--line-soft); }
.toolbar .field{ flex:1 1 180px; }
.toolbar .field.sm{ flex:0 1 190px; }
.toolbar .count{ font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-left:auto; }
.empty{ padding:40px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); }
.loadmore{ display:flex; justify-content:center; margin-top:28px; }

/* ---------- product page ---------- */
.pdp{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:start; }
.pdp-view{ position:relative; overflow:hidden; border:1px solid var(--line); }
.pdp-view .c{ position:absolute; width:18px; height:18px; border:2px solid #0A8FA0; z-index:3; }
.pdp-view .c.tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.pdp-view .c.tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.pdp-view .c.bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.pdp-view .c.br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.pdp-info{ padding:26px; display:flex; flex-direction:column; gap:18px; }
.pdp-info h1{ font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700; }
.pdp-kicker{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); }
.pdp-price{ font-family:"Chakra Petch",sans-serif; font-size:2rem; font-weight:700; color:var(--cyan); }
.pdp-price s{ color:var(--muted); font-size:1.1rem; margin-left:10px; font-weight:500; }
.opt label.lbl{ display:block; font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.opts{ display:flex; flex-wrap:wrap; gap:8px; }
.optbtn{ font-family:"Barlow",sans-serif; font-size:.9rem; font-weight:600; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:9px 14px; cursor:pointer; }
.optbtn:hover{ border-color:var(--cyan); }
.optbtn[aria-pressed="true"]{ border-color:var(--cyan); background:rgba(18,232,251,.14); box-shadow:inset 0 -2px 0 var(--magenta); }
.optbtn[disabled]{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); width:max-content; }
.qty button{ width:40px; height:40px; background:transparent; border:0; color:var(--cyan); font-size:1.2rem; cursor:pointer; }
.qty button:hover{ background:rgba(18,232,251,.1); }
.qty span{ min-width:44px; text-align:center; font-family:"JetBrains Mono",monospace; }
.pdp-desc{ color:#B4CAD2; font-size:.95rem; line-height:1.65; white-space:pre-line; }
.stock{ font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.stock.in{ color:var(--ok); }
.stock.out{ color:#FF5C8A; }
.fine{ font-size:.8rem; color:var(--muted); line-height:1.5; }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }

/* ---------- hat builder ---------- */
.stepper{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.stepper button{ display:flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-soft); padding:9px 16px; background:rgba(7,12,20,.7); cursor:pointer; }
.stepper button b{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; background:rgba(18,232,251,.12); color:var(--cyan); border-radius:50%; font-size:.72rem; }
.stepper button.on{ color:var(--text); border-color:var(--cyan); }
.stepper button.on b{ background:var(--cyan); color:#021014; }
.stepper button.done b{ background:var(--ok); color:#021014; }
.stepper button[disabled]{ opacity:.45; cursor:not-allowed; }
.builder{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:start; }
.b-preview{ position:sticky; top:86px; }
.stage{ position:relative; overflow:hidden; background:#fff; aspect-ratio:1; }
.stage .c{ position:absolute; width:18px; height:18px; border:2px solid #0A8FA0; z-index:5; }
.stage .c.tl{ top:12px; left:12px; border-right:0; border-bottom:0; }
.stage .c.tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.stage .c.bl{ bottom:12px; left:12px; border-right:0; border-top:0; }
.stage .c.br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.stage::after{ content:""; position:absolute; left:0; right:0; height:26%; top:-40%; background:linear-gradient(to bottom, transparent, rgba(18,232,251,.22), transparent); animation:scan 6s linear infinite; z-index:4; pointer-events:none; }
.stage .sp{ position:absolute; inset:0; }
.patch{ position:absolute; width:23%; aspect-ratio:1; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:left .25s, top .25s, border-radius .25s; }
.patch.circle{ border-radius:50%; }
.patch.square{ border-radius:7%; }
.patch.hexagon{ clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); box-shadow:none; }
.patch.contour{ border-radius:44% 56% 48% 52% / 54% 44% 56% 46%; }
.patch .dsp{ width:80%; background-size:contain; }
.patch .dsp-inner{ width:80%; aspect-ratio:1; background-repeat:no-repeat; }
.patch.empty::before{ content:"ART"; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.7rem; letter-spacing:.1em; color:rgba(0,0,0,.45); }
.b-summary{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.b-summary .nm{ font-family:"Chakra Petch",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.2rem; }
.b-summary .ln{ font-family:"JetBrains Mono",monospace; font-size:.74rem; color:var(--muted); letter-spacing:.04em; display:flex; justify-content:space-between; gap:10px; }
.b-summary .ln b{ color:var(--text); font-weight:500; text-align:right; }
.b-panel{ padding:22px; }
.b-panel h2{ font-size:1.5rem; font-weight:700; }
.b-panel .sub{ color:#A9C0C8; margin:6px 0 20px; font-size:.95rem; }
.styles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.scard{ text-align:left; background:var(--panel); border:1px solid var(--line-soft); color:var(--text); cursor:pointer; padding:0; display:flex; flex-direction:column; }
.scard:hover{ border-color:var(--cyan); }
.scard[aria-pressed="true"]{ border-color:var(--cyan); box-shadow:inset 0 -3px 0 var(--magenta); }
.scard .sb{ padding:10px 12px 13px; display:flex; flex-direction:column; gap:3px; }
.scard .nm{ font-family:"Chakra Petch",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; line-height:1.15; }
.scard .pr{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--cyan); }
.scard .tg{ font-size:.76rem; color:var(--muted); }
.colors{ display:flex; flex-wrap:wrap; gap:10px; }
.cbtn{ width:92px; background:var(--panel); border:1px solid var(--line-soft); color:var(--text); cursor:pointer; padding:0; text-align:center; display:flex; flex-direction:column; }
.cbtn:hover{ border-color:var(--cyan); }
.cbtn[aria-pressed="true"]{ border-color:var(--cyan); box-shadow:inset 0 -3px 0 var(--magenta); }
.cbtn .cn{ font-size:.72rem; padding:6px 4px 8px; font-weight:600; line-height:1.15; }
.cbtn[disabled]{ opacity:.45; cursor:not-allowed; }
.group{ margin-top:22px; }
.group > label.lbl, .group > .lbl{ display:block; font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg button{ font-family:"Barlow",sans-serif; font-size:.9rem; font-weight:600; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:9px 14px; cursor:pointer; }
.seg button:hover{ border-color:var(--cyan); }
.seg button[aria-pressed="true"]{ border-color:var(--cyan); background:rgba(18,232,251,.14); box-shadow:inset 0 -2px 0 var(--magenta); }
.pcolors{ display:flex; flex-wrap:wrap; gap:8px; }
.pc{ width:36px; height:36px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; }
.pc:hover{ border-color:var(--cyan); }
.pc[aria-pressed="true"]{ border-color:#fff; box-shadow:0 0 0 2px var(--magenta); }
.dpick{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:340px; overflow-y:auto; padding:4px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.dpick button{ padding:4px; background:#E6ECF0; border:2px solid transparent; cursor:pointer; }
.dpick button:hover{ border-color:var(--cyan); }
.dpick button[aria-pressed="true"]{ border-color:var(--magenta); background:#fff; }
.agree{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:#B4CAD2; margin-top:20px; }
.agree input{ margin-top:4px; width:18px; height:18px; accent-color:#12E8FB; }
.b-nav{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft); }
.sel-box{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px; align-items:center; margin-bottom:24px; padding:14px 18px; background:linear-gradient(135deg, rgba(18,232,251,.07), rgba(243,12,254,.05) 70%), var(--panel-2); border:1px solid var(--line); z-index:6; }
.sel-prev{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.sel-prev span{ font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sel-prev .patch-prev-art{ width:96px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(0,0,0,.8), 0 0 0 2px rgba(18,232,251,.4); transition:border-radius .25s, background .25s; }
.sel-prev .patch-prev-art.circle{ border-radius:50%; }
.sel-prev .patch-prev-art.square{ border-radius:8%; }
.sel-prev .patch-prev-art.hexagon{ clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); box-shadow:none; }
.sel-prev .patch-prev-art.contour{ border-radius:44% 56% 48% 52% / 54% 44% 56% 46%; }
.sel-prev .patch-prev-art .dsp-inner{ width:80%; aspect-ratio:1; background-repeat:no-repeat; }
.sel-prev .patch-prev-art.empty::before{ content:"ART"; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.66rem; letter-spacing:.1em; color:rgba(0,0,0,.45); }
.sel-main{ min-width:0; }
.s3-title{ font-size:1.5rem; margin:0; }
.sel-head{ display:flex; align-items:center; gap:8px; font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.sel-head i{ display:inline-block; width:8px; height:8px; background:var(--magenta); box-shadow:0 0 8px var(--magenta); }
.sel-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
.sel-item{ border-top:1px solid var(--line-soft); padding-top:8px; }
.sel-item .k{ font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sel-item .v{ display:flex; align-items:center; gap:8px; margin-top:5px; min-height:24px; font-weight:600; font-size:.9rem; line-height:1.2; }
.sel-item .none{ color:var(--muted); font-weight:500; }
.sel-thumb{ width:36px; height:36px; flex:none; background:#E6ECF0; padding:2px; }
.sel-sw{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); flex:none; }
.sel-shape{ width:20px; height:20px; flex:none; background:var(--cyan); }
.sel-shape.circle{ border-radius:50%; }
.sel-shape.square{ border-radius:3px; }
.sel-shape.hexagon{ clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.sel-shape.contour{ border-radius:44% 56% 48% 52% / 54% 44% 56% 46%; }
@media (min-width:961px){ .sel-box{ position:sticky; top:78px; } }
@media (max-width:640px){
  .sel-box{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .sel-prev{ flex-direction:row; justify-content:flex-start; gap:14px; }
  .sel-prev .patch-prev-art{ width:84px; }
  .sel-prev span{ font-size:.66rem; }
}
@media (max-width:640px){
  .sel-grid{ gap:10px 14px; }
  .sel-item .v{ font-size:.84rem; min-height:20px; }
  .sel-prev .patch-prev-art{ width:72px; }
}
.note-box{ margin-top:16px; padding:12px 14px; border:1px dashed var(--line); color:var(--muted); font-size:.84rem; line-height:1.5; }
@media (max-width:960px){
  .builder{ grid-template-columns:1fr; }
  .b-preview{ position:static; }
  .dpick{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- designs page ---------- */
.dgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dcard{ border:1px solid var(--line-soft); background:var(--panel); display:flex; flex-direction:column; }
.dcard .dv{ padding:14px; background:#E6ECF0; }
.dgrid.dark .dv{ background:#3A4652; }
.dgrid.check .dv{ background:conic-gradient(#d6dde2 25%,#fff 0 50%,#d6dde2 0 75%,#fff 0) 0 0/20px 20px; }
.dcard .db{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.dcard .dn{ font-weight:600; font-size:.88rem; line-height:1.2; }
.dcard a.use{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); text-decoration:none; }
.dcard a.use:hover{ color:var(--magenta); }
@media (max-width:1000px){ .dgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .dgrid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- service pages ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc-card{ text-decoration:none; background:var(--panel); border:1px solid var(--line-soft); padding:24px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s; }
.svc-card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.svc-card .n{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--magenta); letter-spacing:.12em; }
.svc-card h3{ font-size:1.35rem; font-weight:700; }
.svc-card p{ margin:0; color:#A9C0C8; font-size:.92rem; }
.svc-card .go{ margin-top:auto; padding-top:8px; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); }
@media (max-width:900px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-detail{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start; }
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.steps3 div{ border:1px solid var(--line-soft); background:rgba(7,12,20,.7); padding:16px; font-size:.9rem; color:#B4CAD2; }
.steps3 b{ display:block; font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--text); margin-bottom:4px; }
@media (max-width:900px){ .svc-detail{ grid-template-columns:1fr; } .steps3{ grid-template-columns:1fr; } }

/* ---------- home teasers ---------- */
.teasers{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tease{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.tease h3{ font-size:1.6rem; font-weight:700; }
.tease p{ margin:0; color:#A9C0C8; }
.mini{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mini .sp, .mini .dsp{ border:1px solid var(--line-soft); }
.mini .dwrap{ background:#E6ECF0; padding:6px; border:1px solid var(--line-soft); }
@media (max-width:860px){ .teasers{ grid-template-columns:1fr; } }
.cta-band{ padding:34px; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.cta-band h2{ font-size:clamp(1.7rem,4vw,2.6rem); font-weight:700; }
.cta-band p{ margin:0; color:#A9C0C8; max-width:56ch; }

/* ---------- footer columns ---------- */
.foot-cols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; text-align:left; margin-bottom:30px; }
.foot-cols h4{ font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin:0 0 12px; font-weight:500; }
.foot-cols a{ display:block; text-decoration:none; color:var(--muted); font-size:.9rem; padding-block:4px; }
.foot-cols a:hover{ color:#fff; }
.foot-cols p{ color:var(--muted); font-size:.88rem; margin:8px 0 0; max-width:34ch; }
.foot-bottom{ border-top:1px solid var(--line-soft); padding-top:20px; font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; text-align:left; }
@media (max-width:820px){ .foot-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-cols{ grid-template-columns:1fr; } }

#dw-toast{ position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); z-index:100; max-width:min(92vw,460px); background:var(--panel-2); color:var(--text); border:1px solid var(--cyan); box-shadow:0 0 24px rgba(18,232,251,.25); padding:13px 18px; font-family:"JetBrains Mono",monospace; font-size:.8rem; letter-spacing:.03em; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
#dw-toast.show{ opacity:1; transform:translate(-50%,0); }
nav.nav-links a.cur{ opacity:1; border-color:var(--magenta); }
#mobile-menu a.cur{ color:var(--cyan); }

@media (prefers-reduced-motion:reduce){ .stage::after{ animation:none; } }

/* acrylic cutout in the Your build box */
.sel-prev .patch-prev-art.cut{ box-shadow:none; clip-path:none; border-radius:0; background:none; width:112px; }
.sel-prev .patch-prev-art.cut img{ width:100%; height:100%; object-fit:contain; display:block; }
.sel-shape.cutout{ border-radius:42% 58% 55% 45% / 52% 40% 60% 48%; }
.seg button[disabled]{ opacity:.38; cursor:not-allowed; border-color:var(--line-soft); box-shadow:none; }
.seg button[disabled]:hover{ border-color:var(--line-soft); }
.sel-sw.rainbow{ background:conic-gradient(#f30cfe,#12e8fb,#3dffa5,#ffd23d,#ff3b5c,#f30cfe); border-color:rgba(255,255,255,.4); }

/* artwork upload */
.up-drop{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 18px; border:2px dashed var(--line); background:rgba(7,12,20,.6); cursor:pointer; transition:border-color .15s, background .15s; }
.up-drop:hover, .up-drop.over{ border-color:var(--cyan); background:rgba(18,232,251,.08); }
.up-drop svg{ width:34px; height:34px; color:var(--cyan); }
.up-drop b{ font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; }
.up-drop span{ color:var(--muted); font-size:.9rem; }
.up-drop small{ color:var(--muted); font-size:.74rem; line-height:1.45; max-width:44ch; margin-top:4px; }
.up-file{ display:grid; grid-template-columns:84px 1fr auto; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); background:rgba(7,12,20,.6); }
.up-thumb{ width:84px; height:84px; object-fit:contain; background:conic-gradient(#d6dde2 25%,#fff 0 50%,#d6dde2 0 75%,#fff 0) 0 0/16px 16px; }
.up-meta{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.up-meta b{ overflow-wrap:anywhere; font-size:.92rem; }
.up-meta span{ font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ok); }
.up-btns{ display:flex; flex-direction:column; gap:8px; }
.up-btns .btn{ padding:8px 14px; font-size:.76rem; justify-content:center; cursor:pointer; }
.up-send{ padding:16px; border:1px solid var(--line-soft); background:rgba(5,10,17,.6); }
.up-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.up-img{ width:80%; height:80%; object-fit:contain; display:block; }
.sel-prev .patch-prev-art .up-img{ width:80%; height:80%; }
.sel-prev .patch-prev-art.cut img{ width:100%; height:100%; }
@media (max-width:560px){ .up-file{ grid-template-columns:64px 1fr; } .up-thumb{ width:64px; height:64px; } .up-btns{ grid-column:1/-1; flex-direction:row; } }