:root{color:#24282c;font-synthesis:none;text-rendering:optimizelegibility;background:#c9d0d7;font-family:Barlow Condensed,Arial Narrow,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{-webkit-tap-highlight-color:transparent;background:#c9d0d7;margin:0}button,h1,p{font:inherit}.desk{min-height:100dvh}.walkman{width:100%;min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));color:#2a3036;-webkit-user-select:none;user-select:none;background:linear-gradient(#ffffffb8 0%,#fff0 18%),repeating-linear-gradient(90deg,#c9d0d7 0 1px,#dfe4e9 1px 3px,#c3cbd3 3px 4px);flex-direction:column;display:flex;position:relative}.screw{background:linear-gradient(135deg,#0000 46%,#5d666e 46% 54%,#0000 54%),radial-gradient(circle at 35% 35%,#f5f7f8,#8b949c 62%,#5e676f);border-radius:50%;width:9px;height:9px;position:absolute;box-shadow:inset 0 0 0 1px #00000040}.screw.a{top:calc(12px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left))}.screw.b{top:calc(12px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right))}.screw.c{bottom:calc(12px + env(safe-area-inset-bottom));left:calc(14px + env(safe-area-inset-left))}.screw.d{bottom:calc(12px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right))}.brand{letter-spacing:.34em;text-transform:uppercase;justify-content:space-between;align-items:center;margin:6px 18px 0;font-size:22px;font-weight:600;display:flex}.led{background:#7a3030;border-radius:50%;width:9px;height:9px;box-shadow:inset 0 1px 2px #00000073}.led.is-on{background:#ff2d2d;box-shadow:0 0 8px #ff3a3a,inset 0 0 0 1px #fff6}.brand-end{align-items:center;gap:12px;display:flex}.nova{appearance:none;touch-action:manipulation;color:#f4f6f8;cursor:pointer;letter-spacing:.16em;text-transform:uppercase;background:#1a1e23;border:0;border-bottom:3px solid #070809;border-radius:6px;padding:7px 10px 5px;font-size:13px;font-weight:600}.nova:disabled{opacity:.4;cursor:default}.nova:focus-visible{outline-offset:2px;outline:2px solid #ff4d3a}.rack-wrap{margin:8px 0 0;position:relative}.rack{scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;gap:12px;padding:6px calc(50% - 56px) 10px;display:flex;overflow-x:auto}.rack::-webkit-scrollbar{display:none}.mini{scroll-snap-align:center;color:#f3ecdf;cursor:grab;opacity:.62;background:linear-gradient(#f6f1e6,#e4dccb);border:0;border-radius:4px;flex:0 0 112px;justify-content:space-between;align-items:center;height:58px;padding:0 8px;display:flex;position:relative;transform:scale(.92);box-shadow:inset 0 0 0 1px #5a462838}.mini:active{cursor:grabbing}.mini:disabled{cursor:default}.mini.is-in{opacity:1;transform:scale(1);box-shadow:inset 0 0 0 2px #ff4d3a}.mini:before{content:"";background:#3a3128;height:18px;position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}.mini strong{z-index:1;letter-spacing:0;text-overflow:ellipsis;text-transform:none;white-space:nowrap;min-width:0;font-family:Caveat,cursive;font-size:18px;font-weight:700;line-height:1;position:relative;overflow:hidden}.mini-reel{z-index:1;background:radial-gradient(circle at 50% 50%, #f7f4ee 0 3px, #2f2a26 3.5px 4px, transparent 4.5px), repeating-conic-gradient(from 8deg, #cfc6b6 0 12deg, #f8f5ef 12deg 24deg);border-radius:50%;flex:none;width:30px;height:30px;position:relative;box-shadow:inset 0 0 0 5px #2c261f,inset 0 0 0 7px #b7ab96}.rack-notch{pointer-events:none;border-bottom:7px solid #ff4d3a;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.rack-drop{color:#6a4040;letter-spacing:.14em;text-align:center;text-transform:uppercase;cursor:pointer;background:0 0;border:0;width:100%;min-height:18px;margin:0;padding:0;font-size:12px;font-weight:600;display:block}.rack-drop:disabled{visibility:hidden;cursor:default}.stage{margin-top:auto;margin-bottom:auto}.window{background:#1a1d21;border-radius:12px;padding:14px;overflow:hidden;box-shadow:inset 0 3px 8px #0000008c,0 1px #ffffff73}.cassette{background:linear-gradient(#f6f1e6,#e4dccb);border-radius:4px;justify-content:space-between;align-items:center;min-height:196px;padding:16px 10px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #5a46282e}.cassette:before{content:"";background:#3a3128;height:40px;position:absolute;top:50%;left:18px;right:18px;transform:translateY(-50%)}.reel{z-index:1;background:radial-gradient(circle at 50% 50%, #f7f4ee 0 8px, #2f2a26 8.5px 10px, transparent 10.5px), repeating-conic-gradient(from 8deg, #cfc6b6 0 10deg, #f8f5ef 10deg 20deg);border-radius:50%;flex:none;width:92px;height:92px;animation:2.6s linear infinite paused spin;position:relative;box-shadow:inset 0 0 0 14px #2c261f,inset 0 0 0 18px #b7ab96,0 1px #fff6}.reel.takeup{animation-duration:3.3s;animation-direction:reverse}.cassette.is-on .reel{animation-play-state:running}.side{z-index:1;color:#f3ecdf;letter-spacing:0;text-align:center;text-transform:none;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0 6px;font-family:Caveat,cursive;font-size:22px;font-weight:700;line-height:1;position:relative;overflow:hidden}.readout{text-align:center;margin:12px 8px 0}.count{color:#5c6770;letter-spacing:.22em;margin:2px 0 0;font-size:13px;font-weight:600}h1{color:#1d1a16;letter-spacing:0;text-transform:none;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;padding-bottom:2px;font-family:Caveat,cursive;font-size:2rem;font-weight:700;line-height:1.15;display:-webkit-box;overflow:hidden}.transport{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:8px;display:grid}.transport button{appearance:none;touch-action:manipulation;color:#f2f4f6;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(#3e444c,#1a1e23);border:0;border-bottom:4px solid #070809;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:76px;padding:10px 2px 8px;font-size:14px;font-weight:600;display:flex}.transport button span{letter-spacing:0;font-size:18px;line-height:1}.transport button:active:not(:disabled){border-bottom-width:2px;transform:translateY(2px)}.transport button:disabled{opacity:.42;cursor:default}.walkman.is-playing .key-play:disabled{opacity:1;color:#9aa1a8;background:#0c0e11;border-bottom-width:0;transform:translateY(4px);box-shadow:inset 0 4px 8px #000000b8}.transport .key-play span{color:#ff4d3a}.transport button:focus-visible,.slide:focus-visible{outline-offset:2px;outline:2px solid #ff4d3a}.switches{grid-template-columns:1fr 1fr;gap:16px;margin:18px 6px 4px;display:grid}.slide{appearance:none;touch-action:manipulation;color:#2c333a;cursor:pointer;text-align:left;letter-spacing:.14em;text-transform:uppercase;background:0 0;border:0;padding:4px 0 2px;font-size:14px;font-weight:600}.slide:disabled{opacity:.45;cursor:default}.slot{background:#23282e;border-radius:99px;height:36px;margin-top:8px;display:block;position:relative;box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff59}.knob{background:linear-gradient(#f7f8f9,#b4bcc4);border-radius:99px;width:48px;height:30px;transition:left .16s;position:absolute;top:3px;left:3px;box-shadow:0 1px 1px #00000059}.slide[aria-pressed=true] .knob{left:calc(100% - 51px)}.slide[data-repeat=off] .knob{left:3px}.slide[data-repeat=all] .knob{left:calc(50% - 24px)}.slide[data-repeat=one] .knob{left:calc(100% - 51px)}.slide small{color:#66707a;letter-spacing:.08em;justify-content:space-between;margin-top:5px;font-size:12px;display:flex}.slide em{opacity:.45;font-style:normal}.slide em.at{opacity:1;color:#1e242a}.meter{grid-template-columns:3.4em minmax(0,1fr) 3.4em;align-items:center;gap:10px;margin:16px 8px 2px;display:grid}.meter span{color:#3c454d;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:15px;font-weight:600}.meter span:last-child{text-align:right}.meter input{appearance:none;cursor:pointer;border:0;border-radius:99px;width:100%;height:8px;margin:0;box-shadow:inset 0 2px 3px #00000073,0 1px #ffffff59}.meter input:disabled{cursor:default;opacity:.7}.meter input::-webkit-slider-thumb{appearance:none;background:linear-gradient(#fff,#d7d0c4);border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 2px #1a1e23,0 1px 2px #00000059}.meter input::-moz-range-thumb{background:linear-gradient(#fff,#d7d0c4);border:0;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 2px #1a1e23}.meter input:focus-visible{outline-offset:4px;outline:2px solid #ff4d3a}@keyframes spin{to{transform:rotate(1turn)}}@media (height<=700px){.rack{padding-inline:calc(50% - 48px)}.mini{flex-basis:96px;height:50px}.mini-reel{width:24px;height:24px}.cassette{min-height:132px;padding:12px 8px}.reel{width:78px;height:78px;box-shadow:inset 0 0 0 12px #2c261f,inset 0 0 0 15px #b7ab96}h1{font-size:1.6rem}.readout{margin-top:8px}.meter{margin-top:10px}.transport button{min-height:64px}.slot{height:30px}.knob{height:24px;top:3px}}@media (width>=800px){body{background:radial-gradient(at 50% 30%,#e7edf2 0,#0000 55%),linear-gradient(#d5dde6 0%,#b7c2cd 100%)}.desk{place-items:center;padding:28px;display:grid}.walkman{border-radius:36px 36px 30px 30px;width:min(400px,100%);min-height:min(700px,100dvh - 56px);padding:22px 18px 18px;box-shadow:inset 0 1px #fffc,inset 0 -10px 18px #46505c1f,0 22px 40px #303a4647}.screw.a,.screw.b{top:12px}.screw.c,.screw.d{bottom:12px}.screw.a,.screw.c{left:14px}.screw.b,.screw.d{right:14px}}.cassette.is-out{animation:.42s forwards tape-out}.cassette.is-in{animation:.5s cubic-bezier(.2,.8,.2,1) tape-in}@keyframes tape-out{to{opacity:0;transform:translateY(-125%)rotate(-7deg)}}@keyframes tape-in{0%{opacity:0;transform:translateY(-120%)rotate(6deg)}}.desk.is-open{height:100dvh;overflow:hidden}.box{z-index:30;background:#12161a75;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.box-card{width:min(560px,100%);min-height:280px;max-height:min(92dvh,760px);padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(#ffffffa6,#0000 18%),repeating-linear-gradient(90deg,#c9d0d7 0 1px,#e4e8ec 1px 3px);border-radius:22px 22px 0 0;flex-direction:column;display:flex;box-shadow:0 -12px 40px #14181c47}.box-bar{justify-content:space-between;align-items:center;padding:14px 16px 0;display:flex}.box-bar p{letter-spacing:.18em;text-transform:uppercase;margin:0;font-size:14px;font-weight:600}.box-back,.write-save{appearance:none;touch-action:manipulation;color:#2a3036;cursor:pointer;letter-spacing:.12em;text-transform:uppercase;background:0 0;border:0;font-size:14px;font-weight:600}.write{flex-direction:column;height:min(68dvh,600px);min-height:0;padding:12px 16px 16px;display:flex}.write-name,.write-find{color:#241e18;background:#fffdf8;border:0;border-radius:8px;width:100%}.write-name{padding:8px 12px;font-family:Caveat,cursive;font-size:32px}.write-find{margin-top:8px;padding:10px 12px;font-size:16px}.write-count{color:#5c6770;letter-spacing:.12em;text-transform:uppercase;margin:8px 2px;font-size:13px}.picks{background:#fffdf88c;border-radius:8px;flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow:auto}.picks label{letter-spacing:.02em;text-transform:none;border-bottom:1px solid #28303814;align-items:flex-start;gap:10px;padding:11px 12px;font-size:16px;display:flex}.picks input{flex:none;width:18px;height:18px;margin-top:3px}.write-save{color:#f4f6f8;background:#1a1e23;border-bottom:3px solid #070809;border-radius:8px;min-height:52px;margin-top:12px}.write-save:disabled{opacity:.4;cursor:default}@media (width>=800px){.box{align-items:center;padding:24px}.box-card{border-radius:22px;max-height:min(80dvh,720px)}}@media (prefers-reduced-motion:reduce){.reel,.cassette.is-out,.cassette.is-in{animation:none}.knob{transition:none}}