#enter-portable{background:linear-gradient(#446984,#243e55);border:1px solid #91a4ad;color:#e4e9e5;padding:12px 18px;font-size:12px}header{flex-wrap:wrap;gap:14px}#portable[hidden]{display:none}body.in-portable{overflow:hidden}body.in-portable>header,body.in-portable>main,body.in-portable>.catalogue,body.in-portable>.experience,body.in-portable>footer,body.in-portable>#status{visibility:hidden}#portable{position:fixed;inset:0;z-index:1100;background:radial-gradient(ellipse at top,#425159,#111c23 70%);color:#e4e6df;overflow:auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));--portable-gap:24px}.portable-header{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:1100px;margin:auto}.portable-header span{font-size:8px;letter-spacing:3px;color:#aebac0}.portable-header h2{font:italic 24px Georgia;margin:6px 0 12px}.portable-header button{font-size:11px}.portable-settings{display:flex;gap:12px;flex-wrap:wrap;align-items:center;max-width:1100px;margin:8px auto 20px}.portable-settings label{font-size:10px;display:flex;gap:8px;align-items:center}.portable-settings select{padding:8px;font-size:11px;background:#23313a;border-color:#657780}.portable-settings button{font-size:11px}.portable-settings button[aria-pressed=true]{background:#cbad65;color:#1a252d}.portable-halves{max-width:1100px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--portable-gap);align-items:start}.portable-deck-pane{position:relative;min-width:0;padding:25px 12px 10px}.portable-machine{position:relative;max-width:430px;margin:auto;padding:18px;border-radius:18px 18px 12px 12px;background:repeating-linear-gradient(0deg,#254963 0,#254963 2px,#284c66 3px);border:3px solid #75909e;box-shadow:inset 2px 2px 3px #b8d4db55,inset -4px -5px 12px #081c30,0 25px 30px #0008;color:#e1e6dc}.portable-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;font-size:8px;letter-spacing:1px}.portable-jack{color:#cbbf9c}.portable-led:before{content:'';display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#415847}.playing .portable-led:before{background:#d48645;box-shadow:0 0 8px #efb178}.portable-grille{width:55px;height:18px;background:repeating-linear-gradient(90deg,#0a2133 0 2px,#46647b 3px 4px);border-radius:3px}.portable-brand{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:18px}.portable-brand strong{font-size:15px;font-weight:800;letter-spacing:1px}.portable-brand>span{font-size:6px;letter-spacing:1px;max-width:85px;text-align:right;line-height:1.5}.portable-door{position:relative;padding:20px 14px 26px;background:linear-gradient(135deg,#15344a,#091a2b);border:2px solid #506c80;border-radius:6px;box-shadow:inset 0 3px 7px #0008;perspective:500px}.portable-tape{position:relative;background:linear-gradient(#272e29,#0e1819);border:2px solid #8d8b71;border-radius:9px;padding:10px 12px;box-shadow:0 5px 8px #0009}.portable-paper{background:repeating-linear-gradient(#d6d0b1 0 13px,#919781 14px 15px);color:#273d3a;padding:7px 8px;border-top:5px solid #ac644b;border-radius:3px;font-family:Georgia}.portable-paper>span{display:block;font:6px system-ui;letter-spacing:1px}.portable-paper strong{display:block;font:italic 16px Georgia;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portable-reel-window{display:flex;align-items:center;justify-content:space-around;gap:12px;padding:15px 8px;background:#060f13;border:2px solid #526369;border-radius:22px;margin:9px 5px}.portable-spool{position:relative;display:block;width:54px;height:54px;flex-shrink:0;border-radius:50%;background:repeating-conic-gradient(#d4d6be 0 20deg,#56605c 21deg 40deg);border:7px solid #947352;box-shadow:0 0 0 3px #3b291e;animation:portable-spin 2.4s linear infinite paused}.portable-spool:after{content:'';position:absolute;inset:30%;border-radius:50%;background:#1c282b;border:3px solid #b8bead}.playing .portable-spool{animation-play-state:running}.spool-left{transform:scale(var(--portable-left,1))}.spool-right{transform:scale(var(--portable-right,.65))}.portable-tape-bridge{height:21px;width:50px;background:linear-gradient(#281e15 0 5px,#625544 6px 13px,#281e15 14px);border:1px solid #4e584f}.portable-tape-bottom{display:flex;justify-content:space-between;font-size:6px;letter-spacing:1px;color:#b2b99f}.portable-door-glass{position:absolute;inset:0;border:2px solid #64879a;border-radius:6px;background:linear-gradient(125deg,#a7d0d52b 0 22%,#dcf2ee0c 23% 45%,transparent 46% 70%,#9cd0d31c 71%);transform-origin:left;transition:transform .6s,opacity .6s;pointer-events:none;box-shadow:inset 0 0 20px #8dadb322}.portable-door-label{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:6px;letter-spacing:2px;color:#b3c5c6}#portable[data-open=true] .portable-door-glass{transform:rotateY(-65deg);opacity:.45}.portable-keys{display:flex;gap:3px;justify-content:center;margin:16px -8px 10px}.portable-keys button{flex:1;min-height:48px;padding:8px 3px;border-radius:2px 2px 5px 5px;background:linear-gradient(#c1c7c3,#748383);color:#142f40;border:1px solid #b8c6c5;border-bottom:5px solid #354a55;box-shadow:0 3px 5px #0007}.portable-keys button span{display:block;font-size:15px}.portable-keys small{display:block;font-size:6px;letter-spacing:1px;margin-top:5px}.playing #portable-play{border-bottom-width:2px;transform:translateY(3px);background:linear-gradient(#e3ddc1,#abb09d)}.portable-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:17px;font-size:7px;letter-spacing:1px}.portable-deck-hint{text-align:center;font:italic 13px Georgia;color:#adb7b7;margin:26px 0 8px}.portable-cable{position:absolute;left:13%;top:-13px;width:105px;height:70px;border:5px solid #14191b;border-top:0;border-right:0;border-radius:0 0 0 70px;transform:rotate(-8deg);box-shadow:-1px 2px 0 #687478}.portable-cable:after{content:'';position:absolute;right:-5px;bottom:-9px;width:22px;height:11px;background:#353c3b;border:1px solid #778786;border-radius:3px}.portable-controls-pane{min-width:0;padding:22px;background:#132129dd;border:1px solid #53656c;border-radius:12px}.portable-now{display:flex;gap:14px;align-items:center}.portable-now>div:last-child{min-width:0}.portable-art{width:64px;aspect-ratio:1;flex-shrink:0;border:2px solid #a7ae9b;background:radial-gradient(circle,#aa8b54 0 12%,#344745 13% 40%,#a2ab94 41% 43%,#314748 44%);box-shadow:3px 3px 0 #071316}.portable-art img{width:100%;height:100%;object-fit:cover}.portable-now span{font-size:7px;letter-spacing:2px;color:#acb8b7}.portable-now h3{font:20px Georgia;margin:7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portable-now p{font-size:10px;color:#a3b5ba;margin:0;overflow-wrap:anywhere}.portable-position{display:flex;gap:8px;align-items:center;margin-top:22px;font:10px monospace}.portable-position input{min-width:0;accent-color:#c4b278}.portable-volume{display:flex;gap:12px;align-items:center;margin:18px 0 22px;font-size:10px}.portable-volume input{min-width:40px;accent-color:#c4b278}.portable-volume output{width:35px;flex-shrink:0}.portable-library-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid #465760;padding-top:18px}.portable-library-head button{font-size:11px;background:#b8b798;color:#182c34;border:0;min-height:44px}.portable-library-head input{width:90px;flex:1;min-height:44px;background:#0c1920}.portable-library-head>span{font-size:9px;color:#96a8b1}#portable-library{margin-top:14px;max-height:310px;overflow:auto;overscroll-behavior:contain;color:#adbbbe;font-size:12px;min-height:60px}.portable-track{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid #354751;border-radius:0;padding:12px 4px;min-height:58px}.portable-track>img,.portable-track>span:first-child{width:36px;height:36px;object-fit:cover;display:grid;place-items:center;background:#293f47;color:#c8ba8c;flex-shrink:0;font:11px monospace}.portable-track>span:last-child{min-width:0}.portable-track strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portable-track small{display:block;font-size:9px;color:#a2b0b4;margin-top:5px}.portable-track[aria-current=true]{background:#34505d;border-left:3px solid #beaa76;padding-left:7px}.portable-sound{margin-top:16px;border-top:1px solid #41565e;padding-top:14px;font-size:11px}.portable-sound summary{min-height:44px;padding:10px 0;cursor:pointer}.portable-sound label{display:flex;gap:12px;align-items:center;margin:14px 0}.portable-sound input{min-width:0;accent-color:#c4b278}.portable-sound select{max-width:70%;min-height:44px;font-size:11px}.portable-sound output{white-space:nowrap}.portable-sound p{font-size:10px;line-height:1.6;color:#9eafb5}.portable-footer{max-width:1100px;margin:15px auto 0;font-size:10px;color:#aabbbe}.portable-settings button,.portable-header button{min-height:44px}#portable[data-finish=silver] .portable-machine{background:repeating-linear-gradient(#bec4c4 0 1px,#abb5b5 2px 3px);border-color:#e3e6df;color:#263b42;box-shadow:inset 2px 2px 4px #fff8,inset -4px -5px 12px #536b79,0 25px 30px #0008;border-radius:8px}#portable[data-finish=silver] .portable-door{background:linear-gradient(#394b54,#1d313b);border-color:#71878e}#portable[data-finish=silver] .portable-jack{color:#32484f}#portable[data-finish=sport] .portable-machine{background:repeating-linear-gradient(90deg,#c7a430 0 3px,#d6b43e 4px 6px);border:8px solid #343d35;border-radius:28px;color:#27372e}#portable[data-finish=sport] .portable-door{border:6px solid #37443b;border-radius:16px}#portable[data-finish=sport] .portable-jack{color:#27372e}#portable[data-finish=sport] .portable-keys button{background:linear-gradient(#424e41,#233628);color:#e5d69a;border-color:#77866a;border-bottom-color:#142219}#portable[data-finish=sport] .portable-brand strong{font-style:italic}.portable-settings select:focus-visible,#portable button:focus-visible{outline:2px solid #e7c77c;outline-offset:3px}#portable[data-hold=true] .portable-machine{box-shadow:inset 2px 2px 3px #b8d4db55,0 0 0 2px #cfaf60,0 20px 25px #0008}#portable[data-layout=flip] .portable-halves,#portable[data-layout=pocket] .portable-halves{grid-template-columns:1fr;max-width:560px}#portable[data-layout=flip] .portable-deck-pane{border-bottom:var(--portable-gap) solid #080f14;padding-bottom:16px;border-radius:8px}#portable[data-layout=flip] .portable-controls-pane{border-top:1px solid #7d8a8b}#portable[data-layout=pocket] .portable-deck-pane{padding-top:14px}#portable[data-layout=pocket] .portable-machine{max-width:330px;padding:12px}#portable[data-layout=pocket] .portable-top{margin-bottom:12px}#portable[data-layout=pocket] .portable-door{padding:12px 10px 22px}#portable[data-layout=pocket] .portable-deck-hint{display:none}#portable[data-layout=pocket] .portable-controls-pane{margin-top:6px}#portable[data-layout=fold] .portable-deck-pane{position:sticky;top:16px}#portable[data-layout=fold] .portable-controls-pane{max-height:calc(100dvh - 160px);overflow:auto} @media(max-width:600px){#portable{padding:12px}.portable-settings{gap:8px;margin-bottom:10px}.portable-settings label{font-size:9px;gap:5px}.portable-settings select{max-width:125px}.portable-header h2{font-size:21px}.portable-deck-pane{padding:20px 4px 8px}.portable-machine{padding:14px;max-width:370px}.portable-controls-pane{padding:16px}.portable-brand strong{font-size:13px}.portable-tape{padding:8px}.portable-spool{width:45px;height:45px;border-width:6px}.portable-paper strong{font-size:14px}.portable-top{margin-bottom:12px}.portable-door{padding:14px 10px 24px}.portable-deck-hint{margin-top:15px}.portable-now h3{font-size:18px}.portable-now .portable-art{width:52px}#portable[data-layout=fold] .portable-halves{grid-template-columns:1fr}#portable[data-layout=fold] .portable-deck-pane{position:relative}#portable[data-layout=fold] .portable-controls-pane{max-height:none}}@keyframes portable-spin{to{rotate:360deg}}@media(prefers-reduced-motion:reduce){.portable-spool{animation:none}.portable-door-glass{transition:none}}
@media(max-width:600px){#portable[data-layout=flip] .portable-header h2{font-size:18px;margin:4px 0}#portable[data-layout=flip] .portable-header span{font-size:6px}#portable[data-layout=flip] .portable-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:7px;margin:10px 0}#portable[data-layout=flip] .portable-settings label{display:block;font-size:8px}#portable[data-layout=flip] .portable-settings select{display:block;width:100%;max-width:none;padding:7px;font-size:10px;margin-top:3px}#portable[data-layout=flip] .portable-halves{gap:0}#portable[data-layout=flip] .portable-deck-pane{padding:13px 4px 14px}#portable[data-layout=flip] .portable-machine{max-width:285px;padding:11px;border-radius:14px}#portable[data-layout=flip] .portable-top{margin-bottom:10px;font-size:6px}#portable[data-layout=flip] .portable-brand{margin-bottom:10px}#portable[data-layout=flip] .portable-brand strong{font-size:11px}#portable[data-layout=flip] .portable-brand>span{font-size:5px}#portable[data-layout=flip] .portable-door{padding:10px 8px 20px}#portable[data-layout=flip] .portable-tape{padding:6px}#portable[data-layout=flip] .portable-paper{padding:5px}#portable[data-layout=flip] .portable-paper strong{font-size:12px;margin-top:5px}#portable[data-layout=flip] .portable-reel-window{padding:8px 4px;margin:7px 2px}#portable[data-layout=flip] .portable-spool{width:35px;height:35px;border-width:5px}#portable[data-layout=flip] .portable-keys{margin:11px -5px 5px}#portable[data-layout=flip] .portable-keys button{min-height:44px;padding:5px 2px}#portable[data-layout=flip] .portable-bottom{margin-top:10px;font-size:6px}#portable[data-layout=flip] .portable-deck-hint{display:none}#portable[data-layout=flip] .portable-controls-pane{margin-top:8px}#portable[data-layout=flip] .portable-cable{top:0;width:65px;height:35px;left:19%}}
/* Outside cassette -> hinged shell -> insert -> close and listen. */
.portable-surface{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:1100px;margin:8px auto 14px}.portable-surface button{font-size:11px;min-height:44px;background:#1b323e;border-color:#70828a}.portable-surface button[aria-pressed=true]{background:#bac1a9;color:#19303b}.portable-surface span{font:italic 12px Georgia;color:#bdc4b4}.portable-front-lid{position:absolute;left:11px;right:11px;top:55px;bottom:84px;transform-style:preserve-3d;transform-origin:left center;transition:transform 1s cubic-bezier(.24,.7,.18,1);z-index:4;pointer-events:none}.portable-machine{perspective:1200px;transform-style:preserve-3d}.portable-lid-front,.portable-lid-back{position:absolute;inset:0;border:2px solid #7796a8;border-radius:8px;backface-visibility:hidden;box-shadow:0 3px 7px #0006}.portable-lid-front{display:flex;flex-direction:column;background:linear-gradient(#284e68 0 12%,transparent 13% 91%,#24445e 92%);padding:5px 8px}.portable-lid-front>span{font-size:7px;letter-spacing:1.2px;position:absolute;top:8px}.portable-lid-front small{position:absolute;bottom:6px;left:0;right:0;font-size:6px;letter-spacing:1px;text-align:center}.portable-lid-window{position:absolute;inset:14% 7% 10%;border:2px solid #7896a6;border-radius:4px;background:linear-gradient(135deg,#bce7e322,transparent 40%,#a8d8df15 70%);box-shadow:inset 0 0 15px #09233855}.portable-lid-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:repeating-linear-gradient(#60727a 0 1px,#53656e 2px 3px);border:10px solid #29475c;color:#d0d8d0}.portable-lid-back b{font:bold 36px Georgia;opacity:.35}.portable-lid-back>span{font-size:6px;letter-spacing:1px}.portable-lid-back i{width:45%;height:6px;background:#1a2c33;border-radius:2px}.portable-hinge{position:absolute;top:75px;bottom:100px;left:5px;width:7px;background:repeating-linear-gradient(#9eaba8 0 13px,#2a3b46 14px 18px);border-radius:3px;z-index:5}.portable-door-glass{display:none}.portable-empty-bay{position:absolute;inset:10px;border:3px solid #3b484a;border-radius:10px;background:linear-gradient(#18292e,#0c1418);display:flex;align-items:center;justify-content:space-around;box-shadow:inset 0 5px 16px #0009}.portable-empty-bay>i{width:25px;height:25px;border-radius:50%;background:repeating-conic-gradient(#bcc3b1 0 30deg,#4b5957 31deg 60deg);border:6px solid #536764}.portable-empty-bay>span{position:absolute;top:16px;font:7px monospace;letter-spacing:2px;color:#8d9b95}.portable-head-block{position:absolute;bottom:4px;left:40%;width:20%;height:15px;border:3px solid #87918a;background:#2d3940}.portable-tape{z-index:1;transition:opacity .3s}#portable[data-loaded=false] .portable-tape{opacity:0}#portable:not([data-kind=cassette])[data-open=true] .portable-front-lid{transform:rotateY(-174deg)}#portable[data-surface=cover] .portable-controls-pane{display:none}#portable[data-surface=cover] .portable-halves{display:block;max-width:460px}#portable[data-surface=cover] .portable-deck-pane{position:relative;border:0!important;padding:18px 10px 10px}#portable[data-surface=cover] .portable-settings label{display:none}#portable[data-surface=cover] .portable-settings{display:flex;justify-content:center;margin:6px auto}#portable[data-surface=cover] .portable-deck-hint{display:block;text-align:center;font-size:11px}#portable[data-surface=cover] .portable-surface{justify-content:center}#portable[data-surface=cover] .portable-surface span{width:100%;text-align:center}#portable-cover-import{display:block;margin:12px auto;min-height:44px;font-size:12px}#portable-cover-import[hidden]{display:none}#portable[data-surface=inside] .portable-halves{grid-template-columns:1fr;gap:16px;max-width:1000px}#portable[data-surface=inside][data-orientation=fold] .portable-deck-pane{padding:28px 0 18px;position:relative;min-height:450px}#portable[data-surface=inside][data-orientation=fold] .portable-machine{width:42%;max-width:360px;margin-left:52%;margin-right:auto}#portable[data-surface=inside] .portable-controls-pane{width:100%;max-width:860px;margin:auto;max-height:none}#portable[data-surface=inside] .portable-now{display:none}#portable[data-surface=inside] .portable-library-head{border-top:0;padding-top:0}#portable[data-surface=inside] #portable-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;max-height:350px}#portable[data-surface=inside] .portable-track{background:linear-gradient(#c4b897,#a69d81);color:#273737;border:3px solid #4b5145;border-radius:5px;box-shadow:2px 3px 0 #090f12;padding:12px 10px;min-height:95px}#portable[data-surface=inside] .portable-track>span:first-child{font:16px Georgia;width:66px;height:42px;border-radius:6px;background:#283631;color:#c2c9ad}#portable[data-surface=inside] .portable-track>img{width:60px;height:60px;border:2px solid #53604b}#portable[data-surface=inside] .portable-track small{color:#3c5149}#portable[data-surface=inside] .portable-track strong{white-space:normal}#portable[data-surface=inside] .portable-deck-hint{display:block!important;font-size:12px;margin:18px 0 0}#portable[data-inserting=true] .portable-tape{animation:portable-insert .85s cubic-bezier(.2,.65,.3,1) both}#portable[data-finish=silver] .portable-lid-front{background:linear-gradient(#a9b8bd 0 12%,transparent 13% 91%,#bbc4c4 92%);color:#27424b}#portable[data-finish=silver] .portable-lid-back{border-color:#aab9bb;background:repeating-linear-gradient(#c9d0ce 0 1px,#aebcbf 2px 3px);color:#344a52}#portable[data-finish=sport] .portable-lid-front{background:linear-gradient(#c9a733 0 12%,transparent 13% 91%,#c7a335 92%);border:4px solid #384337;color:#20362b}#portable[data-finish=sport] .portable-lid-back{border-color:#c0a43c;background:#3a493c}#portable[data-orientation=flip] .portable-front-lid{transform-origin:center top}#portable[data-orientation=flip] .portable-lid-back{transform:rotateX(180deg)}#portable[data-orientation=flip][data-open=true] .portable-front-lid{transform:rotateX(174deg)}#portable[data-surface=inside][data-orientation=flip] .portable-deck-pane{padding-top:245px;border-bottom:var(--portable-gap) solid #080f14}#portable[data-surface=inside][data-orientation=flip] .portable-machine{max-width:290px}#portable[data-surface=inside][data-orientation=flip] .portable-hinge{top:49px;bottom:auto;left:22px;right:22px;height:7px;width:auto;background:repeating-linear-gradient(90deg,#9eaba8 0 13px,#2a3b46 14px 18px)}#portable[data-surface=cover] .portable-machine{max-width:340px}#portable[data-surface=cover] .portable-controls-pane{display:none!important}@keyframes portable-insert{0%{transform:translate(90px,-70px) rotate(-12deg) scale(.88);opacity:.2}55%{transform:translate(5px,-24px) rotate(-3deg) scale(.97);opacity:1}100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}@media(max-width:600px){#portable[data-surface=inside][data-orientation=fold] .portable-machine{width:47%;margin-left:52%;padding:7px}#portable[data-surface=inside][data-orientation=fold] .portable-spool{width:25px;height:25px}#portable[data-surface=inside][data-orientation=fold] .portable-brand strong{font-size:8px}#portable[data-surface=inside][data-orientation=fold] .portable-brand>span{display:none}#portable[data-surface=inside][data-orientation=fold] .portable-keys{gap:1px}#portable[data-surface=inside] #portable-library{grid-template-columns:1fr}#portable[data-surface=cover] .portable-header h2{font-size:18px}.portable-surface span{font-size:11px}#portable[data-layout=flip] .portable-front-lid{top:38px;bottom:71px}#portable[data-layout=flip] .portable-lid-front>span{font-size:5px}#portable[data-layout=flip] .portable-lid-back{border-width:7px}#portable[data-layout=flip] .portable-lid-back b{font-size:25px}}@media(prefers-reduced-motion:reduce){.portable-front-lid,.portable-tape{transition:none}#portable[data-inserting=true] .portable-tape{animation:none}}
#portable[data-surface=cover] #portable-tape-box{display:none}#portable[data-surface=inside] .portable-controls-pane{display:flex;flex-direction:column}#portable[data-surface=inside] .portable-library-head{order:0}#portable[data-surface=inside] #portable-library{order:1}#portable[data-surface=inside] .portable-position{order:2}#portable[data-surface=inside] .portable-volume{order:3}#portable[data-surface=inside] .portable-sound{order:4}#portable[data-surface=inside][data-orientation=fold] .portable-machine{max-width:300px}#portable[data-surface=inside][data-orientation=fold] .portable-deck-pane{min-height:385px;padding-top:15px}#portable[data-surface=inside][data-orientation=fold] .portable-top{margin-bottom:12px}#portable[data-surface=inside][data-orientation=fold] .portable-brand{margin-bottom:12px}#portable[data-surface=inside][data-orientation=fold] .portable-door{padding:13px 10px 23px}#portable[data-surface=inside][data-orientation=fold] .portable-reel-window{padding:10px 5px}#portable[data-surface=inside][data-orientation=fold] .portable-keys{margin-top:12px}#portable[data-surface=inside][data-orientation=fold] .portable-bottom{margin-top:11px}.portable-controls-pane{scroll-margin-top:12px}
/* Exposed cassette transport for the Fold prototype. */
#portable[data-kind=cassette] .portable-door{min-height:210px}.portable-empty-bay{overflow:hidden;background:repeating-linear-gradient(105deg,#273136 0 1px,#303b3e 2px 3px);border:6px solid #121b1d}.portable-empty-bay>i{position:absolute;top:34%;width:32px;height:32px;z-index:2;box-shadow:0 0 0 12px #111a1c,0 0 0 15px #667373}.portable-empty-bay>i:first-child{left:20%}.portable-empty-bay>i:nth-child(2){right:20%}.mechanism-belt{position:absolute;left:17%;right:14%;top:28%;height:43%;border:4px solid #090d0e;border-radius:40%;transform:rotate(-8deg)}.mechanism-flywheel{position:absolute;right:10%;bottom:17%;width:58px;height:58px;border-radius:50%;background:repeating-conic-gradient(#778484 0 15deg,#354348 16deg 25deg);border:5px solid #9ea8a1;box-shadow:0 0 0 3px #13191a,inset 0 0 0 12px #5d686b}.mechanism-capstan{position:absolute;right:25%;bottom:12%;width:7px;height:22px;background:linear-gradient(90deg,#718383,#fff,#536867);border-radius:3px;z-index:3}.mechanism-roller{position:absolute;right:29%;bottom:10%;width:24px;height:24px;border:5px solid #0b1112;border-radius:50%;background:radial-gradient(circle,#ddd 0 17%,#586567 20% 45%,#20292c 48%)}.portable-head-block{position:absolute;left:43%;bottom:7%;width:40px;height:22px;border:2px solid #ccd4c9;background:linear-gradient(90deg,#58696c,#e0e5d7,#66777b);border-radius:5px 5px 2px 2px}.mechanism-guide{position:absolute;bottom:14%;width:5px;height:17px;background:linear-gradient(90deg,#7c9891,#eee);border-radius:3px}.guide-left{left:18%}.guide-right{right:16%}.mechanism-screw{position:absolute;width:9px;height:9px;background:linear-gradient(45deg,#aab6b1 45%,#273639 46% 56%,#aab6b1 57%);border:2px solid #1c2528;border-radius:50%}.screw-one{top:10px;left:10px}.screw-two{bottom:10px;right:10px}.playing .mechanism-flywheel{animation:portable-spin 3s linear infinite}.playing .portable-head-block{translate:0 -3px}#portable[data-mechanism=true][data-kind=cassette][data-loaded=true] .portable-tape{background:#9cc4bc22;border-color:#b3c7bb77}#portable[data-mechanism=true] .portable-paper{opacity:.75}#portable[data-mechanism=true] .portable-reel-window{background:#09202555}#portable[data-mechanism=true] .portable-tape-bridge{opacity:.5}.portable-settings button,.portable-settings select{min-height:44px}#portable[data-surface=cover] .portable-settings{display:none}#portable[data-surface=cover] .portable-surface span{display:none}@media(prefers-reduced-motion:reduce){.playing .mechanism-flywheel{animation:none}}
.spool-left{scale:var(--portable-left,1)}.spool-right{scale:var(--portable-right,.65)}
#portable[data-kind=cassette][data-loaded=true] .portable-empty-bay>i{visibility:hidden}
/* Landscape personal-stereo proportions. */
#portable[data-kind=cassette] .portable-machine{aspect-ratio:auto;border-radius:7px;max-width:480px;padding:14px 18px}
#portable[data-kind=cassette] .portable-top{margin-bottom:10px}
#portable[data-kind=cassette] .portable-brand{margin-bottom:10px}
#portable[data-kind=cassette] .portable-door{min-height:145px;padding:10px 12px 20px;border-radius:4px}
#portable[data-kind=cassette] .portable-paper{padding:4px 8px}
#portable[data-kind=cassette] .portable-paper strong{margin-top:3px;font-size:14px}
#portable[data-kind=cassette] .portable-reel-window{padding:8px;margin:6px 3px}
#portable[data-kind=cassette] .portable-spool{width:40px;height:40px;border-width:5px}
#portable[data-kind=cassette] .portable-keys{margin:10px -4px 6px}
#portable[data-kind=cassette] .portable-bottom{margin-top:9px}
#portable[data-kind=cassette] .portable-front-lid,#portable[data-kind=cassette] .portable-lid-front,#portable[data-kind=cassette] .portable-lid-back{border-radius:4px}
#portable[data-kind=cassette][data-surface=cover] .portable-machine{width:100%;max-width:480px}
#portable[data-kind=cassette][data-surface=inside][data-orientation=fold] .portable-machine{width:48%;max-width:420px;margin-left:51%;padding:12px}
#portable[data-kind=cassette][data-surface=inside][data-orientation=fold] .portable-deck-pane{min-height:320px}
#portable[data-kind=cassette][data-orientation=flip] .portable-machine{max-width:380px}
#portable[data-kind=cassette][data-surface=inside][data-orientation=flip] .portable-deck-pane{padding-top:210px}
@media(max-width:600px){#portable[data-kind=cassette] .portable-machine{padding:10px;max-width:380px}#portable[data-kind=cassette] .portable-door{min-height:130px}#portable[data-kind=cassette] .portable-brand strong{font-size:11px}#portable[data-kind=cassette] .portable-brand>span{font-size:5px}#portable[data-kind=cassette] .portable-spool{width:34px;height:34px}#portable[data-kind=cassette] .portable-keys button{min-height:44px}}
#portable[data-kind=cassette] .portable-door{min-height:120px;padding:8px 10px 18px}#portable[data-kind=cassette][data-loaded=false] .portable-tape{display:none}#portable[data-kind=cassette] .portable-tape{padding:5px 7px}#portable[data-kind=cassette] .portable-paper>span{font-size:5px}#portable[data-kind=cassette] .portable-paper strong{font-size:12px;margin:1px 0}#portable[data-kind=cassette] .portable-reel-window{padding:4px;margin:4px 2px}#portable[data-kind=cassette] .portable-spool{width:32px;height:32px;border-width:4px}#portable[data-kind=cassette] .portable-keys button{min-height:44px;padding:5px 3px}#portable[data-kind=cassette] .portable-top{margin-bottom:6px}#portable[data-kind=cassette] .portable-brand{margin-bottom:6px}
/* Fixed case geometry: 109:80 face; transport sits on the top edge. */
#portable[data-kind=cassette] .portable-machine{box-sizing:border-box;aspect-ratio:109/80;height:auto;min-height:0;padding:0!important;border-radius:5px;isolation:isolate;overflow:visible;container-type:inline-size}
#portable[data-kind=cassette] .portable-machine::before{content:'';position:absolute;left:1%;right:1%;top:-12px;height:14px;background:linear-gradient(#dae0df,#6e7a7e);border:1px solid #dfe5e4;border-radius:3px 3px 0 0;z-index:-1}
#portable[data-kind=cassette] .portable-top{position:absolute;left:6%;right:6%;top:5%;margin:0;font-size:clamp(5px,2cqw,8px)}
#portable[data-kind=cassette] .portable-brand{position:absolute;left:6%;right:6%;top:14%;margin:0;align-items:center}
#portable[data-kind=cassette] .portable-brand strong{font-size:clamp(9px,3.3cqw,14px);letter-spacing:.6px}
#portable[data-kind=cassette] .portable-door{position:absolute;left:6%;right:6%;top:26%;bottom:10%;min-height:0!important;padding:3% 4%;box-sizing:border-box}
#portable[data-kind=cassette] .portable-tape{height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:2%}
#portable[data-kind=cassette][data-loaded=false] .portable-tape{display:none}
#portable[data-kind=cassette] .portable-paper{padding:2% 3%}
#portable[data-kind=cassette] .portable-reel-window{flex:1;max-height:45%;min-height:0;padding:2%;margin:2%}
#portable[data-kind=cassette] .portable-spool{width:14cqw;height:14cqw;max-width:50px;max-height:50px;box-sizing:border-box;flex-shrink:0}
#portable[data-kind=cassette] .portable-keys{position:absolute;left:25%;right:4%;top:-38px;height:38px;display:flex;margin:0;gap:3px;z-index:8}
#portable[data-kind=cassette] .portable-keys button{min-width:0;min-height:44px;height:44px;padding:4px 1px;border-radius:3px 3px 0 0;border-bottom:5px solid #526069;background:linear-gradient(90deg,#9aa3a5,#f0f2e9 45%,#a8b0af);box-shadow:1px -2px 3px #0005;color:#17272c}
#portable[data-kind=cassette] .portable-keys button span{font-size:12px}
#portable[data-kind=cassette] .portable-keys small{font-size:5px;margin-top:3px}
#portable[data-kind=cassette] .portable-bottom{position:absolute;bottom:4%;left:6%;right:6%;margin:0;color:#263b42;font-size:6px}
#portable[data-kind=cassette] .portable-front-lid{left:4%;right:4%;top:25%;bottom:9%;border-radius:3px}
#portable[data-kind=cassette] .portable-lid-front{background:linear-gradient(#ccd1ce 0 12%,transparent 13% 91%,#aab4b5 92%)!important;color:#263b42;border:2px solid #e3e7de}
#portable[data-kind=cassette] .portable-lid-back{background:repeating-linear-gradient(#c9d0ce 0 1px,#aebcbf 2px 3px)!important;border:6px solid #b5bdbb!important;color:#344a52}
#portable[data-kind=cassette] .portable-hinge{top:28%;bottom:12%;left:2%;height:auto;width:5px}
#portable[data-kind=cassette] .portable-deck-pane{padding-top:55px!important}
#portable[data-kind=cassette][data-surface=inside][data-orientation=flip] .portable-deck-pane{padding-top:240px!important}
#portable[data-kind=cassette] .portable-machine{background:repeating-linear-gradient(0deg,#c2c8c7 0 1px,#bac2c3 2px 3px)!important;border-color:#e5e8e1!important;color:#263b42!important;box-shadow:inset 2px 2px 3px #fff9,inset -3px -4px 6px #637277,4px 7px 0 #58686e,7px 15px 22px #0008!important}
/* Cassette door tips towards the listener on a bottom hinge. */
#portable[data-kind=cassette] .portable-machine{perspective:950px}
#portable[data-kind=cassette] .portable-front-lid{transform-origin:center bottom;transform:rotateX(0deg);transition:transform .8s cubic-bezier(.22,.75,.25,1)}
#portable[data-kind=cassette][data-open=true] .portable-front-lid{transform:rotateX(-115deg)}
#portable[data-kind=cassette] .portable-lid-back{transform:rotateX(180deg)}
#portable[data-kind=cassette] .portable-hinge{top:auto!important;bottom:8%!important;left:9%!important;right:9%!important;width:auto!important;height:5px!important;background:repeating-linear-gradient(90deg,#b8c3be 0 13px,#46575b 14px 18px)}
#portable[data-kind=cassette][data-surface=inside] .portable-deck-pane{padding-top:55px!important;padding-bottom:125px;min-height:0}
#portable[data-kind=cassette][data-surface=inside][data-orientation=fold] .portable-machine{width:min(90%,420px);max-width:420px;margin-left:auto;margin-right:auto}
#portable[data-kind=cassette] .portable-door-glass{transform:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){#portable[data-kind=cassette] .portable-front-lid{transition:none}}
/* Raised top-edge transport keys, with a recessed guide rail. */
#portable[data-kind=cassette] .portable-keys{left:22%;right:6%;top:-32px;height:34px;gap:4px;align-items:flex-end;padding:0 4px 2px;background:linear-gradient(0deg,#263236 0 5px,transparent 6px);border-radius:3px;perspective:600px}
#portable[data-kind=cassette] .portable-keys button{position:relative;flex:1;box-sizing:border-box;height:34px;min-height:34px;padding:3px 1px 7px;overflow:visible;border:1px solid #172329;border-top:2px solid #d9e0dc;border-bottom:6px solid #4c5a60;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#8a9599 0%,#dce1de 12%,#bec6c5 70%,#8d9a9c 100%);color:#15252b;box-shadow:1px -2px 0 #e7ebe2,2px 1px 2px #0009;transform:none;transition:height .12s,box-shadow .12s,filter .12s}
#portable[data-kind=cassette] .portable-keys button::before{content:'';position:absolute;inset:-2px 0 auto;height:5px;border-radius:2px 2px 0 0;background:repeating-linear-gradient(90deg,#dce1db 0 3px,#a1adae 4px 5px);border-bottom:1px solid #748286;pointer-events:none}
#portable[data-kind=cassette] .portable-keys button::after{content:'';position:absolute;left:-2px;right:-2px;top:-10px;bottom:0;pointer-events:auto;background:transparent}
#portable[data-kind=cassette] .portable-keys button span{display:block;font:700 12px/14px system-ui;color:#19292e;text-shadow:0 1px #fff7}
#portable[data-kind=cassette] .portable-keys small{display:block;font:600 5px/7px system-ui;letter-spacing:.5px;margin:0;color:#24373d}
#portable[data-kind=cassette] .portable-keys button:disabled{opacity:1;cursor:not-allowed;color:#607073;filter:saturate(.3)}
#portable[data-kind=cassette] .portable-keys button:disabled span,#portable[data-kind=cassette] .portable-keys button:disabled small{color:#647578;text-shadow:none}
#portable[data-kind=cassette] .portable-keys button:active:not(:disabled),body.playing #portable[data-kind=cassette] #portable-play{height:27px;border-bottom-width:3px;transform:none;background:linear-gradient(90deg,#8a9698,#b8c4c0,#849295);box-shadow:inset 0 2px 3px #24343a99,1px 0 0 #dfe5dc}
#portable[data-kind=cassette] #portable-play{flex:1.2}
#portable[data-kind=cassette] #portable-eject{margin-left:7px;flex:.9;background:linear-gradient(90deg,#616e74,#8c9a9c,#526268);border-top-color:#b8c5c5;border-bottom-color:#263b43}
#portable[data-kind=cassette] #portable-eject span,#portable[data-kind=cassette] #portable-eject small{color:#f0f0de;text-shadow:0 1px #172a30}
#portable[data-kind=cassette] .portable-keys button:focus-visible{outline:3px solid #e9b862;outline-offset:5px}
@media(prefers-reduced-motion:reduce){#portable[data-kind=cassette] .portable-keys button{transition:none}}
/* Mechanical travel: the key sinks into its rail. */
#portable[data-kind=cassette] .portable-keys button{translate:0 0;transition:translate .13s cubic-bezier(.18,.8,.3,1),box-shadow .13s,filter .13s;touch-action:manipulation}
#portable[data-kind=cassette] .portable-keys button:active:not(:disabled),#portable[data-kind=cassette] .portable-keys button[data-key-down=true],body.playing #portable[data-kind=cassette] #portable-play{height:34px;min-height:34px;translate:0 12px;border-bottom-width:6px;transform:none;background:linear-gradient(90deg,#727e82,#adb8b5 45%,#7d8b8e);box-shadow:inset 0 3px 4px #1c2a2e99,0 -1px 0 #48585e,1px 0 0 #cad5cc;filter:brightness(.9)}
#portable[data-kind=cassette] .portable-keys button[data-key-down=true]::before,#portable[data-kind=cassette] .portable-keys button:active:not(:disabled)::before,body.playing #portable[data-kind=cassette] #portable-play::before{background:repeating-linear-gradient(90deg,#b7c0bc 0 3px,#7f8e90 4px 5px)}
#portable[data-kind=cassette] .portable-keys button::after{top:-22px}
@media(prefers-reduced-motion:reduce){#portable[data-kind=cassette] .portable-keys button{transition:none}}
#portable[data-kind=cassette] .portable-keys button[aria-pressed=true]{height:34px;translate:0 12px;box-shadow:inset 0 3px 4px #1c2a2e99;filter:brightness(.9)}
#portable[data-winding=forward] .portable-spool{animation:portable-spin .35s linear infinite!important}
#portable[data-winding=rewind] .portable-spool{animation:portable-spin .35s linear infinite reverse!important}
@media(prefers-reduced-motion:reduce){#portable[data-winding] .portable-spool{animation:none!important}}
/* Dedicated Fold experience: screen switching IS the opening action. */
#portable[data-fold-experience=true]{background:repeating-linear-gradient(0deg,#bdc5c4 0 1px,#c5ccca 2px 3px);padding:16px;color:#203139}
#portable[data-fold-experience=true] .portable-header,#portable[data-fold-experience=true] .portable-surface,#portable[data-fold-experience=true] .portable-settings,#portable[data-fold-experience=true] .portable-cable,#portable[data-fold-experience=true] .portable-deck-hint,#portable[data-fold-experience=true] .portable-footer,#portable[data-fold-experience=true] .portable-hinge{display:none!important}
#portable[data-fold-experience=true] .portable-halves{max-width:none;min-height:calc(100svh - 32px);align-items:center}
#portable[data-fold-experience=true] .portable-deck-pane{padding:40px 0 10px!important;min-height:0!important;border:0!important}
#portable[data-fold-experience=true] .portable-machine{width:100%!important;max-width:none!important;margin:auto!important;box-shadow:none!important;border:1px solid #7c8c90!important}
#portable[data-fold-experience=true][data-surface=cover] .portable-halves{display:block}
#portable[data-fold-experience=true][data-surface=cover] .portable-machine{height:calc(100svh - 100px);aspect-ratio:auto}
#portable[data-fold-experience=true][data-surface=cover] .portable-deck-pane{padding-top:40px!important}
#portable[data-fold-experience=true][data-surface=cover] .portable-door{top:30%;bottom:auto;aspect-ratio:100/64;left:6%;right:6%}
#portable[data-fold-experience=true][data-surface=cover] .portable-front-lid{top:30%;bottom:auto;aspect-ratio:100/64;transform:none!important;transition:none!important}
#portable[data-fold-experience=true][data-surface=cover] .portable-empty-bay{visibility:hidden}
#portable[data-fold-experience=true][data-surface=cover] .portable-top{top:5%}
#portable[data-fold-experience=true][data-surface=cover] .portable-brand{top:12%}
#portable[data-fold-experience=true][data-surface=cover] .portable-brand strong{font-size:20px}
#portable[data-fold-experience=true][data-surface=inside] .portable-halves{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
#portable[data-fold-experience=true][data-surface=inside] .portable-front-lid{display:none!important}
#portable[data-fold-experience=true][data-surface=inside] .portable-controls-pane{width:100%;max-height:calc(100svh - 60px);overflow:auto;background:#263438;color:#eef0e4;margin:0;box-sizing:border-box}
#portable[data-fold-experience=true] #portable-cover-import{display:block;margin:24px auto 0;background:#263438;color:#f4eedb;border:1px solid #7c898b}
#portable[data-fold-experience=true][data-surface=inside] .portable-sound{display:none}
#portable[data-fold-experience=true] .portable-keys{left:15%;right:5%}
#portable[data-fold-experience=true][data-surface=cover] #portable-cover-import{display:none!important}
#portable[data-fold-experience=true][data-surface=inside] #portable-cover-import{display:none!important}
#portable[data-fold-experience=true][data-surface=cover][data-loaded=false] .portable-lid-window::after{content:'OPEN PHONE TO LOAD A TAPE';position:absolute;inset:0;display:grid;place-items:center;font:8px system-ui;letter-spacing:2px;color:#b8c7c8;text-align:center;padding:10px}
/* A closed phone may be landscape: use the short edge to identify the inner display. */
#portable[data-fold-experience=true] .portable-halves{position:relative;min-height:calc(100svh - 32px)}
#portable[data-fold-experience=true][data-surface=cover] .portable-halves{display:grid;place-items:center}
#portable[data-fold-experience=true][data-surface=cover] .portable-machine{height:auto!important;aspect-ratio:109/80!important;width:min(88vw,calc((100svh - 88px)*1.3625))!important;margin:auto!important}
#portable[data-fold-experience=true][data-surface=cover] .portable-deck-pane{width:100%;padding:36px 0 0!important}
#portable[data-fold-experience=true][data-surface=cover] .portable-door,#portable[data-fold-experience=true][data-surface=cover] .portable-front-lid{top:26%;bottom:10%;aspect-ratio:auto}
#portable[data-fold-experience=true][data-surface=cover] .portable-brand strong{font-size:clamp(11px,3.3cqw,20px)}
#portable[data-fold-experience=true][data-surface=cover][data-fold-portrait=true] .portable-halves{position:absolute;left:50%;top:50%;width:100svh;height:100svw;min-height:0;transform:translate(-50%,-50%) rotate(90deg)}
#portable[data-fold-experience=true][data-surface=cover][data-fold-portrait=true] .portable-machine{width:min(85svh,calc((100svw - 65px)*1.3625))!important}
#portable[data-fold-experience=true][data-surface=inside] .portable-halves{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
#portable[data-fold-experience=true][data-surface=inside] .portable-halves::after{content:'';position:absolute;top:50%;left:0;right:0;height:8px;background:linear-gradient(#69777b,#172329,#82918e);border-radius:3px;pointer-events:none}
#portable[data-fold-experience=true][data-surface=inside] .portable-deck-pane{padding:30px 0 0!important;width:100%}
#portable[data-fold-experience=true][data-surface=inside] .portable-machine{width:min(90%,calc((50svh - 65px)*1.3625))!important;margin:auto!important}
#portable[data-fold-experience=true][data-surface=inside] .portable-controls-pane{max-height:calc(50svh - 40px);width:min(100%,760px);margin:auto;padding:14px}
#portable[data-fold-experience=true][data-surface=inside] .portable-position{margin-top:10px}
#portable[data-fold-experience=true][data-surface=inside] .portable-volume{margin:10px 0}
#portable[data-fold-experience=true][data-surface=cover] .portable-halves{grid-template-columns:minmax(0,1fr);width:100%}
.fold-display-switch{display:none}#portable[data-fold-experience=true] .fold-display-switch{display:flex;align-items:center;gap:8px;position:fixed;bottom:max(6px,env(safe-area-inset-bottom));right:8px;z-index:20;padding:5px 8px;border-radius:7px;background:#18272ee8;color:#eceddf;box-shadow:0 1px 6px #0004;font:10px system-ui}#portable[data-fold-experience=true] .fold-display-switch label{display:flex;gap:6px;align-items:center}#portable[data-fold-experience=true] .fold-display-switch select{min-height:36px;font:12px system-ui;padding:4px;background:#d5dcd5;color:#162b31}#portable[data-fold-experience=true] .fold-display-switch small{font:9px monospace;max-width:130px}