/* Browsing and the lifted label have separate hit areas. Nothing overlaps the spines. */
.cartridge-browser{margin:22px 0 6px;max-width:100%;position:relative}
.raised-cartridge{height:245px;position:relative;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 18px 7%;overflow:hidden}
.raised-cartridge:after{content:'';position:absolute;left:10%;right:10%;bottom:8px;height:12px;background:radial-gradient(ellipse,#54644533,transparent 70%);z-index:-1}
.empty-cartridge{align-self:center;display:block;width:100%;text-align:center;color:var(--muted);font-size:9px;letter-spacing:1px}
.raised-cartridge .cartridge{width:76%;max-width:265px;height:auto;aspect-ratio:1.18;flex:none;padding:14px 16% 22px;transform:none;position:relative;animation:lift-cartridge .24s ease-out both;background:linear-gradient(115deg,#d8ddcf,#b9c5af);box-shadow:inset 2px 2px #e1e6d8,inset -3px -3px #95a489;filter:drop-shadow(3px 5px 3px #25351d20);clip-path:polygon(5% 0,95% 0,95% 7%,100% 7%,100% 89%,95% 89%,95% 100%,5% 100%,5% 89%,0 89%,0 7%,5% 7%)}
.raised-cartridge .label{position:absolute;left:16%;right:16%;top:20%;bottom:20%;width:auto;height:auto;aspect-ratio:auto;padding:0}
.raised-cartridge .cartridge:before{left:8%;right:8%;top:9%;height:4px}
.raised-cartridge .cartridge:after{left:4%;width:8%;top:25%;bottom:20%;box-shadow:none}
.raised-cartridge .label img{object-fit:contain;background:var(--label-bg)}
.drawer-hint{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.8px;color:var(--muted);padding:0 6px 10px}
.drawer-hint span{color:#778769}
.cartridges{display:flex;flex-direction:column;position:relative;height:130px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:7px 9px 9px;margin:0;gap:8px;border:1px solid #9ca890;border-radius:5px;background:linear-gradient(90deg,#a9b39e,#bbc3b0);box-shadow:inset 0 3px 5px #4a5c3838,0 4px #8f9f81;isolation:auto;scrollbar-width:thin;scrollbar-color:#7c8e6c #c8d0be}
.cartridges:after{display:none}
.cartridge-option,.cartridge-option:nth-child(1),.cartridge-option:nth-child(2),.cartridge-option:nth-child(3),.cartridge-option.revealed,.cartridge-option:hover{position:relative;flex:none;display:block;width:100%;height:43px;left:auto;top:auto;transform:none;z-index:auto;margin:0;padding:0;border:1px solid #8f9e80;border-radius:3px;background:linear-gradient(#d1d8c6,#b9c5ac);box-shadow:inset 1px 1px #edf0e5,0 2px #829271;filter:none;transition:background .15s,border-color .15s;text-align:left}
.cartridge-option .cartridge{display:none}
.cartridge-option:before{content:'';position:absolute;left:10px;top:10px;bottom:10px;width:8px;background:repeating-linear-gradient(0deg,#91a37f 0 2px,#d7e0cb 2px 4px)}
.cartridge-option.revealed{border-color:#788b65;background:linear-gradient(#e2e8d8,#cbd8ba);box-shadow:inset 3px 0 var(--orange),inset 0 1px #fbfcf5,0 2px #829271}
.spine-title{position:absolute;left:29px;right:55px;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font:9px var(--mono);letter-spacing:.5px;color:#435735;pointer-events:none}
.cartridge-option .cart-number{position:absolute;right:13px;top:0;height:100%;display:flex;align-items:center;font:8px var(--mono);margin:0;color:#60714f;pointer-events:none}
.cartridge-option .selected-mark{display:none}.cartridge-option[aria-pressed=true] .cart-number:before{content:'●';color:var(--orange);font-size:7px;margin-right:6px}
.cartridge-option[aria-pressed=true]:after{display:none}
.cartridge-option:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.stack-selection{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 13px;min-height:75px;border-bottom:1px solid var(--line)}
.stack-selection .mono{font-size:7px;letter-spacing:.7px;color:var(--muted)}
.stack-selection h3{font-size:18px;font-weight:500;letter-spacing:-.5px;margin:6px 0 0}
#load-cartridge{border:1px solid #a0aa93;background:#d5dbcb;border-radius:3px;color:#47573d;padding:11px 12px;font:9px var(--mono);white-space:nowrap;box-shadow:0 2px #a2ae96}
#load-cartridge:disabled{opacity:.45;box-shadow:none}#load-cartridge:hover:not(:disabled){background:#c3ceb7}#load-cartridge:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.instruction{font-size:10px;line-height:1.5;margin:11px 0 18px}.project-info{padding-top:18px}
.insertion-bay{position:absolute;left:0;right:0;bottom:2px;height:200px;overflow:hidden;pointer-events:none;z-index:4}
.inserting-cartridge{position:absolute;bottom:0;left:6%;width:88%;height:auto;aspect-ratio:1.18;padding:14% 15% 18%;transform-origin:center;box-sizing:border-box}
.inserting-cartridge .label{height:auto;aspect-ratio:4/3}.inserting-cartridge .label-title{font-size:13px}.inserting-cartridge .label-title.small{font-size:11px}.inserting-cartridge .label-top,.inserting-cartridge .label-sub{font-size:4px}
@keyframes lift-cartridge{from{transform:translate(14px,25px);opacity:.3}to{transform:translate(0,0);opacity:1}}
@media(max-width:1150px){.raised-cartridge{height:220px;padding-left:5%}.raised-cartridge .cartridge{width:80%;max-width:240px}.stack-selection h3{font-size:16px}#load-cartridge{font-size:8px;padding:10px}.spine-title{font-size:8px}}
@media(max-width:850px){.cartridge-browser{max-width:470px;margin:22px auto 6px}.raised-cartridge{height:250px;padding-left:7%}.raised-cartridge .cartridge{width:75%;max-width:275px}.stack-selection h3{font-size:20px}.stack-selection .mono{font-size:9px}#load-cartridge{font-size:10px;padding:12px 15px}.spine-title{font-size:10px}.drawer-hint{font-size:8px}}
@media(max-width:540px){.raised-cartridge{height:225px;padding-left:7%}.raised-cartridge .cartridge{width:78%;max-width:240px}.stack-selection .mono{font-size:7px}.stack-selection h3{font-size:17px}#load-cartridge{font-size:8px;padding:10px}.instruction{font-size:9px}.insertion-bay{height:160px}.spine-title{font-size:8px}.drawer-hint{font-size:7px}.empty-cartridge{font-size:8px}}
@media(prefers-reduced-motion:reduce){.raised-cartridge .cartridge{animation:none}.cartridge-option{transition:none}}