/* ==========================================================================
   ИГРАЙ — МАШИНА ВРЕМЕНИ (29.09.2026, 4.0): плёнка кадров в профиле и просмотрщик.
   Просмотрщик — всегда «тёмная комната», как у лайтбокса: кадры тёмные, и так они
   одинаково читаются в любой теме. Анимации только на переходах и в прогоне.
   ========================================================================== */
.tm, .tm-strip { --tm-a: 240, 178, 68; --tm-c: 95, 180, 201; }

/* ── плёнка в профиле ── */
.vt-tm { margin-top: 16px; }
.vt-tm .vt-sub { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.vt-tm-play {
    margin-left: auto; flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid rgba(var(--vt-a), .6); background: rgba(var(--vt-a), .08);
    color: var(--accent); font: inherit; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
}
.tm-strip {
    display: flex; overflow-x: auto; padding: 13px 8px 12px; border-radius: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background-color: #050608;
    /* перфорация плёнки сверху и снизу */
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .16) 0 1.8px, transparent 2.3px),
        radial-gradient(circle, rgba(255, 255, 255, .16) 0 1.8px, transparent 2.3px);
    background-size: 12px 8px, 12px 8px;
    background-position: 3px 1px, 3px calc(100% - 1px);
    background-repeat: repeat-x;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.tm-strip::-webkit-scrollbar { display: none; }
