.tape-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:64px;margin-top:32px}.recorder{width:100%;height:auto;filter:drop-shadow(0 16px 12px #29372c20)}.spool{animation:reel-turn 5s linear infinite;animation-play-state:paused}.is-playing .spool{animation-play-state:running}@keyframes reel-turn{to{transform:rotate(360deg)}}.transport{display:flex;justify-content:center;gap:10px;margin:28px 0}.transport button,#tape-retry{border:1px solid #a5ac9a;border-radius:30px;background:transparent;padding:14px 20px;color:inherit;font:inherit;cursor:pointer}.transport #tape-play{background:#294a34;color:#fafaf8;min-width:150px}.transport button:disabled{opacity:.45;cursor:wait}.tape-now{text-align:center}.tape-now h2{font-size:36px;margin:12px}.tape-now p,.tape-note{font-size:14px}.tape-note{text-align:center;opacity:.7;margin:25px 0}.tape-test details{font-size:13px;margin-top:20px}.tape-test details iframe{border:0;margin-top:15px}.loop-picker{border-top:1px solid #a7ad9b}.loop-picker-head{padding:22px 0}.loop-picker-head h2{font-size:30px;margin:10px 0}.loop-picker ol{list-style:none;padding:0;margin:0;max-height:630px;overflow:auto}.loop-picker button{display:flex;gap:18px;align-items:center;width:100%;background:transparent;border:0;border-top:1px solid #b6bbaa;color:inherit;padding:17px 14px;text-align:left;font:inherit;cursor:pointer}.loop-picker button>span:first-child{font-size:11px;opacity:.6}.loop-picker button b{font-size:15px;font-weight:500;flex:1}.row-state{font-size:11px}.loop-picker button[aria-current=true]{background:#dce5d2}.loop-picker button:focus-visible,.transport button:focus-visible{outline:3px solid #617c4a;outline-offset:3px}@media(max-width:800px){.tape-layout{grid-template-columns:1fr;gap:35px}.loop-picker ol{max-height:420px}.transport{gap:6px}.transport button{padding:13px 15px}}@media(prefers-reduced-motion:reduce){.spool{animation-duration:15s}}

.mechanical-counter{height:40px;display:flex;align-items:center;justify-content:center;gap:4px;background:#f5f3eb;border:3px solid #717969;border-radius:3px;box-shadow:inset 0 2px 4px #0004;box-sizing:border-box;color:#20271f;font:26px/34px 'Courier New',monospace;overflow:hidden}.counter-wheel{position:relative;display:block;width:28px;height:34px;background:#fffef8;perspective:180px;overflow:hidden;text-align:center;box-shadow:inset 1px 0 2px #0004}.counter-strip{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:translateZ(-52px) rotateX(0deg);will-change:transform}.counter-strip b{position:absolute;inset:0;display:block;height:34px;line-height:34px;font-weight:600;color:#232a20;background:linear-gradient(#e1dfd5,#fffffc 38%,#f8f7f0 65%,#d9d7cd);backface-visibility:hidden;transform:rotateX(calc(var(--digit) * var(--step,-36deg))) translateZ(var(--radius,52px))}.mechanical-counter i{font:22px/34px monospace;font-style:normal;color:#30382c}.tape-motion{stroke-dasharray:4 18;animation:tape-travel 1.2s linear infinite;animation-play-state:paused}.is-playing .tape-motion{animation-play-state:running}@keyframes tape-travel{to{stroke-dashoffset:-44}}
.play-lamp{opacity:.22}.is-playing .play-lamp{animation:play-blink 1s steps(1,end) infinite;filter:drop-shadow(0 0 5px #ff4330)}@keyframes play-blink{0%,49%{opacity:1}50%,100%{opacity:.22}}

#tape-deck{position:relative;isolation:isolate}.recorder{display:block}.counter-mount{position:absolute;left:41.9%;top:75%;width:17%;height:6.62%;z-index:1;overflow:hidden}.counter-mount .mechanical-counter{width:170px;transform:scale(var(--counter-scale,1));transform-origin:top left}

.rotary-control{position:absolute;left:72.5%;top:65.441176%;width:16%;height:25%;border:0;padding:0;margin:0;background:transparent;color:inherit;cursor:pointer;z-index:2;-webkit-appearance:none;appearance:none;touch-action:manipulation}.rotary-control svg{display:block;width:100%;height:100%;overflow:visible}.rotary-handle{transform-box:fill-box;transform-origin:center;transform:rotate(-24deg);transition:transform 350ms cubic-bezier(.2,.8,.3,1)}.is-playing .rotary-handle{transform:rotate(24deg)}.rotary-control:focus-visible{outline:3px solid #294a34;outline-offset:4px;border-radius:50%}.rotary-control:disabled{cursor:wait}.rotary-control:not(:disabled):hover .rotary-handle{filter:brightness(1.12)}

.reel-glare{opacity:.7}.is-playing .reel-glare{animation:plastic-shimmer 5s ease-in-out infinite}@keyframes plastic-shimmer{0%,100%{opacity:.5}30%{opacity:.95}60%{opacity:.55}80%{opacity:.85}}

.loop-demo-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #b6bbaa;border-bottom:1px solid #b6bbaa;padding:18px 0;margin-top:25px}.loop-demo-nav label{font:11px monospace;letter-spacing:1px}.loop-demo-nav>div{display:flex;align-items:center;gap:16px}.loop-demo-nav select{font:inherit;color:inherit;background:#fafaf8;border:1px solid #a5ac9a;border-radius:4px;padding:10px 30px 10px 12px;max-width:210px}.loop-demo-nav a{font-size:22px;text-decoration:none;padding:8px}@media(max-width:550px){.loop-demo-nav{align-items:flex-start;flex-direction:column;gap:10px}.loop-demo-nav>div{width:100%;justify-content:space-between}.loop-demo-nav select{flex:1}}