:root{
  --ground:      #E6DFF1;
  --ground-deep: #D6CAE9;
  --ground-line: #CFC2E4;
  --ink:   #241A33;
  --ink-2: #6A5C85;
  --plastic:      #F8F3FC;
  --plastic-mid:  #E5DBF0;
  --plastic-edge: #B7A6D0;
  --plastic-deep: #9A86B9;
  --signal: #D42A5B;   
  --jade:   #0E9E86;   
  --r-none: 0px;
  --r-part: 14px;
  --r-pill: 999px;
  --sans: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2,.8,.24,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ground); }
body{
  min-height:100svh;
  background:
    repeating-linear-gradient(118deg, rgba(36,26,51,.030) 0 1px, transparent 1px 9px),
    radial-gradient(120% 80% at 18% 0%, #EFE9F8 0%, var(--ground) 58%, var(--ground-deep) 100%);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.film{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.24'/></svg>");
}
.sheet{
  max-width:1340px; margin:0 auto; padding:20px 26px 26px;
  display:grid; gap:16px 22px;
  grid-template-columns:1fr 560px 1fr;
  grid-template-areas:
    "top   top   top"
    "side  bay   tray"
    "foot  foot  foot";
  align-items:start;
}
.top{ grid-area:top; display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      border-bottom:1px solid var(--ground-line); padding-bottom:12px; }
.side{ grid-area:side; padding-top:18px; }
.bay{ grid-area:bay; }
.tray-col{ grid-area:tray; padding-top:18px; }
.rail-foot{ grid-area:foot; }
.handle{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
         color:var(--ink-2); text-transform:uppercase; }
.word{ font-family:var(--sans); font-weight:800; font-size:clamp(30px,4.4vw,52px);
       letter-spacing:-.035em; line-height:.95; margin-top:4px; }
.lang{ display:flex; border:1.5px solid var(--ink); }
.lang-b{
  min-height:44px; min-width:48px; padding:0 12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  background:transparent; color:var(--ink); border:0; cursor:pointer;
  border-radius:var(--r-none);
}
.lang-b + .lang-b{ border-left:1.5px solid var(--ink); }
.lang-b[aria-pressed="true"]{ background:var(--ink); color:var(--ground); }
.tag{ font-size:clamp(15px,1.35vw,19px); line-height:1.35; max-width:23ch;
      letter-spacing:-.012em; color:var(--ink); }
.tabs{ display:flex; flex-direction:column; gap:0; margin-top:26px;
       border-top:1px solid var(--ground-line); }
.tab{
  display:flex; align-items:center; gap:12px;
  min-height:52px; padding:0 4px; width:100%;
  background:transparent; border:0; border-bottom:1px solid var(--ground-line);
  border-radius:var(--r-none);
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--ink-2); cursor:pointer; text-align:left;
  transition:color .18s var(--ease), padding-left .18s var(--ease);
}
.tab .l{
  font-family:var(--sans); font-weight:800; font-size:20px; letter-spacing:-.02em;
  width:26px; color:var(--plastic-deep);
  transition:color .18s var(--ease);
}
.tab .n{ flex:1; }
.tab .c{ font-size:11px; color:var(--plastic-deep); }
.tab:hover{ color:var(--ink); padding-left:8px; }
.tab[aria-current="true"]{ color:var(--ink); }
.tab[aria-current="true"] .l{ color:var(--signal); }
.tab[aria-current="true"] .c{ color:var(--signal); }
.hint{ margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
       color:var(--ink-2); max-width:26ch; line-height:1.6; }
.hint::before{ content:"▸ "; color:var(--signal); }
.bay3d{ position:relative; perspective:1600px; }
.sprue{
  display:block; width:560px; height:min(690px, calc(100vh - 214px));
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  filter:drop-shadow(0 26px 30px rgba(36,26,51,.20));
}
@media (prefers-reduced-motion:no-preference){
  .sprue{ transition:transform .5s var(--ease); }
  .bay3d.live .sprue{ transition:transform .08s linear; }
}
.rail{ fill:var(--plastic); stroke:var(--plastic-edge); stroke-width:1.4; }
.strut{ fill:var(--plastic-mid); stroke:var(--plastic-edge); stroke-width:1.1; }
.mould-t{ font-family:var(--mono); font-size:15px; letter-spacing:.13em;
          fill:var(--plastic-deep); }
