:root{
  --bg:#fff;
  --ink:#161713;
  --muted:#7b8077;
  --hair:rgba(22,23,19,.10);
  --hair-strong:rgba(22,23,19,.18);
  --red:#ff3b30;
  --red-soft:rgba(255,59,48,.11);
  --green:#1ed760;
  --shadow:0 18px 46px rgba(31,35,27,.10),0 2px 8px rgba(31,35,27,.05);
  --outer:14px;
  --gap:14px;
  --header-h:82px;
  --footer-h:72px;
  --keypad-h:230px;
  --row-gap:10px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;min-height:100vh;background:#f7f8f5;color:var(--ink);display:flex;justify-content:center;overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;-webkit-tap-highlight-color:transparent}
button:focus,[tabindex]:focus{outline:none}
.phone-shell{position:relative;width:min(100vw,430px);height:100dvh;max-height:932px;background:#fff;overflow:hidden}
.header-lane{height:var(--header-h);padding:calc(env(safe-area-inset-top,0px) + 10px) var(--outer) 10px;display:grid;grid-template-columns:48px 1fr 42px;align-items:center;gap:10px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:20;position:relative}
.rr-mark{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#141512,#3e4439);color:white;font-weight:950;letter-spacing:-.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.14)}
.floor-lift{height:52px;display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:5px;border-radius:22px;background:#f4f5f1;border:1px solid rgba(0,0,0,.04)}
.floor-btn{border-radius:17px;font-weight:900;font-size:18px;color:#7b8076;transition:140ms ease}
.floor-btn.is-active{background:#fff;color:#141512;box-shadow:0 6px 16px rgba(20,21,18,.10)}
.case-scroll{height:calc(100dvh - var(--header-h) - var(--footer-h));padding:var(--outer) 0 0;display:grid;grid-template-rows:minmax(166px,1.05fr) minmax(106px,.66fr) minmax(106px,.66fr) auto;gap:var(--gap);overflow-y:auto;scrollbar-width:none;transition:height 200ms ease}
.phone-shell[data-keypad="open"] .case-scroll{height:calc(100dvh - var(--header-h) - var(--footer-h) - var(--keypad-h))}
.case-scroll::-webkit-scrollbar{display:none}
.hero-window{margin:0 var(--outer);border-radius:30px;background:#fff;border:1px solid rgba(0,0,0,.055);box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:0}
.hero-window.is-selected{box-shadow:0 0 0 3px var(--red-soft),var(--shadow);border-color:rgba(255,59,48,.58)}
.blank-sheen{position:absolute;inset:12px;border-radius:24px;background:linear-gradient(135deg,#fafbf8,#fff 62%);border:1px solid rgba(0,0,0,.035)}
.viewport{width:100%;min-height:0;display:grid;grid-template-rows:1fr 20px;gap:7px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:12px var(--outer) 7px;background:#fff;transition:border-color 140ms ease,box-shadow 140ms ease}
.viewport.is-selected{border-top-color:var(--red);border-bottom-color:var(--red);box-shadow:inset 0 1px 0 var(--red-soft),inset 0 -1px 0 var(--red-soft)}
.viewport-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;align-items:center}
.viewport-rail::-webkit-scrollbar{display:none}
.blank-card{flex:0 0 calc((100% - 30px)/4);height:70px;border-radius:20px;background:#fafbf8;border:1px solid var(--hair);box-shadow:0 6px 16px rgba(31,35,27,.035);scroll-snap-align:start}
.page-dots{height:18px;display:flex;align-items:center;justify-content:center;gap:7px}
.page-dot{width:4px;height:4px;border-radius:999px;background:rgba(22,23,19,.24)}
.page-dot.is-active{width:19px;height:4px;background:rgba(22,23,19,.46)}
.bottom-spacer{height:4px}
.keypad-lane{position:absolute;left:0;right:0;bottom:var(--footer-h);height:var(--keypad-h);padding:10px var(--outer) 12px;background:rgba(255,255,255,.96);border-top:1px solid var(--hair);box-shadow:0 -18px 48px rgba(25,28,22,.09);transform:translateY(110%);transition:transform 220ms ease;z-index:15}
.phone-shell[data-keypad="open"] .keypad-lane{transform:translateY(0)}
.keypad-head{height:24px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:850;margin-bottom:8px}
#closeKeypad{width:28px;height:24px;border-radius:12px;background:#f4f5f1;font-size:17px;line-height:1;color:#60655c}
.keypad-grid{--key-gap:10px;height:calc(100% - 32px);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:var(--key-gap)}
.command-key,.arrow-key{border-radius:18px;background:#f9faf7;border:1px solid rgba(0,0,0,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px rgba(31,35,27,.045);font-size:18px;font-weight:850;color:#31342f;transition:120ms ease}
.command-key{color:transparent}
.command-key::after{content:attr(data-slot);font-size:9px;color:rgba(22,23,19,.22);font-weight:850;letter-spacing:.02em}
.command-key:nth-child(7),.command-key:nth-child(8),.command-key:nth-child(9),.arrow-key.up{transform:translateX(var(--key-gap))}
.command-key:nth-child(1){grid-column:1;grid-row:1}.command-key:nth-child(2){grid-column:2;grid-row:1}.command-key:nth-child(3){grid-column:3;grid-row:1}.command-key:nth-child(4){grid-column:4;grid-row:1}.command-key:nth-child(5){grid-column:5;grid-row:1}.command-key:nth-child(6){grid-column:6;grid-row:1}
.command-key:nth-child(7){grid-column:1;grid-row:2}.command-key:nth-child(8){grid-column:2;grid-row:2}.command-key:nth-child(9){grid-column:3;grid-row:2}
.command-key:nth-child(10){grid-column:1;grid-row:3}.command-key:nth-child(11){grid-column:2;grid-row:3}.command-key:nth-child(12){grid-column:3;grid-row:3}
.arrow-key.up{grid-column:5;grid-row:2}.arrow-key.left{grid-column:4;grid-row:3}.arrow-key.down{grid-column:5;grid-row:3}.arrow-key.right{grid-column:6;grid-row:3}
.command-key:active,.arrow-key:active,.floor-btn:active,.footer-action:active{filter:brightness(.96)}
.command-key:nth-child(7):active,.command-key:nth-child(8):active,.command-key:nth-child(9):active,.arrow-key.up:active{transform:translateX(var(--key-gap)) scale(.98)}
.footer-lane{position:absolute;left:0;right:0;bottom:0;height:var(--footer-h);padding:8px var(--outer) calc(env(safe-area-inset-bottom,0px) + 8px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid var(--hair);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:20}
.footer-action{border-radius:22px;background:#f5f6f3;font-weight:900;font-size:14px;letter-spacing:.02em;color:#3b4038}
.play-action{background:var(--green);color:white;box-shadow:0 8px 18px rgba(30,215,96,.18)}
.phone-shell[data-playing="true"] .play-action{background:var(--red)}
@media (max-height:780px){:root{--header-h:76px;--footer-h:66px;--keypad-h:214px;--gap:10px}.blank-card{height:60px}.hero-window{border-radius:26px}.case-scroll{grid-template-rows:minmax(136px,1fr) minmax(88px,.6fr) minmax(88px,.6fr) auto}}


/* HERMIT_ALPHA_GHOST_1 additive-only keypad/ghost socket layer */
.keypad-lane{--top-row-h:28px;}
.keypad-top-row{height:var(--top-row-h);display:flex;justify-content:center;gap:8px;margin:0 0 8px;}
.top-key{width:34px;height:24px;border-radius:12px;background:#f9faf7;border:1px solid rgba(0,0,0,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 5px 12px rgba(31,35,27,.035);font-size:12px;font-weight:900;color:rgba(22,23,19,.54);}
.top-key.is-pulsing,.command-key.is-pulsing,.arrow-key.is-pulsing,.footer-action.is-pulsing{box-shadow:0 0 0 3px rgba(255,59,48,.12),inset 0 1px 0 rgba(255,255,255,.85),0 5px 12px rgba(31,35,27,.035);border-color:rgba(255,59,48,.44);}
.keypad-grid{height:calc(100% - 68px);}
.menu-button{width:42px;height:42px;border-radius:16px;background:#f4f5f1;border:1px solid rgba(0,0,0,.04);font-size:22px;font-weight:900;color:#4e554b;box-shadow:inset 0 1px 0 rgba(255,255,255,.72);}
.side-rail{position:absolute;top:var(--header-h);right:0;bottom:var(--footer-h);width:112px;padding:10px 8px;background:rgba(255,255,255,.96);border-left:1px solid var(--hair);box-shadow:-10px 0 28px rgba(31,35,27,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:18;transform:translateX(calc(100% + 8px));transition:transform 220ms ease,bottom 200ms ease;pointer-events:none;overflow-y:auto;scrollbar-width:none;}
.side-rail::-webkit-scrollbar{display:none;}
.phone-shell[data-keypad="open"] .side-rail{bottom:calc(var(--footer-h) + var(--keypad-h));}
.phone-shell[data-siderail="open"] .side-rail{transform:translateX(0);}
.rail-scrim{display:none;pointer-events:none;}
.side-rail-head{height:34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hair);font-size:9px;text-transform:uppercase;letter-spacing:.10em;font-weight:950;color:rgba(22,23,19,.52);}
#closeSideRail{width:24px;height:24px;border-radius:10px;background:#f4f5f1;font-size:15px;color:#60655c;}
.ghost-panel{margin-top:10px;border-radius:16px;background:#fafbf8;border:1px solid rgba(22,23,19,.08);box-shadow:0 6px 18px rgba(31,35,27,.045);padding:8px;}
.ghost-title{font-size:9px;font-weight:950;letter-spacing:.12em;color:rgba(22,23,19,.42);margin-bottom:7px;text-align:left;}
.ghost-line{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:8px 0;border-top:1px solid rgba(22,23,19,.06);align-items:baseline;}
.ghost-line span{text-transform:uppercase;letter-spacing:.08em;font-weight:850;font-size:8px;color:rgba(22,23,19,.36);}
.ghost-line b{font-size:11px;line-height:1.15;color:#242720;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-height:780px){.keypad-top-row{margin-bottom:6px}.keypad-grid{height:calc(100% - 62px)}}

.side-rail-head,.ghost-panel{pointer-events:auto;}


/* HERMIT_ALPHA_GHOST_2 wiring-only visibility: make voltmeter values readable in slim rail */
.ghost-line{display:block;}
.ghost-line span{display:block;margin-bottom:2px;}
.ghost-line b{display:block;white-space:normal;word-break:break-word;font-size:10px;}

/* Mothership K7.1 module styles — appended only for Floor 1 Hero socket module */
.mothership-module{position:relative;z-index:1;padding:16px 14px 14px;height:100%;min-height:260px;background:#fff;}
.mothership-module .hero-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.mothership-module .eyebrow{margin:0 0 4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:850}
.mothership-module .hero-topline h1{margin:0;font-size:17px;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.mothership-module .selection-pill{height:34px;padding:0 10px;border-radius:999px;background:var(--red-soft);color:var(--red);font-size:11px;font-weight:900;display:flex;align-items:center;white-space:nowrap}
.mothership-stage{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);min-height:220px;background:#fff;display:grid;place-items:center;position:relative;padding:10px 0}.score-wrap{width:100%;height:220px;position:relative}.score-svg{width:100%;height:100%;display:block}.barline{stroke:#151713;stroke-width:2.6;stroke-linecap:round}.meter-text{font-weight:900;fill:#30342f;font-size:15px}.beat-no{font-weight:800;fill:#555b52;font-size:12px}.dir-text{font-weight:900;fill:#4f564e;font-size:11px;letter-spacing:.02em}.slot-hit,.pulse-hit{cursor:pointer}.select-band{fill:rgba(255,59,48,.06);stroke:rgba(255,59,48,.33);stroke-width:1.1}.beat-guide{stroke:rgba(22,23,19,.10);stroke-width:1;stroke-dasharray:2 6}.pulse-dot.free{fill:rgba(22,23,19,.22)}.pulse-dot.occupied{fill:#151713;opacity:.32}.note-head{fill:#151713}.note-head-open{fill:#fff;stroke:#151713;stroke-width:3}.note-stem{stroke:#151713;stroke-width:3.8;stroke-linecap:round}.note-beam{fill:#151713}.sustain-rail{stroke:#151713;stroke-width:5.5;stroke-linecap:round;opacity:.9}.event-label{font-size:9px;fill:#767b72;font-weight:850}.rest-mark{fill:none;stroke:#151713;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.accent-mark{fill:#ff3b30;font-weight:950;font-size:19px}.tie-arc{fill:none;stroke:#151713;stroke-width:2.6;stroke-linecap:round}.dot-mark{fill:#232a34}


/* HERMIT_ALPHA_F1_MOTHERSHIP_K71_KEYPAD_SKIN — labels only, Alpha keypad geometry unchanged */
.command-key.has-skin{
  color:#31342f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:1;
}
.command-key.has-skin::after{content:"";display:none;}
.command-key.has-skin .key-main{font-size:14px;font-weight:950;letter-spacing:-.02em;}
.command-key.has-skin .key-sub{font-size:8px;font-weight:850;color:rgba(22,23,19,.42);letter-spacing:.01em;}
.command-key.has-skin:nth-child(12) .key-main{font-size:19px;}

/* HK_CE_CARTRIDGE_BUILDER_2_SAVE_CLARITY — lifecycle wording + memory-only draft UI */
.cart-box{
  width:100%;
  min-height:100%;
  border-radius:22px;
  background:linear-gradient(135deg,#fafbf8,#fff 68%);
  border:1px solid rgba(22,23,19,.10);
  box-shadow:0 6px 16px rgba(31,35,27,.035);
  padding:12px;
  display:grid;
  align-content:center;
  gap:7px;
}
.hero-window .cart-box{position:absolute;inset:12px;min-height:auto;border-radius:24px;}
.viewport-rail .cart-box{min-width:100%;height:82px;flex:0 0 100%;}
.cart-eyebrow{margin:0;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:950;color:rgba(22,23,19,.42)}
.cart-box h2{margin:0;font-size:18px;letter-spacing:-.04em;line-height:1;color:#171a15}.viewport-rail .cart-box h2{font-size:16px}
.cart-status-line{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:baseline;border-top:1px solid rgba(22,23,19,.06);padding-top:5px;min-width:0}
.cart-status-line span{font-size:8px;text-transform:uppercase;letter-spacing:.10em;font-weight:850;color:rgba(22,23,19,.38)}
.cart-status-line b{font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#20231e}.hero-window .cart-status-line b{font-size:12px}
.cartridge-panel{margin-top:10px;border-radius:16px;background:#fff;border:1px solid rgba(22,23,19,.08);box-shadow:0 6px 18px rgba(31,35,27,.045);padding:8px;pointer-events:auto;}
.cart-panel-title{font-size:9px;font-weight:950;letter-spacing:.12em;color:rgba(22,23,19,.42);margin-bottom:7px;text-align:left;}
.cart-panel-line{display:block;padding:7px 0;border-top:1px solid rgba(22,23,19,.06);}
.cart-panel-line span,.lane-count-control>span{display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;font-size:8px;color:rgba(22,23,19,.36);}
.cart-panel-line b{display:block;white-space:normal;word-break:break-word;font-size:10px;line-height:1.15;color:#242720;font-weight:850;}
.lane-count-control{border-top:1px solid rgba(22,23,19,.06);padding:8px 0 6px;}
.lane-count-control div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.cart-mini,.cart-actions button{border-radius:10px;background:#f4f5f1;border:1px solid rgba(0,0,0,.04);font-size:10px;font-weight:900;color:#3a3f37;min-height:25px;}
.cart-mini.is-active{background:#161713;color:#fff;}
.cart-name-input{width:100%;height:28px;margin:4px 0 7px;border-radius:10px;border:1px solid rgba(22,23,19,.10);background:#fafbf8;padding:0 7px;font:inherit;font-size:10px;font-weight:800;color:#242720;}
.cart-actions{display:grid;grid-template-columns:1fr;gap:5px;}
.cart-actions button:disabled{opacity:.38;}

.cart-panel-note,.cart-save-warning{margin:6px 0;padding:6px 7px;border-radius:10px;background:#fafbf8;border:1px solid rgba(22,23,19,.06);font-size:9px;line-height:1.2;color:rgba(22,23,19,.60);font-weight:800;}
.cart-input-label{display:block;margin:7px 0 3px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;font-size:8px;color:rgba(22,23,19,.36);}
.cart-name-input:focus{outline:0;border-color:rgba(255,59,48,.42);box-shadow:0 0 0 3px rgba(255,59,48,.08);background:#fff;}

/* HK_CE_MODULE_LIBRARY_MOTHERSHIP_1 — loadable module library proof */
.module-library-panel{
  margin:8px 0;
  padding:7px;
  border-radius:14px;
  background:#fafbf8;
  border:1px solid rgba(22,23,19,.07);
}
.module-library-card{
  display:grid;
  gap:5px;
  padding:7px 0;
  border-top:1px solid rgba(22,23,19,.06);
}
.module-library-card b{
  display:block;
  font-size:10px;
  line-height:1.1;
  color:#20231e;
  font-weight:950;
}
.module-library-card span{
  display:block;
  font-size:8px;
  line-height:1.15;
  color:rgba(22,23,19,.52);
  font-weight:850;
}
.module-library-card button,.module-content-actions button,.compartment-actions button{
  min-height:24px;
  border-radius:10px;
  background:#f4f5f1;
  border:1px solid rgba(0,0,0,.04);
  font-size:8px;
  letter-spacing:.04em;
  font-weight:950;
  color:#33372f;
}
.module-library-card button:disabled,.module-content-actions button:disabled,.compartment-actions button:disabled{opacity:.38;}
.compartment-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin-top:6px;
}
.hero-window .compartment-actions{grid-template-columns:1fr 1fr;}
.viewport-rail .compartment-actions{display:none;}
.mothership-card{
  width:100%;
  min-height:100%;
  border-radius:22px;
  background:linear-gradient(135deg,#fff,#fafbf8 78%);
  border:1px solid rgba(255,59,48,.24);
  box-shadow:0 6px 16px rgba(31,35,27,.035);
  padding:12px;
  display:grid;
  align-content:center;
  gap:8px;
}
.hero-window .mothership-card{position:absolute;inset:12px;min-height:auto;border-radius:24px;}
.viewport-rail .mothership-card{min-width:100%;height:96px;flex:0 0 100%;overflow:hidden;}
.module-topline{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.module-topline h2{margin:0;font-size:17px;line-height:1;letter-spacing:-.04em;color:#171a15;}
.module-pill{border-radius:999px;background:var(--red-soft);color:var(--red);font-size:10px;font-weight:950;padding:7px 9px;white-space:nowrap;}
.mothership-basic-svg{width:100%;height:170px;display:block;}
.viewport-rail .mothership-basic-svg{height:54px;}
.ms-barline{stroke:#151713;stroke-width:2.4;stroke-linecap:round;}
.ms-meter{font-weight:950;fill:#30342f;font-size:14px;}
.ms-select{fill:rgba(255,59,48,.07);stroke:rgba(255,59,48,.32);stroke-width:1;}
.ms-dir{font-weight:950;fill:#4f564e;font-size:10px;}
.ms-stem{stroke:#151713;stroke-width:3.4;stroke-linecap:round;}
.ms-head{fill:#151713;}
.ms-beat{font-weight:850;fill:#555b52;font-size:11px;}

.ms-slot-led{fill:#fff;stroke:rgba(21,23,19,.42);stroke-width:1.4;}
.ms-slot-led.is-current{stroke:var(--red);stroke-width:1.8;}
.ms-slot-led.is-occupied{fill:var(--red);stroke:var(--red);}
.module-status-grid{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:4px 8px;
  border-top:1px solid rgba(22,23,19,.07);
  padding-top:6px;
}
.module-status-grid span{font-size:8px;text-transform:uppercase;letter-spacing:.10em;font-weight:850;color:rgba(22,23,19,.38);}
.module-status-grid b{font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#20231e;}
.viewport-rail .module-topline h2{font-size:13px;}.viewport-rail .module-pill,.viewport-rail .module-status-grid{display:none;}


/* HK_CE_MODULE_LIBRARY_MOTHERSHIP_1_LOAD_FIX — keep cartridge controls reachable */
.cart-primary-actions{margin:7px 0 4px;}
.cart-primary-actions #loadBlankCart{background:#fff;border-color:rgba(255,59,48,.22);box-shadow:0 0 0 3px rgba(255,59,48,.06);}
.cartridge-panel{margin-bottom:18px;}


/* HK_CE_CARTRIDGE_BUILDER_3_SIMPLIFY */
.ghost-toggle{
  width:100%;min-height:28px;margin:10px 0 0;border-radius:12px;background:#f4f5f1;border:1px solid rgba(22,23,19,.07);
  font-size:9px;font-weight:950;letter-spacing:.10em;color:#454a42;pointer-events:auto;
}
.ghost-panel.is-collapsed{display:none;}
.cartridge-panel{margin-top:10px;}
.module-library-panel{border-top:1px solid rgba(22,23,19,.07);padding-top:8px;margin-top:8px;}
.cart-save-block{border-top:1px solid rgba(22,23,19,.07);padding-top:8px;margin-top:10px;}
.lane-count-control{display:none!important;}
.module-library-card button{margin-top:7px;width:100%;}
.cart-actions.module-content-actions{margin-top:6px;}

/* HK_CE_CARTRIDGE_EMPTY_CLEAN_1 — blank lanes are now quiet empty holders */
.cart-box-empty{display:grid;align-content:center;gap:12px;text-align:left;}
.cart-box-empty .cart-empty-action{display:grid;align-items:center;}
.cart-box-empty .cart-empty-action button{width:100%;min-height:34px;border-radius:14px;background:#fff;border:1px solid rgba(22,23,19,.10);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:950;color:#30342f;box-shadow:0 5px 14px rgba(31,35,27,.04);}
.viewport-rail .cart-box-empty{align-content:center;}
.viewport-rail .cart-box-empty .cart-eyebrow{display:none;}
.viewport-rail .cart-box-empty h2{font-size:13px;color:rgba(22,23,19,.62);}
.viewport-rail .cart-box-empty .cart-empty-action button{min-height:30px;font-size:9px;}


/* HK_CE_SAVE_TO_FLOOR_1 */
.floor-btn{position:relative}
.floor-btn.has-saved::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;right:8px;top:7px;opacity:.55}
.floor-btn.is-save-target{animation:floorSaveFlash .72s ease-in-out infinite;border:1px solid rgba(207,54,54,.35)}
@keyframes floorSaveFlash{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(207,54,54,0)}50%{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(207,54,54,.13)}}
.module-gallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px!important;align-content:stretch!important}
.module-gallery-card{min-width:0;border:1px solid rgba(22,23,19,.09);border-radius:14px;background:#fff;padding:8px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 7px;text-align:left;align-items:center;box-shadow:0 4px 12px rgba(31,35,27,.035)}
.module-gallery-card .gallery-preview{grid-column:1/-1;font-size:13px;letter-spacing:.08em;color:#3e463d;white-space:nowrap;overflow:hidden}
.module-gallery-card b{font-size:10px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.module-gallery-card span:last-child{font-size:8px;font-weight:950;letter-spacing:.08em}
.viewport-rail .module-gallery{height:82px;grid-template-columns:repeat(4,minmax(82px,1fr));overflow-x:auto;align-items:stretch}
.viewport-rail .module-gallery-card{min-width:82px;padding:6px}
.viewport-rail .module-gallery-card .gallery-preview{font-size:9px}
.viewport-rail .module-gallery-card b{font-size:8px}
.cartridge-panel{background:transparent;border:0;box-shadow:none;padding:0;margin-top:10px}
.quiet-name{margin:0;width:100%;min-height:38px}
.floor-empty-mark{position:absolute;inset:12px;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.16em;color:rgba(22,23,19,.25);border:1px dashed rgba(22,23,19,.08);border-radius:24px}
.save-notice{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);z-index:70;padding:8px 12px;border-radius:999px;background:#171a15;color:#fff;font-size:11px;font-weight:900;letter-spacing:.04em;opacity:0;pointer-events:none;transition:160ms ease}
.save-notice.is-visible{opacity:1;transform:translate(-50%,0)}


/* HK_CE_LANE_RESIZE_1 — one shared resizable lane component */
.case-scroll{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  padding:var(--outer) 0 0;
}
.lane-component{
  position:relative;
  flex:0 0 auto;
  min-height:0;
  margin:0 var(--outer);
  border:1px solid rgba(0,0,0,.055);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:12px;
  transition:min-height 180ms ease,height 180ms ease,border-color 140ms ease,box-shadow 140ms ease;
}
.lane-component.size-hero{height:222px;min-height:222px}
.lane-component.size-compact{height:112px;min-height:112px}
.lane-component.is-selected{box-shadow:0 0 0 3px var(--red-soft),var(--shadow);border-color:rgba(255,59,48,.58)}
.lane-content-host{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  align-items:stretch;
}
.lane-content-host::-webkit-scrollbar{display:none}
.lane-component .page-dots{display:none}
.lane-size-toggle{
  position:absolute;
  top:7px;
  right:7px;
  z-index:8;
  width:28px;
  height:28px;
  border-radius:12px;
  background:rgba(244,245,241,.94);
  border:1px solid rgba(22,23,19,.08);
  box-shadow:0 4px 12px rgba(31,35,27,.06);
  font-size:14px;
  font-weight:950;
  color:rgba(22,23,19,.58);
}
.lane-component .cart-box,
.lane-component .mothership-card{
  position:relative!important;
  inset:auto!important;
  min-width:100%;
  width:100%;
  height:100%!important;
  min-height:0!important;
  flex:0 0 100%;
  border-radius:20px!important;
  overflow:hidden;
}
.lane-component .module-gallery{
  display:flex!important;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  align-items:stretch;
  padding:4px 36px 4px 4px!important;
  scrollbar-width:none;
}
.lane-component .module-gallery::-webkit-scrollbar{display:none}
.lane-component .module-gallery-card{
  flex:0 0 126px;
  min-width:126px;
}
.lane-component.size-compact .module-gallery-card{
  flex-basis:88px;
  min-width:88px;
  padding:6px;
}
.lane-component.size-compact .module-gallery-card .gallery-preview{font-size:9px}
.lane-component.size-compact .module-gallery-card b{font-size:8px}
.lane-component.size-compact .mothership-card{padding:7px 34px 5px 8px;gap:2px}
.lane-component.size-compact .module-topline h2{font-size:12px}
.lane-component.size-compact .cart-eyebrow{font-size:7px}
.lane-component.size-compact .mothership-basic-svg{height:66px}
.lane-component.size-compact .compartment-actions{display:none}
.lane-component.size-hero .mothership-basic-svg{height:160px}
.lane-component.size-hero .compartment-actions{grid-template-columns:1fr 1fr}
.lane-component .blank-sheen,.lane-component .floor-empty-mark{position:absolute;inset:12px}
@media (max-height:780px){
  .lane-component.size-hero{height:190px;min-height:190px}
  .lane-component.size-compact{height:100px;min-height:100px}
}


/* ==================================================
   FLOOR 5 — INVADERS CARTRIDGE
   ================================================== */
.phone-shell[data-floor="5"] .case-scroll{
  display:block;
  padding:12px 0 18px;
}
.phone-shell[data-floor="5"] [data-cartridge-lane="lane1"]{
  height:clamp(330px,58dvh,520px);
  min-height:330px;
  margin:0 var(--outer);
}
.phone-shell[data-floor="5"] [data-cartridge-lane="lane2"],
.phone-shell[data-floor="5"] [data-cartridge-lane="lane3"],
.phone-shell[data-floor="5"] .lane-size-toggle{
  display:none !important;
}
.phone-shell[data-floor="5"] .cartridge-panel{display:none}
.phone-shell[data-floor="5"] .footer-action#saveButton{opacity:.22;pointer-events:none}
.invaders-card{height:100%;width:100%;padding:8px}
.invaders-screen{
  position:relative;
  width:100%;height:100%;min-height:310px;
  overflow:hidden;border-radius:24px;
  background:#0b0e13;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75),inset 0 0 34px rgba(113,255,158,.035);
}
.invaders-stars{position:absolute;inset:0;opacity:.26;background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 13%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 32% 46%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 87% 55%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 56% 72%,#fff 0 1px,transparent 1.5px)}
.invader-enemy{position:absolute;top:14%;width:70px;height:32px;transform:translateX(-50%);transition:left 100ms linear}
.invader-enemy::before{content:"";position:absolute;left:10px;right:10px;top:0;height:13px;border-radius:20px 20px 4px 4px;background:#ff544d;box-shadow:0 0 16px rgba(255,84,77,.35)}
.invader-enemy::after{content:"";position:absolute;inset:11px 0 0;border-radius:8px 8px 15px 15px;background:#e8ecef;clip-path:polygon(9% 0,91% 0,100% 55%,82% 55%,74% 100%,61% 55%,39% 55%,26% 100%,18% 55%,0 55%)}
.invader-enemy span{position:absolute;z-index:2;left:30px;top:5px;width:10px;height:5px;border-radius:50%;background:#fff}
.invader-player{position:absolute;bottom:8%;width:46px;height:27px;transform:translateX(-50%);background:#76f39a;clip-path:polygon(50% 0,65% 42%,90% 50%,100% 100%,0 100%,10% 50%,35% 42%);box-shadow:0 0 18px rgba(118,243,154,.4);transition:left 70ms ease-out}
.invader-bullet{position:absolute;width:4px;height:16px;transform:translateX(-50%);border-radius:6px;background:#fff;box-shadow:0 0 10px #fff}
.invaders-ground{position:absolute;left:5%;right:5%;bottom:5%;height:2px;background:rgba(118,243,154,.42);box-shadow:0 0 12px rgba(118,243,154,.25)}
.invaders-win{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:18px;color:#fff}
.invaders-win b{font-size:30px;line-height:.92;letter-spacing:-.055em}
.invaders-win span{font-size:10px;font-weight:900;letter-spacing:.18em;color:#76f39a}
.phone-shell[data-floor="5"] .command-key:nth-child(10){background:#ff3b30;color:#fff;border-color:rgba(0,0,0,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 8px 20px rgba(255,59,48,.18)}
.phone-shell[data-floor="5"] .command-key:nth-child(10) .key-main{font-size:13px;color:#fff}
.phone-shell[data-floor="5"] .arrow-key.left,
.phone-shell[data-floor="5"] .arrow-key.right{background:#eef1eb}
.floor-btn.floor-five{font-weight:950}
@media (max-height:780px){
  .phone-shell[data-floor="5"] [data-cartridge-lane="lane1"]{height:360px;min-height:300px}
  .invaders-screen{min-height:280px}
}

/* HK_CE_INVADERS_MODULE_SKIN_1 — cartridge-owned Alpha keypad skin */
.command-key[data-slot="11"].has-skin .key-main{font-size:10px;letter-spacing:-.03em;}


/* HK_CONSOLE_CE_MODULE_INSTALL_1 */
.module-install-panel{margin-top:10px;padding-bottom:9px;border-bottom:1px solid rgba(22,23,19,.07);pointer-events:auto}
.module-install-button{width:100%;min-height:36px;border-radius:13px;border:1px solid rgba(22,23,19,.09);background:#171914;color:#fff;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:4px;padding:7px 8px;font-size:16px;font-weight:950;text-align:left}
.module-install-button span{font-size:8px;letter-spacing:.09em;line-height:1.05}
.module-install-button:disabled{opacity:.45}
.module-install-status{min-height:0;margin-top:5px;font-size:8px;font-weight:850;line-height:1.25;color:rgba(22,23,19,.55);word-break:break-word}
.module-install-status.is-ok{color:#147a3d}.module-install-status.is-error{color:#c4261d}
.module-gallery-card[data-external="true"]::after{content:"EXT";position:absolute;right:5px;top:5px;font-size:6px;font-weight:950;letter-spacing:.08em;color:rgba(22,23,19,.42)}
.module-gallery-card{position:relative}

/* MODULE MANAGER CE */
.lane-module-manager{
  position:absolute;
  z-index:12;
  top:7px;
  right:39px;
  width:28px;
  height:24px;
  border:1px solid rgba(22,23,19,.12);
  border-radius:9px;
  background:rgba(255,255,255,.92);
  color:#23251f;
  font-size:11px;
  font-weight:950;
  letter-spacing:-1px;
  line-height:1;
  box-shadow:0 3px 10px rgba(31,35,27,.06);
}
.lane-module-manager[hidden]{display:none!important}
.lane-manager-popover{
  position:absolute;
  z-index:30;
  top:35px;
  right:38px;
  display:grid;
  min-width:104px;
  padding:5px;
  gap:4px;
  border:1px solid rgba(22,23,19,.12);
  border-radius:12px;
  background:rgba(255,255,255,.98);
  box-shadow:0 12px 32px rgba(31,35,27,.16);
}
.lane-manager-popover button{
  border:0;
  border-radius:8px;
  background:#f2f3ef;
  padding:8px 10px;
  text-align:left;
  font-size:8px;
  font-weight:950;
  letter-spacing:.09em;
}
.lane-module-picker{
  position:absolute;
  z-index:28;
  inset:5px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:6px;
  padding:7px;
  border:1px solid rgba(22,23,19,.12);
  border-radius:15px;
  background:rgba(248,249,246,.98);
  box-shadow:0 12px 32px rgba(31,35,27,.14);
  overflow:hidden;
}
.lane-module-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:23px;
  padding-left:3px;
}
.lane-module-picker-head b{font-size:8px;letter-spacing:.11em}
.lane-module-picker-head button{
  width:24px;height:24px;border:0;border-radius:8px;background:#e9ebe6;font-size:16px;line-height:1
}
.lane-module-picker-grid{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  overflow:auto;
}
.lane-component.size-compact .lane-module-picker-grid{
  display:flex;
  overflow-x:auto;
}
.lane-component.size-compact .lane-module-picker-grid .module-gallery-card{min-width:100px}

/* TARS 9 CE2 — restrained industrial finish pass
   Gold Master geometry preserved. No dimensions, spacing, architecture or behaviour changed. */
:root{
  --bg:#f7f8f5;
  --ink:#151713;
  --muted:#70766d;
  --hair:rgba(18,22,17,.095);
  --hair-strong:rgba(18,22,17,.17);
  --green:#20cf62;
  --shadow:0 15px 34px rgba(22,27,20,.085),0 2px 5px rgba(22,27,20,.045),inset 0 1px 0 rgba(255,255,255,.82);
  --hk-graphite:#101612;
  --hk-graphite-high:#182019;
  --hk-graphite-low:#0c110e;
  --hk-ceramic:#f7f8f5;
  --hk-ceramic-high:#fcfdfa;
  --hk-rubber:#222a23;
}

body{
  background:linear-gradient(180deg,#f1f3ef 0%,#e9ece7 100%);
}
.phone-shell{
  background:linear-gradient(180deg,#ffffff 0%,#fcfdfa 100%);
  box-shadow:0 0 0 1px rgba(17,21,16,.045),0 24px 70px rgba(17,21,16,.12);
}
.header-lane,.footer-lane{
  background:rgba(252,253,250,.955);
  border-color:rgba(18,22,17,.095);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.rr-mark{
  background:linear-gradient(145deg,#111512 0%,#252d25 55%,#111612 100%);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.28),0 5px 12px rgba(10,14,11,.16);
}
.floor-lift{
  background:linear-gradient(180deg,#f1f3ef 0%,#e9ece7 100%);
  border-color:rgba(18,22,17,.055);
  box-shadow:inset 0 1px 2px rgba(18,22,17,.07),inset 0 -1px 0 rgba(255,255,255,.8);
}
.floor-btn{
  color:#737970;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.floor-btn.is-active{
  background:linear-gradient(180deg,#ffffff 0%,#f5f7f3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(18,22,17,.045),0 3px 8px rgba(18,22,17,.10);
}
.menu-button,#closeKeypad,#closeSideRail{
  background:linear-gradient(180deg,#f5f7f3 0%,#ecefe9 100%);
  border-color:rgba(18,22,17,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(18,22,17,.045),0 2px 4px rgba(18,22,17,.045);
}
.lane-component{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcf9 100%);
  border-color:rgba(18,22,17,.07);
  box-shadow:var(--shadow);
}
.lane-component::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(18,22,17,.035);
}
.blank-sheen,.blank-card,.cart-box,.mothership-card{
  background:linear-gradient(145deg,#fafbf8 0%,#ffffff 58%,#f6f8f4 100%);
  border-color:rgba(18,22,17,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 3px 8px rgba(18,22,17,.035);
}

/* Keypad control well — same footprint and internal grid geometry. */
.keypad-lane{
  background:linear-gradient(180deg,var(--hk-graphite-high) 0%,var(--hk-graphite) 38%,var(--hk-graphite-low) 100%);
  border-top-color:rgba(255,255,255,.065);
  box-shadow:0 -1px 0 rgba(255,255,255,.035),0 -14px 32px rgba(10,14,11,.19),inset 0 1px 0 rgba(255,255,255,.045);
}
.keypad-lane::before{
  content:"";
  position:absolute;
  inset:7px 8px 8px;
  pointer-events:none;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.025),inset 0 -1px 2px rgba(0,0,0,.34);
}
.keypad-head{
  position:relative;
  z-index:1;
  color:rgba(226,232,225,.58);
  text-shadow:0 1px 0 rgba(0,0,0,.42);
}
#closeKeypad{
  background:linear-gradient(180deg,#2a332b 0%,#1f2721 100%);
  color:rgba(238,242,236,.72);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.32),0 2px 4px rgba(0,0,0,.18);
}
.keypad-top-row,.keypad-grid{position:relative;z-index:1;}
.top-key,.command-key,.arrow-key{
  background:linear-gradient(180deg,var(--hk-ceramic-high) 0%,var(--hk-ceramic) 56%,#eef1ec 100%);
  border-color:rgba(5,10,7,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(17,22,18,.10),0 2px 0 rgba(4,8,6,.42),0 3px 7px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(255,255,255,.78);
}
.command-key::after{color:rgba(18,22,17,.28);}
.command-key.has-skin .key-sub{color:rgba(18,22,17,.48);}
.top-key.is-pulsing,.command-key.is-pulsing,.arrow-key.is-pulsing{
  border-color:rgba(255,77,66,.48);
  box-shadow:0 0 0 2px rgba(255,59,48,.11),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(17,22,18,.10),0 2px 0 rgba(4,8,6,.40),0 3px 7px rgba(0,0,0,.20);
}
.command-key:active,.arrow-key:active,.top-key:active{
  filter:brightness(.97);
  box-shadow:inset 0 1px 2px rgba(17,22,18,.14),inset 0 -1px 0 rgba(255,255,255,.60),0 1px 0 rgba(4,8,6,.35),0 2px 4px rgba(0,0,0,.18);
}

/* Mandatory authorised correction: UP directly above DOWN.
   Removes only the inherited one-gap horizontal offset; grid cell, key size,
   spacing and complete arrow-cluster footprint remain unchanged. */
.arrow-key.up{transform:none;}
.command-key:nth-child(7):active,.command-key:nth-child(8):active,.command-key:nth-child(9):active{transform:translateX(var(--key-gap)) scale(.98);}
.arrow-key.up:active{transform:scale(.98);}

.footer-action{
  background:linear-gradient(180deg,#f3f5f1 0%,#e9ece7 100%);
  border:1px solid rgba(18,22,17,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(18,22,17,.055),0 2px 5px rgba(18,22,17,.045);
}
.play-action{
  background:linear-gradient(180deg,#27da69 0%,var(--green) 58%,#19b955 100%);
  border-color:rgba(10,84,40,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(4,74,31,.16),0 4px 10px rgba(24,168,76,.20);
  text-shadow:0 1px 0 rgba(0,80,33,.18);
}
.phone-shell[data-playing="true"] .play-action{
  background:linear-gradient(180deg,#ff5147 0%,var(--red) 58%,#df2d25 100%);
}
.side-rail{
  background:rgba(250,252,248,.97);
  border-left-color:rgba(18,22,17,.09);
  box-shadow:-8px 0 24px rgba(18,22,17,.095),inset 1px 0 0 rgba(255,255,255,.7);
}
.ghost-panel,.cartridge-panel,.module-library-panel{
  background:linear-gradient(180deg,#fbfcf9 0%,#f5f7f3 100%);
  border-color:rgba(18,22,17,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 8px rgba(18,22,17,.04);
}