.tm-strip-empty { padding: 20px 6px; font-size: 10px; color: #6f7d86; }
.tm-fr {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 0 5px; background: none; border: 0; cursor: pointer; font: inherit;
}
.tm-fr-img {
    display: block; width: 56px; aspect-ratio: 390 / 844; border-radius: 3px; overflow: hidden;
    background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .15s;
}
.tm-fr:active .tm-fr-img { transform: scale(.96); }
.tm-fr-img img, .tm-th span img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tm-fr b { font-size: 11px; font-weight: 600; color: #cfd8dd; font-variant-numeric: tabular-nums; }
.tm-fr i { margin-top: -4px; font-style: normal; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: #6f7d86; }
.tm-fr.cur .tm-fr-img { box-shadow: 0 0 0 1.5px rgb(var(--tm-a)), 0 0 14px rgba(var(--tm-a), .35); }
.tm-fr.cur b { color: rgb(var(--tm-a)); }
.tm-fr.gen b { color: #8fc3d1; }
.tm-fr.gen .tm-fr-img img { object-position: center; }
.tm-fr-img.txt, .tm-gth-img.txt { display: flex; align-items: center; padding: 4px; background: #efe9dc; }
.tm-txth { display: block; font-size: 6.5px; line-height: 1.35; color: #2b2721; overflow: hidden; }
.tm-txth b { font-weight: 500; }
.tm-fr-sep {                                   /* граница: до этого — поколения без своего кода */
    flex: none; align-self: stretch; display: flex; align-items: center; margin: 0 5px 0 3px; padding: 0 4px;
    border-left: 1px dashed rgba(var(--tm-a), .45);
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(var(--tm-a), .85);
}
/* снимок в карточке поколения */
.vt-gen.tm-has { cursor: pointer; transition: border-color .15s; }
.vt-gen.tm-has:hover { border-color: rgba(var(--vt-a), .45); }
.tm-gth { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.tm-gth-img { flex: none; width: 48px; height: 34px; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--glass-border, rgba(255, 255, 255, .12)); }
.tm-gth-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-gth-img .tm-txth { font-size: 5px; }
.tm-gth i { font-style: normal; font-size: 9.5px; letter-spacing: .3px; color: var(--acc2, var(--cyan)); }

/* кадры внутри релиза и пункты с кадром */
.tm-rel { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 10px; scrollbar-width: none; }
.tm-rel::-webkit-scrollbar { display: none; }
.tm-th { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.tm-th span { display: block; height: 78px; border-radius: 5px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--glass-border, rgba(255, 255, 255, .12)); }
.tm-th i { max-width: 104px; font-style: normal; font-size: 9px; letter-spacing: .4px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-th:active span { transform: scale(.96); }
.vt-rel-body li.tm-has { cursor: pointer; }
.vt-rel-body li.tm-has::after { content: ' ◧'; font-size: 10px; color: var(--acc2, var(--cyan)); }

/* ── просмотрщик ── */
body.tm-open { overflow: hidden; }
.tm {
    position: fixed; inset: 0; z-index: 9990;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + var(--tg-pad, 0px)) 0 env(safe-area-inset-bottom, 0px);
    background:
        radial-gradient(120% 60% at 50% -12%, rgba(var(--tm-a), .10), transparent 62%),
        radial-gradient(80% 50% at 100% 110%, rgba(var(--tm-c), .07), transparent 70%),
        #05070a;
    color: #e6edf1;
}
.tm[hidden] { display: none; }
.tm::before {                                   /* сетка монитора, еле видная */
    content: ''; position: fixed; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(120, 190, 210, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120, 190, 210, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(90% 80% at 50% 40%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000 30%, transparent 100%);
}
.tm > * { position: relative; }
.tm-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px 2px; }
.tm-title { font-size: 11px; font-weight: 600; letter-spacing: 3.4px; text-transform: uppercase; color: rgb(var(--tm-a)); }
.tm-keys { margin-left: auto; font-size: 9.5px; letter-spacing: .4px; color: #56646d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-x {
    flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14);
    color: #9aa8b1; font-size: 20px; line-height: 1;
}
.tm-keys + .tm-x { margin-left: 0; }
@media (hover: none), (max-width: 899px) { .tm-keys { display: none; } .tm-keys + .tm-x { margin-left: auto; } }

.tm-grid {
    flex: 1; display: grid; gap: 12px; padding: 8px 14px 22px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "stage" "chips" "rail" "side";
}

/* шапка: номер версии семисегментником */
.tm-head { grid-area: head; display: flex; align-items: center; gap: 14px; min-width: 0; }
.tm-lcd { display: inline-flex; align-items: flex-end; gap: 4px; flex: none; filter: drop-shadow(0 0 7px rgba(var(--tm-a), .55)); }
.tm-sg { display: block; width: 21px; height: 38px; }
.tm-sg.nar { width: 8px; }
.tm-sg.sp { width: 7px; }
.tm-sg rect { fill: rgba(var(--tm-a), .08); }
.tm-sg rect.on { fill: rgb(var(--tm-a)); }
.tm-vn { min-width: 0; }
.tm-vn b { display: block; font-size: 16px; font-weight: 500; letter-spacing: 3.2px; text-transform: uppercase; color: #eef3f5; }
.tm-vn small { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .3px; color: #7d8b94; font-variant-numeric: tabular-nums; }

/* сцена и устройство */
.tm-stage { grid-area: stage; position: relative; height: min(60vh, 640px); display: flex; align-items: center; justify-content: center; min-width: 0; }
.tm-dev { position: relative; box-sizing: border-box; flex: none; transition: width .28s cubic-bezier(.3, .7, .2, 1), height .28s cubic-bezier(.3, .7, .2, 1), border-radius .28s; }
.tm-bar { display: none; }
.tm-scr {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; background: #000;
    touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.tm-img, .tm-peek {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none;
}
.tm-dev--phone {
    padding: 10px; border-radius: 38px;
    background: linear-gradient(150deg, #20272f, #07090b 38%, #0d1116 80%, #1a2128);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 4px #020304, 0 0 0 5px rgba(255, 255, 255, .06),
        0 34px 80px rgba(0, 0, 0, .75), 0 0 90px rgba(var(--tm-c), .07);
}
.tm-dev--phone .tm-scr { border-radius: 29px; }
.tm-dev--phone::before {                       /* кнопка сбоку */
    content: ''; position: absolute; right: -7px; top: 22%; width: 3px; height: 54px; border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #11161b, #2a323b);
}
.tm-dev--desk {
    padding: 11px; border-radius: 12px; margin-bottom: 14px;
    background: linear-gradient(180deg, #151a20, #0a0d11);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 28px 70px rgba(0, 0, 0, .7), 0 0 90px rgba(var(--tm-c), .06);
}
.tm-dev--desk::after {                         /* основание ноутбука */
    content: ''; position: absolute; left: -6%; right: -6%; bottom: -13px; height: 11px;
    border-radius: 2px 2px 14px 14px;
    background: linear-gradient(180deg, #2a323b, #10151a 70%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .65);
}
.tm-dev--panel {
    padding: 0 7px 7px; border-radius: 9px;
    background: #0e1217;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .7);
}
.tm-dev--panel .tm-bar { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 3px; }
.tm-dev--panel .tm-bar i { width: 7px; height: 7px; border-radius: 50%; background: #2b333b; }
.tm-dev--panel .tm-bar span { margin-left: 8px; font-size: 9px; letter-spacing: .6px; color: #66747d; }
.tm-dev--panel .tm-scr { height: calc(100% - 20px); }
.tm-dev--crop {
    padding: 8px; border-radius: 14px;
    background: rgba(var(--tm-a), .04);
    box-shadow: 0 0 0 1px rgba(var(--tm-a), .5), 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(var(--tm-a), .08);
}
.tm-dev--crop .tm-scr { border-radius: 8px; }
.tm-dev--crop .tm-img, .tm-dev--crop .tm-peek { object-fit: contain; }
/* поколения до кода: снимок — полароид с подписью, слова — листок в линейку */
.tm-cap, .tm-txt { display: none; }
.tm-dev--photo {
    padding: 11px 11px 47px; border-radius: 3px; transform: rotate(-1.1deg);
    background: linear-gradient(180deg, #f4f1e9, #e6e0d3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tm-dev--photo .tm-scr { border-radius: 1px; background: #0b0d10; }
.tm-dev--photo .tm-img, .tm-dev--photo .tm-peek { object-fit: contain; object-position: center; }
.tm-dev--photo .tm-cap {
    display: block; position: absolute; left: 13px; right: 13px; bottom: 8px;
    font-size: 11px; line-height: 1.25; letter-spacing: .2px; color: #3a352d;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-cap small { display: block; margin-top: 2px; font-size: 9.5px; color: #8a8173; }
.tm-dev--text { padding: 0; border-radius: 4px; transform: rotate(.7deg); background: #efe9dc; box-shadow: 0 30px 70px rgba(0, 0, 0, .72); }
.tm-dev--text .tm-scr {
    border-radius: 4px; cursor: default;
    background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(80, 110, 160, .16) 27px 28px), #efe9dc;
}
.tm-dev--text .tm-img, .tm-dev--text .tm-peek { display: none; }
.tm-dev--text .tm-txt {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 10% 9% 14%; color: #2b2721;
}
.tm-txt-t { font-size: var(--fs, 15px); line-height: 1.6; }
.tm-txt-s { margin-top: 1.3em; font-size: calc(var(--fs, 15px) * .72); font-style: italic; color: #7a7266; }

/* штамп даты, как у плёночной мыльницы */
.tm-stamp {
    position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: flex-end; gap: 1.5px;
    pointer-events: none; opacity: .92; filter: drop-shadow(0 0 2.5px rgba(255, 110, 40, .9));
}
.tm-stamp .tm-sg { width: calc(var(--st, 12px) * .58); height: var(--st, 12px); }
.tm-stamp .tm-sg.nar { width: calc(var(--st, 12px) * .25); }
.tm-stamp .tm-sg.sp { width: calc(var(--st, 12px) * .34); }
.tm-dev--phone .tm-stamp { bottom: 10.5%; right: 7%; }            /* над навигацией, на «фото», а не на кнопках */
.tm-stamp .tm-sg rect { fill: transparent; }
.tm-stamp .tm-sg rect.on { fill: #ff8a3c; }

/* удержание: прошлая версия поверх */
.tm-peek { opacity: 0; transition: opacity .16s; }
.tm-scr.peeking .tm-peek { opacity: 1; }
.tm-peekl {
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 5px 11px; border-radius: 8px;
    background: rgba(0, 0, 0, .76); box-shadow: 0 0 0 1px rgba(var(--tm-c), .5);
    color: rgb(var(--tm-c)); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transition: opacity .14s; pointer-events: none;
}
.tm-scr.peeking .tm-peekl { opacity: 1; }
.tm-scr.peeking.none .tm-peek { opacity: 0; }

/* переключение канала: картинка схлопывается в светящуюся полосу, шум, раскрывается новая */
.tm-noise {
    position: absolute; inset: -40%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.tm-lines {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px);
}
.tm-scr.crt-out .tm-img { animation: tmOff .17s ease-in forwards; }
.tm-scr.crt-in .tm-img { animation: tmOn .34s cubic-bezier(.2, .8, .2, 1); }
.tm-scr.crt-out .tm-noise, .tm-scr.crt-in .tm-noise { animation: tmNoise .36s steps(6); }
.tm-scr.crt-in .tm-lines { animation: tmLines .6s ease-out; }
@keyframes tmOff {
    0% { transform: none; filter: none; }
    55% { transform: scale(1.02, .08); filter: brightness(2.2) saturate(.3); }
    100% { transform: scale(1.05, .004); filter: brightness(4); }
}
@keyframes tmOn {
    0% { transform: scale(1.05, .004); filter: brightness(4); }
    45% { transform: scale(1, 1.02); filter: brightness(1.35) contrast(1.15); }
    100% { transform: none; filter: none; }
}
@keyframes tmNoise {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: .5; transform: translate(-9%, 4%); }
    45% { opacity: .38; transform: translate(6%, -7%); }
    70% { opacity: .22; transform: translate(-3%, 8%); }
    100% { opacity: 0; transform: translate(4%, -2%); }
}
@keyframes tmLines { from { opacity: .7; } to { opacity: 0; } }
/* свайп между экранами версии */
.tm-scr.sl-out-l .tm-img { transform: translateX(-16%); opacity: 0; transition: transform .15s ease-in, opacity .15s ease-in; }
.tm-scr.sl-out-r .tm-img { transform: translateX(16%); opacity: 0; transition: transform .15s ease-in, opacity .15s ease-in; }
.tm-scr.sl-in-r .tm-img { animation: tmInR .24s ease-out; }
.tm-scr.sl-in-l .tm-img { animation: tmInL .24s ease-out; }
@keyframes tmInR { from { transform: translateX(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tmInL { from { transform: translateX(-14%); opacity: 0; } to { transform: none; opacity: 1; } }
/* прогон: развёртка видна всё время, как на записи с экрана */
.tm--play .tm-lines { opacity: .28; }

/* экраны версии */
.tm-chips { grid-area: chips; display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: none; min-width: 0; }
.tm-chips::-webkit-scrollbar { display: none; }
.tm-chip {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
    color: #9aa8b1; font: inherit; font-size: 11px; letter-spacing: .5px; white-space: nowrap;
}
.tm-chip.on { color: rgb(var(--tm-a)); border-color: rgba(var(--tm-a), .7); background: rgba(var(--tm-a), .1); }
.tm-ic svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* рельса времени */
.tm-rail { grid-area: rail; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tm-rail-in { position: relative; height: 58px; margin: 0 16px; touch-action: none; cursor: pointer; }
.tm-rl { position: absolute; left: 0; right: 0; top: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(var(--tm-a), .55)); }
.tm-rl.pro { right: auto; background: repeating-linear-gradient(90deg, rgba(var(--tm-c), .5) 0 4px, transparent 4px 8px); }
.tm-brk { position: absolute; top: 15px; width: 12px; margin-left: -6px; pointer-events: none; }
.tm-brk::before { content: '⫽'; display: block; text-align: center; font-size: 13px; line-height: 20px; font-style: normal; color: rgba(var(--tm-a), .7); }
.tm-rv.gen i { border-radius: 2px; border-color: rgba(var(--tm-c), .85); }
.tm-rv.gen b { color: #7fb7c6; }
.tm-rv.gen.on i { background: rgb(var(--tm-c)); box-shadow: 0 0 0 3px rgba(var(--tm-c), .2), 0 0 12px rgba(var(--tm-c), .85); }
.tm-rv.gen.on b { color: rgb(var(--tm-c)); }
.tm-mt { position: absolute; top: 20px; width: 1px; height: 10px; background: rgba(255, 255, 255, .14); }
.tm-mn { position: absolute; top: 45px; transform: translateX(-50%); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: #56646d; }
.tm-rv { position: absolute; top: 0; height: 44px; width: 26px; margin-left: -13px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.tm-rv i {
    position: absolute; left: 50%; top: 25px; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-sizing: border-box;
    border-radius: 50%; border: 2px solid rgba(var(--tm-a), .75); background: #05070a;
    transition: background .2s, box-shadow .2s;
}
.tm-rv b { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font-size: 10px; font-weight: 500; color: #9aa8b1; font-variant-numeric: tabular-nums; }
.tm-rv.dn b { top: 32px; }
.tm-rv.on i { background: rgb(var(--tm-a)); box-shadow: 0 0 0 3px rgba(var(--tm-a), .2), 0 0 12px rgba(var(--tm-a), .85); }
.tm-rv.on b { color: rgb(var(--tm-a)); font-weight: 700; }
.tm-rv.off { opacity: .32; cursor: default; }
.tm-ph {
    position: absolute; top: 13px; width: 2px; height: 24px; margin-left: -1px; pointer-events: none;
    background: rgb(var(--tm-a)); box-shadow: 0 0 9px rgba(var(--tm-a), .9);
    transition: left .38s cubic-bezier(.3, .7, .2, 1);
}
.tm-ctl { display: flex; justify-content: center; gap: 8px; }
.tm-b {
    min-width: 46px; height: 38px; padding: 0 14px; border: 0; cursor: pointer;
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    color: #e6edf1; font: inherit; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
}
.tm-b:disabled { opacity: .28; cursor: default; }
.tm-b:active:not(:disabled) { transform: scale(.96); }
.tm-play { min-width: 138px; color: rgb(var(--tm-a)); background: rgba(var(--tm-a), .08); box-shadow: inset 0 0 0 1px rgba(var(--tm-a), .7), 0 0 18px rgba(var(--tm-a), .1); }

/* что было в версии */
.tm-side { grid-area: side; min-width: 0; }
.tm-sum { font-size: 13px; line-height: 1.5; color: #cfd8dd; }
.tm-meta { margin-top: 6px; font-size: 10px; line-height: 1.55; color: #6a7881; }
.tm-meta b { color: #9aa8b1; font-weight: 500; }
.tm-sub { margin: 14px 0 6px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #6a7881; }
.tm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-items li { position: relative; padding: 6px 8px 6px 22px; border-radius: 8px; font-size: 12px; line-height: 1.42; color: #8795a0; }
.tm-items li::before { content: '+'; position: absolute; left: 8px; top: 6px; color: rgba(var(--tm-a), .8); }
.tm-items li.has { cursor: pointer; color: #cfd8dd; }
.tm-items li.has::after { content: ' ◧'; font-size: 10px; color: rgb(var(--tm-c)); }
.tm-items li.has:hover { background: rgba(255, 255, 255, .04); }
.tm-items li.on { color: #fff; background: rgba(var(--tm-a), .1); box-shadow: inset 2px 0 0 rgb(var(--tm-a)); }
.tm-items li small { margin-left: 4px; font-size: 10px; color: #6a7881; white-space: nowrap; }

/* широкий экран и панель: слева версия и пункты, справа устройство, рельса снизу */
@media (min-width: 900px) {
    .tm { overflow: hidden; }
    .tm-grid {
        min-height: 0; column-gap: 30px; row-gap: 12px;
        grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "head stage" "side stage" "side chips" "rail rail";
    }
    .tm-stage { height: auto; min-height: 0; }
    .tm-side { overflow-y: auto; min-height: 0; padding-right: 4px; }
    .tm-chips { justify-content: center; }
    .tm-rail { flex-direction: row; align-items: center; gap: 18px; }
    .tm-rail-in { flex: 1; }
}
@media (orientation: landscape) and (max-height: 520px) {
    .tm-top { padding-top: 6px; }
    .tm-grid { padding-bottom: 10px; row-gap: 8px; }
    .tm-sg { width: 16px; height: 29px; }
    .tm-sg.nar { width: 6px; }
    .tm-rail-in { height: 52px; }
    .tm-b { height: 32px; }
    .tm-sub { margin-top: 10px; }
}