.mock{margin:0}.tv-frame{container-type:inline-size;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#0a0a0a}.tv{--dp: calc(100cqw / 960);--accent-tv: #e3b23c;position:relative;aspect-ratio:16 / 9;overflow:hidden;background:linear-gradient(180deg,#17181c,#0a0a0a 70%);color:#eee;font-family:Roboto,IBM Plex Sans,system-ui,sans-serif;outline:none;user-select:none;cursor:default}.tv:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-tv)}.tv svg{fill:currentColor;display:block}.tv .layer{position:absolute;inset:0;transition:opacity .2s}.tv .topbar{position:absolute;top:0;right:0;height:calc(68 * var(--dp));display:flex;align-items:center;gap:calc(14 * var(--dp));padding:0 calc(36 * var(--dp))}.tv .topbar .pill{width:calc(34 * var(--dp));height:calc(34 * var(--dp));border-radius:50%;background:#ffffff14;display:grid;place-items:center;color:#bababb}.tv .topbar .pill svg{width:calc(18 * var(--dp))}.tv .topbar .clock{font-size:calc(22 * var(--dp));font-weight:500;margin-left:calc(8 * var(--dp))}.tv .logo{position:absolute;top:calc(20 * var(--dp));height:calc(28 * var(--dp));display:flex;align-items:center;gap:calc(10 * var(--dp));font-size:calc(15 * var(--dp));letter-spacing:.04em;transition:left .2s}.tv .logo svg{height:100%;width:auto}.tv .logo b{font-weight:700}.tv .logo span{font-weight:300}.tv .rail{position:absolute;left:0;top:0;bottom:0;width:calc(92 * var(--dp));background:#1b1c1ee0;transition:width .18s ease-out;z-index:2}.tv .rail.open{width:calc(200 * var(--dp))}.tv .rail ul{list-style:none;margin:0;padding:calc(110 * var(--dp)) 0 0 calc(18 * var(--dp))}.tv .rail li{display:flex;align-items:center;gap:calc(16 * var(--dp));height:calc(56 * var(--dp));margin-bottom:calc(18 * var(--dp));white-space:nowrap;cursor:pointer}.tv .rail .dot{flex:none;width:calc(56 * var(--dp));height:calc(56 * var(--dp));border-radius:50%;display:grid;place-items:center;color:#bababb;transition:background .15s,color .15s}.tv .rail .dot svg{width:calc(26 * var(--dp))}.tv .rail li.current .dot{color:var(--accent-tv)}.tv .rail li.focus .dot{background:#fff;color:#0a0a0a}.tv .rail .name{font-size:calc(17 * var(--dp));opacity:0;transition:opacity .15s}.tv .rail.open .name{opacity:1}.tv .content{position:absolute;left:calc(120 * var(--dp));right:0;top:calc(84 * var(--dp));bottom:0;overflow:hidden}.tv .rows{transition:transform .2s ease-out}.tv .row{height:calc(170 * var(--dp))}.tv .row h4{margin:0 0 calc(6 * var(--dp)) calc(12 * var(--dp));font-size:calc(17 * var(--dp));font-weight:500}.tv .tiles{display:flex;gap:calc(18 * var(--dp));padding:calc(10 * var(--dp)) calc(12 * var(--dp));transition:transform .2s ease-out}.tv .tile{flex:none;width:calc(190 * var(--dp));height:calc(107 * var(--dp));border-radius:calc(12 * var(--dp));opacity:.74;cursor:pointer;display:flex;align-items:flex-end;padding:calc(12 * var(--dp));font-size:calc(15 * var(--dp));font-weight:500;color:#ffffffeb;transition:transform .15s,opacity .15s,box-shadow .15s}.tv .tile.brand{align-items:center;justify-content:center;padding:calc(8 * var(--dp));font-size:calc(21 * var(--dp));font-weight:700;letter-spacing:-.01em;text-align:center}.tv .xitem .thumb.brand{display:grid;place-items:center;font-size:calc(11 * var(--dp));font-weight:700}.tv .tile.focus{opacity:1;transform:scale(1.08);box-shadow:0 0 0 calc(3 * var(--dp)) #fff}.tv .band{position:absolute;left:0;right:0;top:25%;height:0}.tv .xbtn{position:absolute;top:0;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);transition:left .22s ease-out,width .22s,height .22s,opacity .22s;background:#ffffff1a;cursor:pointer}.tv .xbtn svg{width:50%}.tv .xbtn.focus{box-shadow:0 0 calc(24 * var(--dp)) #ffffff8c;background:#ffffff38}.tv .xname{position:absolute;top:calc(25% + 44 * var(--dp));left:calc(30% - 36 * var(--dp));font-size:calc(20 * var(--dp));font-weight:500}.tv .xitem{position:absolute;left:calc(30% - 36 * var(--dp));display:flex;align-items:center;gap:calc(16 * var(--dp));transition:top .2s ease-out,opacity .2s;cursor:pointer;font-size:calc(17 * var(--dp))}.tv .xitem .thumb{width:calc(104 * var(--dp) * .9);height:calc(58 * var(--dp) * .9);border-radius:calc(8 * var(--dp));flex:none}.tv .xitem.focus .label{animation:breathe 1.2s ease-in-out infinite alternate}.tv .xitem.focus .thumb{box-shadow:0 0 calc(18 * var(--dp)) #ffffff73}@keyframes breathe{0%{text-shadow:0 0 calc(4 * var(--dp)) rgba(255,255,255,.35)}to{text-shadow:0 0 calc(14 * var(--dp)) rgba(255,255,255,.9)}}.tv .toast{position:absolute;left:50%;bottom:calc(28 * var(--dp));transform:translate(-50%);background:#1b1c1ef2;border-radius:calc(20 * var(--dp));padding:calc(8 * var(--dp)) calc(18 * var(--dp));font-size:calc(15 * var(--dp));opacity:0;transition:opacity .2s;pointer-events:none}.tv .toast.show{opacity:1}.mock-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}.mock button{font:inherit;font-size:.9rem;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer}.mock button:hover{border-color:var(--muted)}.mode{display:flex;gap:8px}.mode button[aria-pressed=true]{border-color:var(--text);font-weight:500}.mode .tag{font-family:var(--mono);font-size:.75rem;color:var(--accent);margin-left:4px}.pad{display:flex;gap:6px}.pad button{min-width:40px;font-family:var(--mono)}.mock-hint{color:var(--muted);font-size:.9rem;margin:10px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media(prefers-reduced-motion:reduce){.tv *,.tv .layer{transition:none!important;animation:none!important}}