.tt {
  --tt-gold: #c89a43;
  --tt-gold-dark: #78511d;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tt-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 520px; }
.tt-stage {
  position: relative;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  color: #e6eef2;
  background: radial-gradient(circle at 47% 42%, #365b71 0, #1a3446 54%, #102635 100%);
  transition: background .35s ease;
}
.tt-stage:before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / .012) 4px 5px), linear-gradient(135deg, rgb(255 255 255 / .08), transparent 44%); pointer-events: none; }
.tt[data-version="b"] .tt-stage { background: radial-gradient(circle at 48% 45%, #76562b 0, #34414a 55%, #142937 100%); }
.tt-stage-top, .tt-stage-foot { position: absolute; z-index: 3; left: 31px; right: 31px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 800; letter-spacing: .21em; white-space: nowrap; }
.tt-stage-top { top: 24px; }.tt-stage-foot { bottom: 22px; color: #acc4ce; }.tt-power { color: #9bd2ef; }.tt-power:first-letter { color: #7fdbb0; }
.tt-cassette {
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 50%;
  width: min(82%, 545px);
  aspect-ratio: 1.67;
  transform: translate(-50%, -50%);
  border: 1px solid #f8f5ef;
  border-radius: 22px;
  background: linear-gradient(135deg, #ece9e1 0, #d5d4d0 47%, #c1c3c2 100%);
  box-shadow: 0 25px 40px rgb(0 0 0 / .32), inset 0 0 0 5px rgb(255 255 255 / .32), inset 0 -10px 18px rgb(76 84 88 / .15);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tt-cassette:before { content: ""; position: absolute; inset: 7px; border: 1px solid rgb(55 64 68 / .14); border-radius: 17px; pointer-events: none; }
.tt[data-version="b"] .tt-cassette { border-color: #f7e3ae; background: linear-gradient(130deg, #e7cf8a 0, #c99b44 38%, #e4c77a 72%, #b9842e 100%); box-shadow: 0 26px 42px rgb(0 0 0 / .32), 0 0 28px rgb(229 183 91 / .14), inset 0 0 0 5px rgb(255 255 255 / .25), inset 0 -10px 17px rgb(106 65 12 / .16); }
.tt-screw { position: absolute; z-index: 3; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #334653 0 24%, #8b9698 28% 45%, #43515a 50% 64%, #b7bcbc 69%); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.tt-screw-tl { top: 6%; left: 4%; }.tt-screw-tr { top: 6%; right: 4%; }.tt-screw-bl { bottom: 6%; left: 4%; }.tt-screw-br { bottom: 6%; right: 4%; }
.tt-cassette-paper { position: absolute; top: 9%; left: 9%; right: 9%; height: 59%; padding: 4% 4% 2%; border: 1px solid rgb(61 67 66 / .17); border-radius: 13px; background: #f9f7ef; color: #1b2a33; box-shadow: inset 0 1px 2px rgb(255 255 255 / .9); }
.tt[data-version="b"] .tt-cassette-paper { background: #fbf2d7; border-color: rgb(113 79 24 / .29); }
.tt-paper-head { display: flex; align-items: center; gap: 9px; height: 27%; min-width: 0; }
.tt-cover { width: 27px; height: 27px; flex: 0 0 27px; object-fit: cover; border-radius: 2px; }.tt-cover[hidden] { display: none; }
.tt-paper-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tt-tape-song { overflow: hidden; font-size: clamp(10px, 1.1vw, 15px); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .09em; }
.tt-tape-artist { overflow: hidden; color: #54636b; font-size: clamp(8px, .7vw, 10px); text-overflow: ellipsis; white-space: nowrap; }
.tt-cassette-version { margin-left: auto; padding: 4px 7px; border: 1px solid #9eaaa7; border-radius: 16px; color: #36516a; font-size: clamp(7px, .65vw, 9px); font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.tt[data-version="b"] .tt-cassette-version { border-color: #a7742e; color: #704710; }
.tt-cassette-window { position: relative; display: flex; align-items: center; justify-content: space-evenly; height: 55%; overflow: hidden; border: 3px solid #283238; border-radius: 10px; background: linear-gradient(180deg, #161d20, #232b2e 45%, #131a1e); box-shadow: inset 0 5px 9px rgb(0 0 0 / .5), 0 1px 2px rgb(0 0 0 / .1); }
.tt-cassette-window:after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgb(255 255 255 / .09), transparent 42% 70%, rgb(255 255 255 / .04)); pointer-events: none; }
.tt-reel { position: relative; z-index: 1; width: 24%; aspect-ratio: 1; border: 3px solid #3b4648; border-radius: 50%; background: radial-gradient(circle, #475157 0 12%, #e9e7dc 14% 21%, #748083 22% 28%, #f0eee3 29% 43%, #657174 44% 49%, #161f22 51% 100%); box-shadow: 0 1px 5px #000; }
.tt-reel:before { content: ""; position: absolute; inset: 19%; border-radius: 50%; background: repeating-conic-gradient(#e5e4d8 0 23deg, #607078 23deg 38deg, #d8d9d0 38deg 60deg); clip-path: circle(47%); opacity: .9; }
.tt-reel:after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: #65747a; box-shadow: 0 0 0 2px #e4e6de; }
.tt[data-playing="true"] .tt-reel { animation: tt-wind 2s linear infinite; }@keyframes tt-wind { to { transform: rotate(360deg); } }
.tt-window-bridge { width: 19%; height: 30%; border-radius: 3px; background: #3d4445; box-shadow: inset 0 0 0 1px #596061; }
.tt-paper-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; height: 18%; color: #738087; font-size: clamp(6px, .56vw, 8px); font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
.tt-cassette-mouth { position: absolute; left: 18%; right: 18%; bottom: 7%; height: 18%; background: linear-gradient(180deg, #aaa9a3, #8e908e); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); opacity: .65; }
.tt-cassette-mouth:before, .tt-cassette-mouth:after { content: ""; position: absolute; top: 38%; width: 10px; height: 10px; border: 4px solid #58616a; border-radius: 50%; background: #d8d8d1; }.tt-cassette-mouth:before { left: 42%; }.tt-cassette-mouth:after { right: 42%; }
.tt[data-version="b"] .tt-cassette-mouth { background: linear-gradient(180deg, #b68b42, #825d28); }
.tt-gold-line { position: absolute; left: 0; right: 0; bottom: 42px; margin: 0; color: #f2d793; font-family: var(--serif); font-size: clamp(20px, 2vw, 27px); font-style: italic; letter-spacing: -.04em; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.tt[data-version="b"] .tt-gold-line { opacity: 1; transform: none; }
.tt-panel { min-width: 0; display: flex; flex-direction: column; padding: 38px clamp(25px, 4vw, 58px) 33px; background: radial-gradient(circle at 100% 0%, rgb(70 149 201 / .09), transparent 38%), var(--surface); }
.tt-kicker { margin: 0 0 23px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .27em; }.tt[data-version="b"] .tt-kicker { color: var(--tt-gold-dark); }html[data-theme="dark"] .tt[data-version="b"] .tt-kicker { color: #f2ce80; }
.tt-title { margin: 0; color: var(--text); font-family: var(--serif); font-size: clamp(33px, 3vw, 48px); font-weight: 400; line-height: 1.02; letter-spacing: -.055em; overflow-wrap: anywhere; }
.tt-description { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.tt-select-label { display: flex; flex-direction: column; gap: 7px; margin-top: 23px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.tt-select { width: 100%; min-height: 45px; padding: 8px 33px 8px 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-raised); color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.tt-roles { min-height: 18px; margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.tt-divider { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 14px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.tt-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-choice { min-width: 0; min-height: 46px; padding: 8px; border: 1px solid var(--control-border); border-radius: 5px; background: transparent; color: var(--text); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.tt-choice[aria-pressed="true"] { border-color: var(--button-bg); background: var(--button-bg); color: #fff; box-shadow: 0 5px 13px rgb(0 93 187 / .2); }
.tt[data-version="b"] .tt-choice[aria-pressed="true"] { border-color: #ad792c; background: linear-gradient(120deg, #dbb863, #b7802e); color: #281d0c; box-shadow: 0 5px 13px rgb(116 72 17 / .18); }
.tt-choice:disabled { opacity: .55; cursor: not-allowed; }
.tt-transport { display: flex; gap: 9px; margin-top: 14px; }.tt-load, .tt-play { min-height: 43px; padding: 8px 20px; border: 1px solid var(--button-bg); border-radius: 24px; background: var(--button-bg); color: #fff; font-size: 12px; font-weight: 800; }.tt-load[hidden], .tt-play[hidden] { display: none; }.tt-play:disabled, .tt-load:disabled { opacity: .5; cursor: not-allowed; }
.tt-time { display: flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }.tt-time span:first-child { margin-right: auto; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.tt-seek { width: 100%; margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; }.tt-seek:disabled { cursor: not-allowed; opacity: .5; }.tt-status { min-height: 20px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.tt-teaser-note { margin: auto 0 0; padding-top: 38px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .22em; line-height: 1.7; }
@media(max-width:850px) { .tt-layout { grid-template-columns: 1fr; }.tt-stage { min-height: 420px; }.tt-cassette { width: min(78%, 480px); }.tt-panel { padding: 30px; }.tt-teaser-note { margin-top: 25px; } }
@media(max-width:480px) { .tt { border-radius: 9px; }.tt-stage { min-height: 335px; }.tt-stage-top, .tt-stage-foot { left: 18px; right: 18px; font-size: 8px; letter-spacing: .13em; }.tt-stage-top { top: 17px; }.tt-stage-foot { bottom: 16px; }.tt-cassette { width: 87%; top: 48%; border-radius: 13px; }.tt-cassette:before { inset: 4px; border-radius: 10px; }.tt-screw { width: 9px; height: 9px; }.tt-cassette-paper { border-radius: 7px; }.tt-cassette-window { border-width: 2px; border-radius: 6px; }.tt-reel { border-width: 2px; }.tt-paper-head { gap: 5px; }.tt-cover { width: 18px; height: 18px; flex-basis: 18px; }.tt-tape-song { font-size: 9px; }.tt-tape-artist { font-size: 7px; }.tt-cassette-version { padding: 2px 4px; font-size: 6px; }.tt-paper-foot { font-size: 5px; letter-spacing: .1em; }.tt-gold-line { bottom: 38px; font-size: 22px; }.tt-panel { padding: 25px 20px 24px; }.tt-kicker { margin-bottom: 14px; }.tt-title { font-size: 36px; }.tt-select-label { margin-top: 18px; }.tt-divider { font-size: 8px; }.tt-choice { font-size: 11px; }.tt-teaser-note { font-size: 9px; } }
@media(max-width:340px) { .tt-stage { min-height: 292px; }.tt-cassette { width: 89%; }.tt-stage-top .tt-stamp:last-child { display: none; }.tt-gold-line { bottom: 31px; font-size: 18px; }.tt-panel { padding: 22px 16px; }.tt-title { font-size: 32px; }.tt-choice { font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { .tt[data-playing="true"] .tt-reel { animation: none; } }