.mould-t.big{ font-size:26px; letter-spacing:.05em; fill:var(--plastic-deep); font-weight:500; }
.ta-e{ text-anchor:end; }
.spent-f{ fill:none; stroke:var(--plastic-deep); stroke-width:2; }
.spent-fill{ fill:var(--ground-deep); }
.spent{ cursor:default; }
.spent .yr{ font-family:var(--mono); font-size:14px; fill:var(--ink-2);
            text-anchor:end; visibility:hidden; opacity:0; }
@media (hover:hover){
  .spent{ transition:transform .3s var(--ease); }
  .spent:hover{ transform:translate(-16px,-6px); }
  .spent:hover .yr{ visibility:visible; opacity:1; transition:opacity .25s .05s var(--ease); }
}
.qc{ cursor:pointer; }
.qc-ring{ fill:var(--plastic); stroke:var(--plastic-deep); stroke-width:2; }
.qc-ring.in{ fill:none; stroke:var(--plastic-edge); stroke-width:1.2; }
.qc-n{ font-family:var(--sans); font-weight:800; font-size:26px; text-anchor:middle;
       fill:var(--plastic-deep); letter-spacing:-.02em; }
.qc-s{ font-family:var(--mono); font-size:11px; text-anchor:middle; fill:var(--plastic-edge);
       letter-spacing:.18em; }
.qc:hover .qc-ring{ stroke:var(--signal); }
.qc:hover .qc-n{ fill:var(--signal); }
.qc.pressed{ transform:translateY(2px) scale(.965); transform-origin:439px 68px; }
.qc:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
@media (prefers-reduced-motion:no-preference){
  .qc{ transition:transform .12s var(--ease); }
}
.ink{
  position:absolute; left:2%; bottom:6%;
  transform:rotate(-6.5deg) scale(1.12);
  visibility:hidden; opacity:0;
  max-width:min(300px,74%);
  padding:12px 14px;
  border:2.5px solid var(--jade); border-radius:var(--r-part);
  color:var(--jade); background:transparent;
  font-family:var(--mono); font-size:12px; line-height:1.55; letter-spacing:.03em;
  mix-blend-mode:multiply; z-index:5;
}
.ink::before{
  content:""; position:absolute; inset:3px; border:1px solid var(--jade); opacity:.5;
  border-radius:8px; pointer-events:none;
}
.ink.inked{ visibility:visible; opacity:.92; transform:rotate(-6.5deg) scale(1); }
@media (prefers-reduced-motion:no-preference){
  .ink{ transition:opacity .16s var(--ease), transform .22s var(--ease); }
}
.part{ cursor:pointer; }
.part:focus-visible{ outline:none; }
.part:focus-visible .pocket{ stroke:var(--signal); stroke-width:2; opacity:.6; }
.pocket{ opacity:.5; }
.p-cut-img{ pointer-events:none; }
.p-art{ pointer-events:none; }
.p-hole{ fill:var(--ground); stroke:var(--plastic-deep); stroke-width:1.3; opacity:.92; }
.p-ring{ fill:none; stroke:#8C7FA6; stroke-width:2.6; opacity:.85; }
.p-paper{ fill:#FCFAFF; stroke:var(--plastic-edge); stroke-width:1; }
.p-card{ fill:#FFFDFF; stroke:var(--plastic-edge); stroke-width:1; }
.p-plate{ stroke:none; }
.p-cap{ font-family:var(--mono); font-size:8.5px; text-anchor:middle;
        fill:var(--ink); opacity:.5; letter-spacing:.09em; }
.p-code{ font-family:var(--mono); font-size:13px; text-anchor:middle;
         fill:var(--ink); opacity:.32; letter-spacing:.1em; }
.p-sheen{ pointer-events:none; }
@media (prefers-reduced-motion:no-preference){
  .part .p-body{ transition:transform .22s var(--ease); }
}
@media (hover:hover){
  .part:hover .p-body{ transform:translateY(-5px); }
  .part:hover .pocket{ opacity:.68; }
}
.gate{ fill:var(--plastic-mid); stroke:var(--plastic-edge); stroke-width:1; }
.gate-cut{ fill:var(--signal); opacity:0; }
.part.gone{ cursor:pointer; }
.part.gone .p-body{ opacity:0; transform:translateY(10px) scale(.94); }
.part.gone .p-ghost{ opacity:1; }
.p-ghost{
  fill:none; stroke:var(--plastic-deep); stroke-width:1.5; stroke-dasharray:5 7;
  opacity:0; stroke-linejoin:round;
}
@media (prefers-reduced-motion:no-preference){
  .part .p-body{ transition:transform .26s var(--ease), opacity .2s var(--ease); }
  .p-ghost{ transition:opacity .3s .1s var(--ease); }
  .gate-cut{ transition:opacity .2s .12s var(--ease); }
}
.part.gone ~ .gates .gate-cut, .gate-cut.shown{ opacity:1; }
@keyframes jolt{
  0%{ transform:translateY(-4px) rotate(0deg); }
  35%{ transform:translateY(-2px) rotate(2.6deg); }
  100%{ transform:translateY(14px) rotate(-9deg) scale(.9); opacity:0; }
}
@media (prefers-reduced-motion:no-preference){
  .part.snapping .p-body{ animation:jolt .3s var(--ease) forwards; }
}
@keyframes swapin{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  #parts.swap{ animation:swapin .3s var(--ease); }
}
.well{
  position:relative;
  border:1.5px solid var(--plastic-edge);
  border-radius:var(--r-part);
  background:
    linear-gradient(180deg, var(--ground-deep), var(--ground));
  box-shadow:
    inset 0 10px 20px -6px rgba(90,68,124,.34),
    inset 0 2px 4px rgba(90,68,124,.22),
    inset 0 -2px 0 rgba(255,255,255,.62);
  min-height:min(560px, calc(100vh - 320px));
  padding:16px;
  overflow:hidden;
}
.well-lip{
  position:absolute; left:14%; right:14%; top:16%; bottom:20%;
  border:1.5px dashed var(--plastic-edge); opacity:.5;
  border-radius:44% 44% 40% 40% / 46% 46% 40% 40%;
}
.well.full .well-lip{ display:none; }
.well-hint{
  position:absolute; left:16%; right:16%; top:50%; transform:translateY(-50%);
  margin:0; text-align:center;
  font:400 12px/1.5 var(--mono); letter-spacing:.06em;
  color:var(--ink-2); opacity:.75;
}
.well.full .well-hint{ display:none; }
.tray{ position:relative; z-index:2; height:100%; }
.deck{ position:relative; height:100%; }
.dcard{
  background:linear-gradient(180deg,#FBF8FF,#F0EAF8);
  border:1.5px solid var(--plastic-edge);
  border-radius:var(--r-part);
  box-shadow:0 6px 18px rgba(70,50,104,.13);
  padding:14px;
}
.dcard.back{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#FBF8FF,var(--tint,#F0EAF8));
}
.b1{ transform:translateY(9px) scale(.968); opacity:.85; z-index:1; }
.b2{ transform:translateY(18px) scale(.936); opacity:.55; z-index:0; }
.dcard.lead{
  position:relative; z-index:2;
  min-height:100%;
  display:flex; flex-direction:column; gap:12px;
  cursor:grab;
  touch-action:pan-y;              
  will-change:transform;
  user-select:none; -webkit-user-select:none;
}
.dcard.lead.dragging{ cursor:grabbing; }
@media (prefers-reduced-motion:no-preference){
  .dcard.lead{ transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .dcard.lead.dragging{ transition:none; }   
}
.dcard.lead.fly-r{ transform:translateX(460px) rotate(19deg) !important; opacity:0; }
.dcard.lead.fly-l{ transform:translateX(-460px) rotate(-19deg) !important; opacity:0; }
.sw-tag{
  position:absolute; top:12px; z-index:3; pointer-events:none; opacity:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 10px; border-radius:var(--r-pill);
  border:1.5px solid var(--signal); color:var(--signal);
  background:rgba(255,255,255,.9);
}
.sw-tag.l{ left:12px; }
.sw-tag.r{ right:12px; }
@media (prefers-reduced-motion:no-preference){
  .tray{ animation:drop .34s var(--ease); }
}
@keyframes drop{
  from{ opacity:0; transform:translateY(-26px) rotate(-5deg) scale(.9); }
  to{ opacity:1; transform:none; }
}
.tilt{ transform-style:preserve-3d; }
.tray-svg{ display:block; width:100%; height:216px; transform-style:preserve-3d; }
@media (prefers-reduced-motion:no-preference){
  .tray-svg{ transition:transform .16s var(--ease); }
}
.tray .p-hole{ fill:#EFE9F8; }
.t-code{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--signal); }
.t-name{ font-family:var(--sans); font-weight:800; font-size:clamp(21px,2vw,28px);
         letter-spacing:-.028em; line-height:1.02; }
.t-nya{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  border:1.5px solid var(--ink); border-radius:var(--r-pill);
  padding:5px 11px;
}
.t-rows{ border-top:1px solid var(--plastic-edge); }
.t-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0;
        border-bottom:1px solid var(--plastic-edge); font-size:13px; }
.t-row dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-2);
           text-transform:uppercase; padding-top:2px; }
.t-row dd{ text-align:right; font-weight:600; }
.t-acts{ margin-top:auto; display:flex; gap:8px; }
.t-shop{
  flex:1; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:var(--ground); text-decoration:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  border-radius:var(--r-none);
}
.t-shop:hover{ background:var(--signal); }
.t-close{
  min-height:46px; min-width:46px; background:transparent; cursor:pointer;
  border:1.5px solid var(--plastic-edge); color:var(--ink-2);
  font-family:var(--mono); font-size:14px; border-radius:var(--r-none);
}
.t-close:hover{ border-color:var(--signal); color:var(--signal); }
.rail-foot{ border-top:1px solid var(--ground-line); padding-top:14px; display:flex; }
.buy{
  min-height:52px; display:inline-flex; align-items:center; gap:12px;
  padding:0 26px; text-decoration:none;
  background:var(--signal); color:#fff;
  font-family:var(--mono); font-size:13px; letter-spacing:.13em;
  border-radius:var(--r-none);
  transition:transform .18s var(--ease);
}
.buy:hover{ transform:translateX(6px); }
.buy svg{ transition:transform .18s var(--ease); }
.buy:hover svg{ transform:translateX(4px); }
@media (max-width:900px){
  .sheet{
    display:block; max-width:none; padding:12px 12px 84px;
  }
  .top{ padding-bottom:10px; }
  .word{ font-size:34px; }
  .side{ padding-top:12px; }
  .tag{ font-size:15px; max-width:30ch; }
  .tabs{ flex-direction:row; gap:6px; margin-top:14px; border-top:0;
         overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{
    flex:0 0 auto; min-height:48px; padding:0 13px; gap:8px;
    border:1.5px solid var(--plastic-edge); border-bottom:1.5px solid var(--plastic-edge);
    background:rgba(255,255,255,.42);
  }
  .tab .n{ flex:0 0 auto; }
  .tab .c{ display:none; }
  .tab .l{ width:auto; font-size:17px; }
  .tab[aria-current="true"]{ background:var(--ink); color:var(--ground); border-color:var(--ink); }
  .tab[aria-current="true"] .l{ color:#fff; }
  .bay{ margin-top:10px; }
  .sprue{ width:100%; height:min(58vh,500px); }
  .hint{ margin-top:10px; text-align:center; max-width:none; }
  .tray-col{ padding:0; }
  .well{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    min-height:0; max-height:78svh; overflow-y:auto;
    border:0; border-top:2px solid var(--ink);
    border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,#F3EDFA,#E6DFF1);
    box-shadow:0 -18px 40px rgba(36,26,51,.24);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    display:none;
  }
  .well.full{ display:block; }
  .well-lip{ display:none; }
  .tray-svg{ height:168px; }
  .dcard.lead{ min-height:0; }
  .dcard{ padding:12px; }
  .b1{ transform:translateY(7px) scale(.975); }
  .b2{ transform:translateY(14px) scale(.95); }
  .rail-foot{ position:fixed; left:0; right:0; bottom:0; z-index:30;
              border-top:1.5px solid var(--ink); padding:0; background:var(--ground); }
  .buy{ flex:1; justify-content:center; min-height:60px; }
  .buy:hover{ transform:none; }
  .ink{ left:auto; right:2%; bottom:2%; font-size:11px; max-width:64%; }
}
@media (max-width:400px){
  .word{ font-size:30px; }
  .tag{ font-size:14px; }
}
.part.gone .p-art, .part.gone .p-cut-img{ opacity:0; }
.t-nav{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.t-step{
  min-width:44px; min-height:44px;
  display:grid; place-items:center;
  background:var(--plastic); color:var(--ink);
  border:1.5px solid var(--plastic-edge); border-radius:var(--r-part);
  font:500 15px/1 var(--mono); cursor:pointer;
  transition:background .14s var(--ease), transform .14s var(--ease);
}
.t-step:hover{ background:#fff; }
.t-step:active{ transform:translateY(1px); }
.t-step:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }
.t-of{
  font:400 11.5px/1 var(--mono); letter-spacing:.08em;
  color:var(--ink-2); margin-left:2px;
}