@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-normal-400-600-latin.woff2?v=19f9c92546) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-normal-400-600-latin-ext.woff2?v=824f485b5d) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/geist-mono-normal-400-latin.woff2?v=3f98383b12) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/fraunces-normal-400-600-latin.woff2?v=7234ed860a) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }

:root { --bg: #F5F5F3; --card: #FFFFFF; --sunk: #FAFAF8; --ink: #1C1A27; --mid: #64627A; --hair: rgba(28, 26, 39, .1); --acc: #6E4FF0; --accw: #F1EDFF; --live: #12A06B; --warm: #B86E00; --stop: #B4232A;
  --stage-glow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 50px -26px rgba(0, 0, 0, .2); --tray: #FBFBFA; --grid: rgba(0, 0, 0, .025);
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --serif: 'Fraunces', Georgia, serif; color-scheme: light;
  --top: 61px; --stage-w: min(100%, calc((100dvh - var(--top) - 148px - 236px) * 16 / 9)); }
:root[data-theme='dark'] { --bg: #22212A; --card: #2B2A35; --sunk: #26252F; --ink: #ECEAF3; --mid: #A9A7B8; --hair: rgba(236, 234, 243, .12); --accw: rgba(124, 92, 255, .22); --acc: #9B85FF; --tray: #2A2933; --grid: rgba(255, 255, 255, .03);
  --stage-glow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 90px -30px rgba(124, 92, 255, .35); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
header[data-nb] { display: block; min-height: 61px; }

@media (min-width: 900px) { :root { --top: 108px; } }
:where(.fr, .fr-sheet) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.fr, .fr-sheet) button { cursor: pointer; }
.fr [hidden], .fr-sheet[hidden], .fr-sheet [hidden] { display: none !important; }
.fr svg { width: 18px; height: 18px; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes work { 50% { transform: translateY(-2px) rotate(-2deg); } }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }


.fr { height: calc(100dvh - var(--top)); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.fr-head { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 20px; background: var(--card); border-bottom: 1px solid var(--hair); }
.fr-back { display: inline-flex; align-items: center; min-height: 36px; color: var(--mid); text-decoration: none; font-size: 13px; white-space: nowrap; }
.fr-back:hover { color: var(--ink); }
.fr-title { margin: 0; min-width: 0; font-size: 15px; font-weight: 400; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-title b { color: var(--ink); font-weight: 600; }
.credits { margin-left: auto; color: var(--mid); font: 12px var(--mono); white-space: nowrap; min-height: 1.45em; }
.tools { display: flex; gap: 6px; flex: none; }
.ib { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 1px solid var(--hair); background: var(--sunk); border-radius: 10px; padding: 6px 10px; font-size: 13px; color: var(--mid); }
.ib[aria-pressed='true'] { color: var(--ink); border-color: var(--ink); }

.journey { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--hair); min-height: 54px; }
.journey ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; flex: 1; min-width: 0; }
.journey li { --f: 0; display: grid; gap: 3px; min-width: 0; }
.journey li i { display: block; height: 4px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.journey li em { display: block; height: 100%; width: calc(var(--f) * 100%); background: var(--ink); border-radius: 4px; transition: width .4s; }
.journey li.on em { background: var(--acc); }
.journey li b { font-size: 12.5px; font-weight: 500; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey li.done b { color: var(--ink); } .journey li.on b { color: var(--acc); font-weight: 600; }
.eta { margin: 0; flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.eta i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 2s infinite; } .eta i.ok { animation: none; } .eta i.wait { background: var(--warm); animation: none; }
.net { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 7px 16px; background: #FFF4DE; color: #5A4210; font-size: 13px; }
:root[data-theme='dark'] .net { background: #3A3222; color: #F3DFAE; }

.room { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 22px 12px; overflow: auto; }
:root[data-theme='dark'] .main { background: radial-gradient(900px 520px at 50% 38%, #2E2C3A 0%, #22212A 70%); }


.stage { position: relative; flex: none; justify-self: center; width: var(--stage-w); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--stage-glow); }
.stage[data-shape='9x16'] { aspect-ratio: 9 / 16; width: min(var(--stage-w), calc((100dvh - var(--top) - 384px) * 9 / 16)); }
.stage[data-shape='1x1'] { aspect-ratio: 1; width: min(var(--stage-w), calc(100dvh - var(--top) - 384px)); }
.stage[data-shape='4x5'] { aspect-ratio: 4 / 5; width: min(var(--stage-w), calc((100dvh - var(--top) - 384px) * 4 / 5)); }
.sc { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; background: var(--tray); }
.stage[data-k='start'] .sc-start, .stage[data-k='read'] .sc-read, .stage[data-k='idea'] .sc-idea, .stage[data-k='script'] .sc-script, .stage[data-k='msg'] .sc-msg { opacity: 1; visibility: visible; transition: opacity .5s; }
.screen { position: absolute; inset: 0; background: #0b0c10; }
.screen img, .screen iframe, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.screen img { object-fit: cover; transition: opacity .4s; }
.screen video { object-fit: contain; background: #000; }
.screen iframe { color-scheme: normal; background: transparent; }
.kick { margin: 0 0 10px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.dots { display: inline-flex; gap: 5px; } .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: dot 1.2s infinite; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }

.sc-start, .sc-msg { display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 6%; }
.sc-start img { height: 96px; width: auto; animation: bob 2.4s ease-in-out infinite; }
.sc-start p, .sc-msg p { margin: 0; font-size: 18px; max-width: 34ch; } .sc-start b { font-weight: 600; }
.sc-msg h2 { margin: 0; font: 400 26px/1.2 var(--serif); }
.sc-msg .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.sc-read { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 5%;
  background: repeating-linear-gradient(90deg, transparent 0 39px, var(--grid) 39px 40px), repeating-linear-gradient(0deg, transparent 0 39px, var(--grid) 39px 40px), var(--tray); }
.sc-read .kick { margin: 0; }
.brand { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.brand li { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 92px; min-height: 92px; padding: 12px 14px; border-radius: 14px; background: #fff; color: #1C1A27; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .3); animation: pop .6s cubic-bezier(.2, .8, .2, 1.2); }
.brand small { font-size: 12px; color: #55536A; }
.brand .b-logo img { max-width: 140px; max-height: 44px; object-fit: contain; }
.brand .b-col { grid-template-columns: repeat(4, 22px); column-gap: 4px; } .brand .b-col i { width: 22px; height: 40px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .brand .b-col small { grid-column: 1 / -1; }
.brand .b-type b { font-size: 34px; line-height: 1; font-weight: 600; }
.brand .b-ph img { width: 64px; height: 44px; object-fit: contain; }
.brand .b-pages b { font-size: 30px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.reading { margin: 0; min-height: 1.4em; color: var(--mid); font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.reading:empty { visibility: hidden; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--acc); animation: spin 1s linear infinite; flex: none; }
.mini-brand { justify-content: flex-start; gap: 6px; } .mini-brand li { min-width: 64px; min-height: 64px; padding: 8px; border-radius: 10px; box-shadow: none; animation: none; }
.mini-brand .b-logo img { max-width: 90px; max-height: 28px; } .mini-brand .b-col i { width: 14px; height: 24px; } .mini-brand .b-col { grid-template-columns: repeat(4, 14px); } .mini-brand .b-type b, .mini-brand .b-pages b { font-size: 22px; } .mini-brand .b-ph img { width: 44px; height: 30px; }

.sc-idea { padding: 4.5% 5%; display: grid; align-content: center; gap: 12px; }
.idea { border-radius: 14px; padding: 18px; background: var(--card); border: 1px solid var(--acc); box-shadow: 0 0 0 4px var(--accw); animation: fade .6s; }
.idea h3 { margin: 0 0 6px; font: 400 26px/1.15 var(--serif); } .idea p { margin: 0; color: var(--mid); font-size: 14.5px; }

.sc-script { padding: 4.5% 6%; display: grid; align-content: center; background: var(--card); overflow: auto; }
.script { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.script li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: baseline; font: 400 clamp(15px, 1.55vw, 21px)/1.3 var(--serif); animation: fade .5s; }
.script .tc { font: 12px var(--mono); color: var(--mid); }


.film-row { justify-self: center; width: var(--stage-w); min-height: 36px; margin-top: -4px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.row-say { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mid); }
.row-say > * { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: fade .4s; }
.row-say b { color: var(--ink); font-weight: 600; }
.row-tools { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--mid); font-size: 13px; font-weight: 500; cursor: pointer; }
.st svg { width: 18px; height: 18px; flex: none; }
.st:hover, .st:focus-visible { background: var(--sunk); color: var(--ink); }
.st[data-m='play'] { color: var(--acc); font-weight: 600; }
.watching { display: flex; gap: 8px; align-items: center; }
.watching button { border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--ink); padding: 0 12px; min-height: 32px; font-size: 13px; }
.finish { position: relative; justify-self: center; width: var(--stage-w); display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .96); color: #1C1A27; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .4); animation: fade .4s; }
.finish img { width: 56px; animation: bob 1.6s ease-in-out infinite; }
.finish b { font-size: 15px; } .finish ol { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #64627A; }
.finish li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #ccc; margin-right: 6px; vertical-align: -1px; }
.finish li.now { color: #1C1A27; } .finish li.now::before { border-color: #7C5CFF; border-top-color: transparent; animation: spin .9s linear infinite; }
.finish li.ok { color: #1F7A5A; } .finish li.ok::before { background: #12A06B; border-color: #12A06B; }
.finish p { margin: 0; font-size: 12.5px; color: #64627A; }


.bench { justify-self: center; width: var(--stage-w); display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.say { position: relative; display: flex; gap: 8px; align-items: baseline; min-height: 34px; padding: 6px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); font-size: 14px; }
.say::after { content: ''; position: absolute; bottom: -6px; left: clamp(14px, var(--x, 50%), calc(100% - 14px)); width: 10px; height: 10px; margin-left: -5px; background: var(--card); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); transform: rotate(45deg); transition: left .5s; }
.say b { flex: none; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.say span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .say.in span { animation: fade .5s; }
.crew { list-style: none; margin: 0; padding: 0 4px; display: flex; justify-content: space-between; align-items: end; height: 66px; border-bottom: 2px solid var(--hair); }
.crew li { position: relative; height: 100%; display: flex; align-items: end; opacity: .8; transition: transform .4s cubic-bezier(.2, .8, .2, 1.4), opacity .4s; }
.crew img { height: 54px; width: auto; display: block; transition: height .35s; }
.crew li.on { opacity: 1; transform: translateY(-3px); } .crew li.on img { height: 64px; animation: work 1.2s ease-in-out infinite; }
.crew .card { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 7px; background: var(--ink); color: var(--bg); font: 600 12px var(--mono); }


.main > * { flex: none; }
.controls { width: var(--stage-w); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls:not(:has(> :not([hidden]))) { display: none; }
.ask { flex: 1 1 100%; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--acc); box-shadow: 0 0 0 4px var(--accw); animation: fade .4s; }
.ey { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.ey img { width: 28px; } .ring { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--p, 0) * 360deg), var(--hair) 0); }
.ask h3 { margin: 0; font-size: 16px; font-weight: 600; } .ask .sub { margin: 0; color: var(--mid); font-size: 13px; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.looks button { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--hair); background: var(--sunk); border-radius: 12px; text-align: left; font-size: 13.5px; font-weight: 500; min-height: 44px; }
.looks button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--hair); }
.looks button em { font: normal 12px var(--mono); color: var(--acc); text-transform: uppercase; }
.looks button.pick { border-color: var(--acc); background: var(--accw); } .looks button.chosen { outline: 3px solid var(--acc); }
.voices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--mid); }
.own { display: flex; gap: 6px; } .own input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--sunk); }
.mini { border: 1px solid var(--hair); background: var(--sunk); border-radius: 999px; padding: 6px 12px; min-height: 36px; font-size: 13.5px; font-weight: 500; }
.mini.on, .mini.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.auto { margin: 0; color: var(--mid); font-size: 12.5px; }
.act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1; min-width: 0; }
.act p { margin: 0; color: var(--mid); font-size: 12.5px; text-align: right; max-width: 260px; line-height: 1.3; }
.act button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; padding: 10px 16px; font-weight: 600; border: 1px solid var(--hair); background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap; }
.act button.ink, .btn.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); } .act button[data-m='keep'] { box-shadow: 0 0 0 4px var(--accw); }
.act button:disabled, .btn:disabled { opacity: .55; cursor: default; }
.lagre { font-size: 13px; color: var(--mid); margin: 0; justify-self: center; width: var(--stage-w); }


.panel { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--hair); background: var(--card); }
:root[data-theme='dark'] .fr-head, :root[data-theme='dark'] .journey, :root[data-theme='dark'] .panel { background: #26252F; }
.pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 14px 10px; scrollbar-width: thin; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; }
.feed > li { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 13.5px; animation: fade .4s; }
.feed > li svg { width: 20px; height: 20px; }
.feed > li.j { background: var(--accw); } .feed > li.j b { font-family: var(--mono); }
.feed > li.note em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--warm); white-space: nowrap; }
.feed > li.now { color: var(--mid); } .feed > li.now .dots { margin-left: auto; }
.feed .msg { align-items: start; } .feed .msg > img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.feed .msg b { font: 500 12px var(--mono); text-transform: uppercase; color: var(--mid); } .feed .msg p { margin: 1px 0 0; overflow-wrap: anywhere; }
.feed .msg.you { flex-direction: row-reverse; text-align: right; } .feed .msg.you p { background: var(--accw); padding: 6px 10px; border-radius: 10px; display: inline-block; }
.feed .frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; } .feed .frames img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; background: var(--hair); }
.feed .empty, .empty { color: var(--mid); font-size: 13px; padding: 8px; }
.mail { flex: none; display: flex; gap: 8px; align-items: center; padding: 6px 16px; font-size: 13px; color: var(--mid); min-height: 40px; }
.mail input { width: 18px; height: 18px; accent-color: var(--acc); flex: none; }
.tell { flex: none; display: flex; gap: 6px; margin: 4px 14px 14px; padding: 4px; border: 1px solid var(--hair); border-radius: 12px; background: var(--sunk); }
.tell input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 6px 8px; font-size: 16px; } .tell input::placeholder { color: var(--mid); }
.tell button { border: 0; background: var(--ink); color: var(--bg); border-radius: 9px; padding: 6px 14px; min-height: 40px; font-weight: 600; }
.tell-t { flex: none; margin: -8px 16px 10px; font-size: 12.5px; color: var(--mid); min-height: 0; } .tell-t:empty { display: none; }
.tell-t a { color: inherit; }


.pane-done, .pane-stop { padding: 14px 16px 20px; }
.pane-done h2, .pane-stop h2 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; font-size: 19px; font-weight: 600; } .pane-done h2 svg { width: 22px; height: 22px; color: var(--live); }
.pane-done section, .pane-stop section { padding: 12px 0; border-bottom: 1px solid var(--hair); display: grid; gap: 8px; }
.pane-done section:last-child, .pane-stop section:last-child { border-bottom: 0; }
.pane-done h3 { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; } .pane-done h3 svg { width: 18px; height: 18px; }
.lead { margin: 0; color: var(--mid); font-size: 14px; } .hint { margin: 0; color: var(--mid); font-size: 12.5px; }
.hint a, .lead a { color: inherit; }
.wide { width: 100%; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .seg a { border: 1px solid var(--hair); background: var(--sunk); border-radius: 999px; padding: 6px 12px; min-height: 36px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.seg button.on, .seg button[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg button:disabled { opacity: .55; cursor: default; }
.bar8 { height: 8px; border-radius: 8px; background: var(--hair); overflow: hidden; } .bar8 i { display: block; height: 100%; width: 0; background: var(--live); transition: width .6s; }
.say-t { margin: 0; font-size: 13px; color: var(--mid); } .say-t:empty { display: none; }
.say-t.err { color: var(--stop); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.rows li > b { font-weight: 500; min-width: 0; flex: 1 1 auto; }
.rows li > small { color: var(--mid); font-size: 12.5px; }
.tagline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--sunk); border: 1px solid var(--hair); width: fit-content; }
.tagline i { width: 8px; height: 8px; border-radius: 50%; background: var(--mid); } .tagline.go i { background: var(--live); } .tagline.stop i { background: var(--stop); } .tagline.wait i { background: var(--warm); }
.steps { display: grid; gap: 8px; } .steps p { margin: 0; }
.founder { border: 1px dashed var(--acc); border-radius: 12px; padding: 10px 12px !important; margin-top: 10px; }
.founder h3 { color: var(--acc); }
.report { margin: 0; padding: 12px 0 0; font-size: 12.5px; } .report a { color: var(--mid); }


.fr-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(28, 26, 39, .4); padding: 16px; }
.fr-sheet .in { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--card); color: var(--ink); border-radius: 20px; padding: 22px; display: grid; gap: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); animation: fade .3s; font: 400 14px/1.45 var(--sans); }
.fr-sheet .face { width: 52px; } .fr-sheet h2 { margin: 0; font-size: 20px; font-weight: 600; } .fr-sheet p { margin: 0; color: var(--mid); line-height: 1.5; } .fr-sheet p b { color: var(--ink); }
.fr-sheet textarea { width: 100%; font-size: 16px; padding: 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--sunk); resize: vertical; }
.fr-sheet .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.fr-sheet .acts button { border: 1px solid var(--hair); background: var(--sunk); border-radius: 12px; padding: 10px 16px; min-height: 44px; font-weight: 500; } .fr-sheet .acts button.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.away { position: fixed; z-index: 70; left: 50%; top: 76px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 16px;
  background: var(--card); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35); animation: fade .4s; }
.away img { width: 44px; } .away ul { margin: 4px 0 0; padding-left: 16px; color: var(--mid); } .away li b { color: var(--ink); }
.away button { border: 0; border-radius: 10px; background: var(--ink); color: var(--bg); padding: 7px 12px; min-height: 40px; font-weight: 500; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 14px; opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.in { animation: toast 3s ease forwards; } @keyframes toast { 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

@media (max-width: 1200px) { .journey li b { font-size: 12px; } .room { grid-template-columns: minmax(0, 1fr) 340px; } }


@media (max-width: 860px) {
  .fr { height: auto; min-height: calc(100dvh - var(--top)); display: block; }
  .fr-head { flex-wrap: wrap; gap: 4px 10px; padding: 6px 16px; }
  .fr-title { flex: 1 1 0; font-size: 14px; } .tools { order: 2; } .ib span { display: none; } .ib { padding: 6px 9px; }
  .credits { order: 3; flex: 1 1 100%; margin: 0; white-space: normal; font-size: 12px; } .credits:empty { display: none; }
  .fr-back { display: none; }
  .journey { position: sticky; top: var(--top); z-index: 9; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 16px; min-height: 0; }
  .journey ol { gap: 3px; } .journey li b { display: none; }
  .eta { font-size: 13px; justify-content: space-between; white-space: normal; } .eta::before { content: attr(data-stage); font-weight: 600; color: var(--acc); }
  .room { display: block; }
  .main { padding: 10px 16px 8px; gap: 8px; overflow: visible; }
  :root { --stage-w: 100%; }
  .stage[data-shape='9x16'], .stage[data-shape='4x5'], .stage[data-shape='1x1'] { width: min(100%, 64dvh * .5625); }
  .stage[data-k='read'], .stage[data-k='idea'], .stage[data-k='script'], .stage[data-k='msg'] { aspect-ratio: auto; min-height: 200px; }
  .stage[data-k='read'] .sc-read, .stage[data-k='idea'] .sc-idea, .stage[data-k='script'] .sc-script, .stage[data-k='msg'] .sc-msg { position: relative; }
  .stage[data-k='read'] .screen, .stage[data-k='idea'] .screen, .stage[data-k='script'] .screen, .stage[data-k='msg'] .screen { display: none; }
  .brand li { min-width: 72px; min-height: 72px; padding: 8px; } .brand .b-type b, .brand .b-pages b { font-size: 24px; } .brand .b-col i { width: 16px; height: 28px; } .brand .b-col { grid-template-columns: repeat(4, 16px); }
  .sc-idea, .sc-script { padding: 12px; } .idea h3 { font-size: 19px; } .script li { grid-template-columns: 32px 1fr; font-size: 16px; }
  .sc-start p, .sc-msg p { font-size: 16px; } .sc-start img { height: 70px; }
  .film-row { margin-top: -6px; } .row-say { flex-basis: 100%; order: 2; font-size: 12.5px; } .row-say > * { white-space: normal; }
  .finish { grid-template-columns: 36px 1fr; padding: 8px 10px; } .finish img { width: 36px; } .finish ol { display: none; } .finish b { font-size: 13.5px; }
  .say { font-size: 13px; padding: 5px 10px; } .say span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .crew { height: 44px; padding: 0; } .crew img { height: 34px; } .crew li.on img { height: 42px; animation: none; }
  .act { flex: 1 1 100%; justify-content: space-between; } .act p { text-align: left; font-size: 12.5px; max-width: none; } .act button { padding: 9px 13px; font-size: 14px; }
  .looks { grid-template-columns: 1fr 1fr; }
  .panel { display: block; border-left: 0; border-top: 1px solid var(--hair); }
    .pane { overflow: visible; }
  .tell { position: sticky; bottom: 0; margin: 0; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: var(--card); z-index: 8; }
  .tell input { border: 1px solid var(--hair); border-radius: 10px; background: var(--sunk); }
  .fr-sheet { place-items: end center; padding: 0; } .fr-sheet .in { border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .act { flex-direction: column; align-items: stretch; gap: 8px; } .act button { white-space: normal; }
  .looks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fr *, .fr *::before, .fr *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }



.fr:has(.stage[data-k='start']) .film-row .st:not(#fr-playlive), .fr:has(.stage[data-k='read']) .film-row .st:not(#fr-playlive), .fr:has(.stage[data-k='idea']) .film-row .st:not(#fr-playlive), .fr:has(.stage[data-k='script']) .film-row .st:not(#fr-playlive), .fr:has(.stage[data-k='msg']) .film-row .st:not(#fr-playlive) { visibility: hidden; }
.pin-t b { color: var(--acc); margin-right: 4px; }
.couch-say { display: none; }

html.couch .fr-head, html.couch .journey, html.couch .panel, html.couch .bench, html.couch .controls, html.couch .strip, html.couch header[data-nb], html.couch .lagre, html.couch .formats, html.couch .net { display: none !important; }
html.couch .fr { height: 100dvh; } html.couch .room { grid-template-columns: minmax(0, 1fr); height: 100dvh; } html.couch .main { padding: 0 0 8px; gap: 6px; background: #0d0c12; justify-content: center; }
html.couch .stage, html.couch .stage[data-shape] { width: min(100vw, calc((100dvh - 96px) * 16 / 9)) !important; border-radius: 0; box-shadow: none; }
html.couch .stage[data-shape='9x16'] { width: min(100vw, calc((100dvh - 96px) * 9 / 16)) !important; }
html.couch .stage[data-shape='1x1'] { width: min(100vw, calc(100dvh - 96px)) !important; }
html.couch .stage[data-shape='4x5'] { width: min(100vw, calc((100dvh - 96px) * 4 / 5)) !important; }
html.couch, html.couch body { background: #0d0c12; }
html.couch .film-row { width: min(100vw - 24px, 1100px); margin-top: 0; }
html.couch .row-say, html.couch .st { color: #C9C7D6; } html.couch .row-say b { color: #fff; }
html.couch .st:hover, html.couch .st:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
html.couch .couch-say { display: block; width: min(100vw - 24px, 1100px); min-height: 1.4em; margin: 0; color: #fff; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.4; text-align: center; opacity: 0; }
html.couch .couch-say.in { animation: couch 7s ease forwards; } @keyframes couch { 8%, 80% { opacity: 1; } 100% { opacity: 0; } }

.strip { justify-self: center; width: var(--stage-w); position: relative; padding-top: 12px; }
.scenes { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 46px; }
.scenes li { position: relative; min-width: 0; border-radius: 6px; overflow: hidden; background: var(--hair); display: grid; place-items: center; cursor: pointer; font: 12px var(--mono); color: var(--mid); }
.scenes li.har { background: #000; } .scenes li img { width: 100%; height: 100%; object-fit: cover; display: block; animation: pop .6s; }
.scenes li:hover { outline: 2px solid var(--acc); }
.pins { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.pin { position: absolute; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid var(--card); padding: 0; background: var(--warm); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); cursor: pointer; }
.pin.you { background: var(--acc); }
.pin:focus-visible { outline: 2px solid var(--ink); }

.pane-live { padding: 12px 14px 10px; }
.ph { margin: 14px 2px 6px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mid); }
.asks:empty { display: none; }
.nask { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--acc); box-shadow: 0 0 0 4px var(--accw); animation: slide .45s cubic-bezier(.2, .8, .2, 1); transition: opacity .2s, transform .2s; }
.nask.gone { opacity: 0; transform: translateX(-16px); }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } }
.nask h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; } .nask .sub { margin: 0; color: var(--mid); font-size: 13.5px; }
.nask blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--acc); font: 400 17px/1.35 var(--serif); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button { min-height: 40px; border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 500; }
.opts button.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.moments li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--hair); font-size: 14px; }
.moments li span { flex: 1; min-width: 0; }
.moments li.fresh { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); animation: pop .6s; }
.moments li button { flex: none; min-height: 36px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.moments li.empty { background: none; border: 0; color: var(--mid); font-size: 13px; }
.now { display: flex; gap: 10px; align-items: baseline; margin: 10px 2px 0; color: var(--mid); font-size: 13.5px; }
.now .dots { flex: none; }
.details { margin: 10px 0 4px; border: 0; background: none; color: var(--mid); font-size: 13px; text-decoration: underline; padding: 6px 2px; min-height: 36px; }
.ideas .seg button[aria-pressed='true'] { background: var(--accw); color: var(--ink); border-color: var(--acc); }
.formats { justify-self: center; width: var(--stage-w); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.formats .fl { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mid); margin-right: 4px; }
.fmt { min-height: 36px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.fmt b { font-weight: 600; } .fmt[aria-pressed='true'] { background: var(--accw); border-color: var(--acc); } .fmt:disabled { opacity: 1; cursor: default; background: var(--sunk); color: var(--mid); }
.info { width: 26px; height: 26px; padding: 0; margin-left: -4px; margin-right: 6px; border-radius: 50%; border: 1px solid var(--hair); background: var(--card); color: var(--mid); font: italic 600 13px Georgia, serif; }
.formats .hint { flex: 1 1 100%; }
.btn.chamber { margin-top: 4px; border-color: var(--acc); box-shadow: 0 0 0 3px var(--accw); }
.pane-done textarea { width: 100%; font-size: 16px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; background: var(--sunk); color: var(--ink); resize: vertical; }
:root[data-theme='dark'] .finish { background: rgba(43, 42, 53, .96); color: #ECEAF3; }
:root[data-theme='dark'] .finish p, :root[data-theme='dark'] .finish ol { color: #C9C7D6; } :root[data-theme='dark'] .finish li.now { color: #fff; }
:root[data-theme='dark'] .row-say b { color: #ECEAF3; }
@media (min-width: 1700px) { .room { grid-template-columns: minmax(0, 1fr) 440px; } }
@media (max-width: 860px) {
  .st { min-height: 40px; padding: 0 8px; }
  .strip { width: 100%; } .scenes { height: 38px; }
  .pane-live { padding: 10px 16px; }
}
.sug { display: grid; gap: 6px; }
.sug button { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 44px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); font-size: 13.5px; line-height: 1.35; }
.sug button:hover { border-color: var(--acc); }
.sug button em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--warm); }
.sug button[aria-pressed='true'] { background: var(--accw); border-color: var(--acc); }

.pane-live { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.live-top { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 14px 10px; scrollbar-width: thin; }
.live-bot { flex: none; max-height: 58%; overflow: auto; padding: 0 14px; display: grid; gap: 10px; }
.live-bot:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.live-bot > :first-child:not([hidden]) { margin-top: 10px; }
.live-bot .ideas .ph { margin-top: 2px; }
#fr-ask { border-radius: 14px; }
#fr-ask .looks { grid-template-columns: 1fr 1fr; }
.strip.tom { visibility: hidden; }
.fr:not([data-fp='klar']):not([data-fp='stoppa']) .controls { display: flex !important; min-height: 44px; }
.fr[data-fp='klar'] .strip, .fr[data-fp='stoppa'] .strip { display: none; }
@media (max-width: 860px) {
  .pane-live { overflow: visible; }
  .live-top { overflow: visible; padding: 4px 16px 10px; }
  .live-bot { order: -1; max-height: none; overflow: visible; padding: 0 16px; }
  .strip.tom { display: none; }
}
.planrad { display: grid; gap: 6px; } .pl { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.planrad select { font-size: 16px; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); }
.fargar { display: flex; gap: 6px; } .fargar input { width: 44px; height: 36px; padding: 0; border: 1px solid var(--hair); border-radius: 8px; background: none; }
.voices .pl { margin-right: 4px; }
.pane-done section > *, .pane-stop section > * { min-width: 0; }
.pane-done .btn, .pane-stop .btn { white-space: normal; text-align: center; }
@media (max-width: 360px) { .crew img { height: 26px; } .crew li.on img { height: 32px; } .crew { height: 38px; } }
.strip, .stage, .controls, .formats, .bench { scroll-margin-top: 140px; }


html.ph-lay, html.ph-lay body { overflow: hidden; overscroll-behavior: none; }
html.ph-lay .fr { position: fixed; top: var(--top); left: 0; right: 0; bottom: 0; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html.ph-lay .fr-head { flex: none; padding: 4px 16px; min-height: 0; } html.ph-lay .fr-title { font-size: 14px; } html.ph-lay .credits { display: none; }
html.ph-lay .journey { position: static; flex: none; gap: 4px; padding: 4px 16px 6px; } html.ph-lay .eta { font-size: 12.5px; }
html.ph-lay .net { flex: none; }
html.ph-lay .room { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
html.ph-lay .main { flex: none; padding: 0 0 2px; gap: 0; overflow: visible; }
html.ph-lay .stage, html.ph-lay .stage[data-k] { width: 100%; aspect-ratio: 16 / 9; min-height: 0; max-height: 44dvh; border-radius: 0; box-shadow: none; }
html.ph-lay .stage[data-shape='9x16'] { width: calc(44dvh * 9 / 16); aspect-ratio: 9 / 16; }
html.ph-lay .stage[data-shape='1x1'] { width: 44dvh; aspect-ratio: 1; }
html.ph-lay .stage[data-shape='4x5'] { width: calc(44dvh * 4 / 5); aspect-ratio: 4 / 5; }
html.ph-lay .stage .sc { position: absolute !important; inset: 0; overflow: auto; }
html.ph-lay .stage[data-k] .screen { display: block; }
html.ph-lay .film-row { width: auto; padding: 0 12px; margin: 0; min-height: 40px; }
html.ph-lay .row-say:empty, html.ph-lay .row-say:not(:has(> :not([hidden]))) { display: none; }
html.ph-lay .ph-dock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--hair); background: var(--bg); }
html.ph-lay .ph-tabs { flex: none; display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--hair); }
html.ph-lay .ph-tabs button { position: relative; flex: 1 1 0; min-height: 42px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mid); font: 600 14px var(--sans); }
html.ph-lay .ph-tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--acc); }
html.ph-lay .ph-tabs .dot { position: absolute; top: 9px; margin-left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
html.ph-lay .ph-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 16px calc(84px + env(safe-area-inset-bottom)); }
html.ph-lay .ph-p { display: grid; gap: 10px; align-content: start; }
html.ph-lay .ph-p > * { width: 100% !important; margin: 0; }
html.ph-lay .ph-p .pane, html.ph-lay .ph-p .pane-live, html.ph-lay .ph-p .live-top, html.ph-lay .ph-p .live-bot { overflow: visible; padding: 0; max-height: none; border: 0; }
html.ph-lay .panel { display: contents; }
html.ph-lay .bench { gap: 4px; } html.ph-lay .crew { height: 36px; } html.ph-lay .crew img { height: 28px; } html.ph-lay .crew li.on img { height: 34px; }
html.ph-lay .strip { padding-top: 12px; } html.ph-lay .strip.tom { display: none; }
html.ph-lay .ph-note { font-size: 12px; color: var(--mid); text-align: center; }
html.ph-lay .ph-steer-t { display: grid; gap: 8px; font-size: 14px; color: var(--mid); } html.ph-lay .ph-steer-t p { margin: 0; }
html.ph-lay .ph-tell-b { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; }
html.ph-lay .ph-tell-b svg, .ph-fab svg { width: 20px; height: 20px; }

html.ph-lay .formats { gap: 6px; } html.ph-lay .formats .fl { flex: 1 1 auto; }
html.ph-lay .fmt { min-height: 40px; padding: 4px 12px; font-size: 13px; }
html.ph-lay .formats .info { width: 40px; height: 40px; margin: 0; font: 600 15px var(--sans); font-style: normal; }
html.ph-lay .fmt-help { flex: 1 1 100%; margin: 0; padding-left: 18px; display: grid; gap: 4px; }

.ph-fab { position: fixed; z-index: 55; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 14px var(--sans); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
.ph-fab[hidden], .ph-tell[hidden] { display: none !important; }
.ph-tell { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--card); color: var(--ink); border-top: 1px solid var(--hair); box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .35); }
.ph-tell-h { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.ph-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink); display: grid; place-items: center; } .ph-x svg { width: 18px; height: 18px; }
.ph-tell .tell { position: static !important; display: flex; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }
.ph-tell .tell input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 16px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--sunk); color: var(--ink); }
.ph-tell .tell button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; }
.ph-tell .tell-t { margin: 0; font-size: 13px; color: var(--mid); } .ph-tell .tell-t:empty { display: none; }

.ph-intro { position: fixed; z-index: 65; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--card); color: var(--ink); border: 1px solid var(--acc); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .45); animation: fade .4s; }
.ph-intro .ey { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--acc); } .ph-intro .ey img { height: 24px; }
.ph-intro h3 { margin: 0; font-size: 16px; line-height: 1.3; } .ph-intro .sub { margin: 0; font-size: 13.5px; color: var(--mid); }
.ph-intro .ink { justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; }
html.ph-lay.couch .ph-dock, html.couch .ph-fab, html.couch .ph-tell, html.couch .ph-intro { display: none !important; }
html.ph-lay.couch .fr { top: 0; }

html.ph-lay .n9-tb { transform: none !important; left: auto !important; right: 16px !important; bottom: auto !important; top: calc(var(--top) + 4px) !important; width: 40px; height: 40px; }
html.ph-lay .n9-tb .n9-tb-knapp { width: 40px; height: 40px; }
html.ph-lay .n9-tb .n9-tb-vekk { display: none !important; }
html.ph-lay .fr-head { padding-right: 64px; }
html.ph-lay.couch .n9-tb { display: none !important; }
html.ph-lay .ph-intro .ink, html.ph-lay .ph-tell button, .ph-intro .ink { font-family: var(--sans); font-size: 15px; }

.ph-tell .tell input { font-family: var(--sans); }


.st.lek-st { color: var(--ink); font-weight: 700; background: #FFF0B8; border: 1.5px solid #1C1A27; border-radius: 999px; padding: 0 12px; }
.st.lek-st:hover, .st.lek-st:focus-visible { background: #FFE38A; color: #1C1A27; }
.st.lek-st[aria-expanded='true'] { background: #FFD84D; }
:root[data-theme='dark'] .st.lek-st { color: #1C1A27; }
.lek-host:empty { display: none; }
.lek-host { margin: 10px 0 4px; }
html.couch .lek-host { display: none; }
#fr-row .lek-knapp.smal .tekst { display: inline; }
@media (max-width: 720px) { .st.lek-st { min-height: 40px; } }


.tell-n { margin: 6px 2px 0; font-size: 12.5px; color: var(--mid); } .tell-n a { color: var(--ink); }


@media (pointer: coarse), (max-width: 720px) {
  #fr-theme { min-width: 40px; min-height: 40px; }
  .seg button, .seg a { min-height: 40px; }
  .report a { display: inline-block; padding: 12px 0; }
}
#fp-lydmerk { line-height: 1.45; padding: 2px 0; overflow: visible; }


html.ph-lay .nb-dock { display: none !important; }
html.ph-lay.nb-docked body, html.ph-lay .nb-docked body { padding-bottom: 0 !important; }

html.ph-lay .film-row .row-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; max-width: 100%; }
html.ph-lay .film-row .lek-st { order: -1; }


.stage:not([data-k='msg']) .sc-msg { display: none; }



.btn.lek-stor { background: #17152A; color: #fff; border: 0; font-weight: 600; margin-bottom: 4px; box-shadow: 0 12px 30px -12px rgba(108, 86, 210, .6), 0 2px 6px rgba(23, 21, 42, .18); }
.btn.lek-stor:hover, .btn.lek-stor:focus-visible { background: #17152A; color: #fff; box-shadow: 0 16px 38px -12px rgba(108, 86, 210, .8), 0 2px 6px rgba(23, 21, 42, .18); }
.btn.lek-stor svg { width: 22px; height: 22px; }

.fr-mix { margin: 8px 0 0; } .fr-mix[hidden] { display: none; }

.film-row .row-tools .lek-st { order: -1; }



.journey li small { font: 11px var(--mono); color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.journey li small:empty { display: none; }

.tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px 12px 6px; border-bottom: 1px solid var(--hair); }
.tabs button { border: 0; background: none; border-radius: 10px; padding: 8px 4px; min-height: 40px; font-size: 13px; font-weight: 500; color: var(--mid); display: inline-flex; gap: 6px; justify-content: center; align-items: center; }
.tabs button[aria-selected='true'] { background: var(--sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--acc); color: #fff; font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; }
.badge:empty { display: none; }

.moments li > svg { width: 20px; height: 20px; color: var(--mid); }
.moments li.note em { flex: none; font-style: normal; font-size: 12px; color: var(--warm); white-space: nowrap; }
.moments li button { white-space: nowrap; }
.live-top { display: grid; gap: 10px; align-content: start; }
.live-top > .live-bot { padding: 0; max-height: none; overflow: visible; }

.pane-wait { padding: 4px 14px 10px; }
.pane-wait .w-sec { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.pane-wait h3 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; } .pane-wait h3 svg { width: 20px; height: 20px; }
.pane-wait ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w-asks li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13.5px; align-items: baseline; } .w-asks li > span:first-child { color: var(--mid); grid-column: 1 / -1; }
.w-asks em { font-style: normal; font-size: 11.5px; color: var(--mid); } .w-asks em.due { color: var(--acc); font-weight: 600; }
.w-asks .chs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.chs button { border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); border-radius: 999px; padding: 5px 12px; min-height: 34px; font-size: 12.5px; }
.chs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.w-script li { display: grid; grid-template-columns: 38px 1fr; gap: 4px 8px; align-items: start; font: 400 15px/1.35 var(--serif); }
.w-script .tc { font: 11px var(--mono); color: var(--mid); padding-top: 4px; }
.w-script .lb { grid-column: 2; display: flex; gap: 6px; }
.w-script .lb button { border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); border-radius: 8px; padding: 3px 10px; min-height: 32px; font: 500 12px var(--sans); display: inline-flex; gap: 4px; align-items: center; }
.w-script li.ok .lb button[data-wl] { color: var(--live); border-color: var(--live); } .w-script .lb svg { width: 14px; height: 14px; }
.w-script li.empty, .w-asks li.empty { display: block; font: 13px var(--sans); color: var(--mid); }
.pane-wait textarea { width: 100%; border: 1px solid var(--hair); border-radius: 10px; background: var(--sunk); color: var(--ink); padding: 8px 10px; font: 16px/1.4 var(--sans); resize: vertical; }
.pane-wait .hint { margin: 6px 0 0; color: var(--mid); font-size: 12.5px; }
.pane-wait .formats { width: auto; justify-self: stretch; }
.pane-wait .mail { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.pane-wait .ideas { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.pane-wait .btn.wide { width: 100%; }

.vers { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.vers .vl { color: var(--mid); display: inline-flex; }
.vers .vc { display: inline-flex; align-items: center; gap: 2px; }
.vers .vb { border: 1px solid var(--hair); background: var(--card); border-radius: 999px; padding: 5px 12px; min-height: 34px; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; color: var(--mid); }
.vers .vb.on { color: var(--ink); border-color: var(--ink); }
.vers .livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pulse 2s infinite; }
.vers .ba-b { border: 0; background: none; color: var(--acc); font-size: 12px; font-weight: 600; padding: 4px 6px; min-height: 34px; display: none; }
.vers .vc:last-child .ba-b { display: inline-flex; }

.shapes { justify-self: center; width: var(--stage-w); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shapes .fl { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mid); margin-right: 4px; }
.shapes .fmt.alle { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.shapes .fmt.alle svg { width: 16px; height: 16px; }
.shapes .hint { flex: 1 1 100%; margin: 2px 0 0; color: var(--mid); font-size: 12.5px; }

.stage.crop .screen iframe { left: 50%; top: 50%; width: 177.78%; height: 100%; transform: translate(-50%, -50%); }
.stage.crop[data-shape='9x16'] .screen iframe { width: 316.05%; height: 100%; }
.stage.crop[data-shape='1x1'] .screen iframe { width: 177.78%; height: 100%; }
.stage.crop[data-shape='4x5'] .screen iframe { width: 222.22%; height: 100%; }

.fr-alle { position: fixed; inset: 0; z-index: 2147482000; background: #0B0C10; color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
html.alle-open, html.alle-open body { overflow: hidden; }
.alle-topp { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; font-size: 15px; }
.alle-x { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #0B0C10; font: 600 14px var(--sans); cursor: pointer; }
.alle-x svg { width: 18px; height: 18px; }
.alle-flate { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: center; padding: 8px 16px; overflow: auto; }
.alle-boks { margin: 0; display: grid; gap: 6px; justify-items: center; min-width: 0; }
.alle-film { position: relative; width: min(100%, calc(70dvh * var(--arn, 1.7778))); aspect-ratio: var(--ar); overflow: hidden; border-radius: 10px; background: #000; }
.alle-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.alle-boks.crop .alle-film iframe { left: 50%; top: 50%; width: 177.78%; transform: translate(-50%, -50%); }
.alle-boks.crop[data-f='9x16'] .alle-film iframe { width: 316.05%; }
.alle-boks.crop[data-f='4x5'] .alle-film iframe { width: 222.22%; }
.alle-boks figcaption { font-size: 13px; opacity: .85; } .alle-boks figcaption b { font-weight: 600; }
.alle-t { flex: none; margin: 0; padding: 4px 16px 12px; color: rgba(255, 255, 255, .7); font-size: 12.5px; text-align: center; }

.ba-sheet .in { width: min(980px, calc(100vw - 32px)); }
.ba { position: relative; display: block; width: 100%; max-height: 66dvh; margin: 6px auto 8px; border-radius: 10px; overflow: hidden; background: #000; touch-action: none; }
.ba iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.ba .ba-a { position: absolute; inset: 0; }
.ba .ba-h { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--acc); pointer-events: none; }
.ba .ba-h::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #fff; }
.ba .ba-grip { position: absolute; inset: 0; cursor: ew-resize; touch-action: none; }
.ba em { position: absolute; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(28, 26, 39, .78); color: #fff; font: normal 12px var(--sans); pointer-events: none; } .ba .l { left: 8px; } .ba .r { right: 8px; }

html.se-mode .fr-back, html.se-mode .credits, html.se-mode #fr-tabs, html.se-mode .tell, html.se-mode .act, html.se-mode .asks, html.se-mode .ask, html.se-mode .vers, html.se-mode #fr-shp-b, html.se-mode .shapes, html.se-mode #fr-lek-kod, html.se-mode .lek-knapp, html.se-mode .mail, html.se-mode .ideas { display: none !important; }


html.ph-lay .ph-dock { flex-direction: column; }
html.ph-lay .ph-body { order: 1; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
html.ph-lay .ph-tabs { order: 2; flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); border-bottom: 0; background: var(--card); }
html.ph-lay .ph-tabs[hidden] { display: none !important; }
html.ph-lay .ph-tabs button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border: 0; border-top: 2px solid transparent; border-radius: 0; font: 600 11.5px/1.15 var(--sans); padding: 4px 2px; text-align: center; }
html.ph-lay .ph-tabs button[hidden] { display: none !important; }
html.ph-lay .ph-tabs button svg { width: 22px; height: 22px; }
html.ph-lay .ph-tabs button[aria-selected='true'] { color: var(--ink); border-top-color: var(--acc); border-bottom: 0; }
html.ph-lay .ph-tabs .dot { position: absolute; top: 6px; left: calc(50% + 8px); margin: 0; }
html.ph-lay .ph-tabs button { position: relative; }
.fr:not([data-fp='lagar']):not([data-fp='klar']) .ph-tabs { display: none !important; }
html.ph-lay .fr[data-fp='klar'] .ph-tabs { display: grid !important; }

html.ph-lay .ph-fab { bottom: calc(68px + env(safe-area-inset-bottom)); }
html.ph-lay .ph-body .pane-wait { padding: 0; overflow: visible; }
html.ph-lay .ph-body .pane-wait[hidden] { display: block !important; }
html.ph-lay .ph-body .vers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
html.ph-lay .ph-body .vers .vl { display: none; }
html.ph-lay .ph-body .vers .vc { display: flex; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--hair); }
html.ph-lay .ph-body .vers .vb { min-height: 44px; font-size: 14px; padding: 6px 14px; }
html.ph-lay .ph-body .vers .ba-b { display: inline-flex; min-height: 44px; font-size: 13px; }
html.ph-lay .ph-body .shapes { width: 100%; }
html.ph-lay .ph-body .shapes .fmt { min-height: 44px; flex: 1 1 calc(50% - 6px); font-size: 14px; }
html.ph-lay .ph-body .shapes .fmt.alle { flex-basis: 100%; justify-content: center; }
html.ph-lay .ph-lek { display: grid; gap: 8px; justify-items: start; } html.ph-lay .ph-lek h3 { margin: 0; font-size: 17px; } html.ph-lay .ph-lek .hint { margin: 0; }
html.ph-lay .ph-lek .btn { width: 100%; background: #FFD84D; color: #1C1A27; border: 2px solid #1C1A27; }

html.ph-lay body:has(#fr-lek-stor:not([hidden])) #fr-lek-kod { display: none !important; }
html.ph-lay .ph-vers-t { margin: 0; color: var(--mid); font-size: 12.5px; }
html.ph-lay #fr-details { justify-self: start; text-decoration: none; border: 1px solid var(--hair); border-radius: 999px; padding: 6px 14px; min-height: 40px; background: var(--card); color: var(--ink); font-weight: 600; }
html.ph-lay .alle-flate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 8px 10px; overflow: auto; align-content: start; }
html.ph-lay .alle-film { width: min(100%, calc(34dvh * var(--arn, 1.7778))); }
html.ph-lay .ph-intro { bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (max-width: 1100px) and (min-width: 721px) { .alle-flate { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; } }


.live-top > .live-bot { position: sticky; top: 0; z-index: 2; background: var(--card); padding-top: 2px; }
:root[data-theme='dark'] .live-top > .live-bot { background: #26252F; }
.live-top > .live-bot:not(:has(> :not([hidden]):not(:empty))) { display: none; }

html:not(.ph-lay) body:has(#fp) .n9-tb { right: auto !important; left: 16px !important; }
html.ph-lay .journey li small { display: none; }

.fr-sheet svg { width: 18px; height: 18px; flex: none; }
.fr-sheet .acts button { display: inline-flex; align-items: center; gap: 8px; }


html.ph-lay .ph-body { flex: 1 1 0; padding-bottom: 8px; }
html.ph-lay .ph-body::after { content: ''; display: block; height: 64px; }
@media (max-height: 700px) { html.ph-lay .stage, html.ph-lay .stage[data-k] { max-height: 40dvh; } html.ph-lay .stage[data-shape='9x16'] { width: calc(40dvh * 9 / 16); } html.ph-lay .stage[data-shape='1x1'] { width: 40dvh; } html.ph-lay .stage[data-shape='4x5'] { width: calc(40dvh * 4 / 5); } }
html.ph-lay #ph-vers .by-rad, html.ph-lay #ph-vers .by-eigen { margin: 0; }


html.ph-lay .ph-fab { right: 10px; bottom: calc(3px + env(safe-area-inset-bottom)); width: 58px; min-height: 0; height: 58px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .5), 0 0 0 4px var(--card); }
html.ph-lay .ph-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ph-lay .ph-fab svg { width: 26px; height: 26px; }
html.ph-lay:has(.ph-fab:not([hidden])) .ph-tabs { padding-right: 76px; }
html.ph-lay .ph-body::after { height: 16px; }


.wk { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--hair); margin-top: 10px; }
.wk[hidden] { display: none; }
.wk-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-n { font: 600 12px var(--mono); color: var(--mid); letter-spacing: .04em; }
.wk-nav { display: inline-flex; gap: 6px; }
.wk-b { min-height: 36px; min-width: 40px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0 12px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.wk-b svg { transform: rotate(90deg); width: 16px; height: 16px; } .wk-b:disabled { opacity: .35; }
.wk-h { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.wk-p { margin: 0; color: var(--mid); font-size: 13.5px; line-height: 1.4; }
.wk-body { display: grid; gap: 8px; } .wk-body:empty { display: none; }
.wk-body .formats, .wk-body .ideas { width: auto; padding: 0; border: 0; margin: 0; }
.wk-body .ideas .ph { display: none; }
.wk-body .w-script { max-height: 260px; overflow: auto; }
.wk-act .btn { width: 100%; }
.wk-done { margin-top: 10px; } .wk-done[hidden] { display: none; }
.wk-dh { margin: 0 0 4px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mid); }
.wk-done ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wk-done button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0 12px; font-size: 13px; }
.wk-done button svg { width: 16px; height: 16px; color: var(--live); }
.wk-park { display: none !important; }

.moments li.hist { align-items: flex-start; }
.moments li.hist em { font-style: normal; font-size: 12px; color: var(--mid); }
.moments li.hist details { margin-top: 4px; font-size: 13px; }
.moments li.hist summary { cursor: pointer; color: var(--acc); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.moments li.hist details ul { margin: 4px 0; padding-left: 18px; color: var(--mid); } .moments li.hist details li.on { color: var(--ink); font-weight: 600; }
.moments li.hist details .hint { margin: 4px 0 0; color: var(--mid); font-size: 12.5px; }



html.ph-lay header[data-nb], html.ph-lay .nb-top, html.ph-lay .nb-sub { display: none !important; }
html.ph-lay { --top: 0px; }
html.ph-lay .fr-back { display: inline-flex !important; min-width: 40px; min-height: 40px; justify-content: center; margin-left: -10px; color: var(--ink); }
html.ph-lay .fr-back svg { width: 20px; height: 20px; transform: rotate(90deg); }
html.ph-lay .fr-head { flex-wrap: nowrap; gap: 6px; }
html.ph-lay .fr-title { flex: 1 1 auto; }
html.ph-lay .journey { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 16px 6px; }
html.ph-lay .journey ol { flex: 1 1 100%; }
html.ph-lay .eta { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.ph-lay #fr-still-t { display: none !important; }


html.ph-lay .pane-done section.fold > :not(h3) { display: none !important; }
html.ph-lay .pane-done section.fold.open > :not(h3):not([hidden]) { display: revert !important; }
html.ph-lay .pane-done section.fold > h3 { cursor: pointer; min-height: 44px; display: flex; align-items: center; margin: 0; }
html.ph-lay .pane-done section.fold > h3::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--mid); }
html.ph-lay .pane-done section.fold.open > h3::after { content: "−"; }
html.ph-lay .pane-done section.fold[hidden] { display: none !important; }
.moments li.earlier { display: block; padding: 4px 10px; background: none; border: 0; }
.moments li.earlier summary { cursor: pointer; color: var(--mid); font-size: 13px; min-height: 36px; display: flex; align-items: center; }
.moments li.earlier ol { margin-top: 6px; }


html.ph-lay .fr[data-fp='klar'] #fr-bench { display: none !important; }
html.ph-lay .more-done { border-top: 1px solid var(--hair); padding-top: 4px; }
html.ph-lay .more-done > summary { min-height: 48px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--ink); }
html.ph-lay .film-row .row-tools { flex-wrap: nowrap; }
html.ph-lay #fr-full span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.ph-lay #fr-full { min-width: 44px; justify-content: center; }
@media (max-height: 700px) { html.ph-lay .fr[data-fp='lagar'] #fr-bench { display: none !important; } }
html.ph-lay .ph-tabs { min-height: calc(64px + env(safe-area-inset-bottom)); align-items: stretch; }

html.ph-lay .fr-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; display: -webkit-box; }
html.ph-lay .fr-title { display: block; }

#fr-menu { display: none; }
html.ph-lay #fr-menu { display: inline-flex; min-width: 40px; min-height: 40px; justify-content: center; }
html.ph-lay #fr-menu .nb-lines-i { width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; display: block; }
html.ph-lay #fr-menu .nb-lines-i::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
html.ph-lay .fr-head .tools { gap: 4px; }
html.ph-lay .fr-head .ib { padding: 6px 8px; }
html.ph-lay .fr-head .ib span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.ph-lay .fr-title { font-size: 14px; }

@media (max-height: 700px) {
  html.ph-lay .nask { padding: 10px 12px; gap: 6px; }
  html.ph-lay .nask .auto { display: none; }
  html.ph-lay .nask .ey { font-size: 11px; } html.ph-lay .nask .ey img { width: 22px; }
  html.ph-lay .nask h3 { font-size: 15px; }
  html.ph-lay .nask blockquote { font-size: 14.5px; padding: 4px 10px; }
  html.ph-lay .nask .opts button { min-height: 40px; padding: 6px 12px; }
  html.ph-lay .journey { padding-top: 2px; padding-bottom: 4px; }
}


html[data-brand="on"]:not([data-theme='dark']) { --acc: var(--sb-accent, #6E4FF0); --accw: color-mix(in srgb, var(--sb-accent, #6E4FF0) 12%, #fff); }
html[data-brand="on"] .act button.ink, html[data-brand="on"] .btn.ink { background: var(--sb-action, var(--ink)); color: var(--sb-on-action, var(--bg)); border-color: var(--sb-action, var(--ink)); }
html.ph-lay .eta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-bot[hidden] { display: none !important; }


@media (hover: none), (pointer: coarse) {
  html.ph-lay .fr-back, html.ph-lay #fr-menu, #fr-theme { min-width: 44px; min-height: 44px; }
  html.ph-lay .film-row, #fr-lek-kod, #fr-full { min-height: 44px; }
  html.ph-lay .n9-tb, html.ph-lay .n9-tb .n9-tb-knapp { width: 44px; height: 44px; }
}
.fr-title { text-wrap: balance; }

html.fr-kept #fr-crew, html.fr-kept #fr-now, html.fr-kept .live-bot { display: none !important; }
.finish .fin-bilete { display: inline-flex; margin-top: 8px; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 12px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; }
.finish .fin-bilete[hidden], .pane-stop .fin-bilete[hidden] { display: none; }
.pane-stop .fin-bilete { display: inline-flex; margin: 8px 0; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 12px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; }


html.fr-full header[data-nb], html.fr-full .nb-top, html.fr-full .nb-sub, html.fr-full .nb-dock { display: none !important; }
html.fr-full { --top: 0px; }
html.fr-full.nb-docked body, html.fr-full .nb-docked body { padding-bottom: 0 !important; }
.fr-logo { display: none; }
html.fr-full:not(.ph-lay) .fr-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 36px; height: 40px; margin-left: -6px; color: var(--ink); text-decoration: none; }
html.fr-full .fr .fr-logo svg { width: auto; height: 30px; display: block; }
html.fr-full:not(.ph-lay) .fr-back { display: none; }
html.fr-full:not(.ph-lay) .fr-head { min-height: 56px; padding: 8px 20px; gap: 12px; }
html.fr-full:not(.ph-lay) .fr-title { font-size: 14.5px; }
html.fr-full:not(.ph-lay) #fr-menu { display: inline-flex; }
#fr-menu .nb-lines-i { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; display: block; flex: none; }
#fr-menu .nb-lines-i::after { content: ''; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
#fr-menu[aria-expanded='true'] { color: var(--ink); border-color: var(--ink); }

.nb-menu.fr-menu-pop { z-index: 90; }
:root[data-theme='dark'] .nb-menu.fr-menu-pop { background: #2B2A35; color: #ECEAF3; border-color: rgba(236, 234, 243, .14); --nb-ink: #ECEAF3; --nb-ink-2: #A9A7B8; --nb-hair: rgba(236, 234, 243, .14); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6); }
:root[data-theme='dark'] .nb-menu.fr-menu-pop a:hover, :root[data-theme='dark'] .nb-menu.fr-menu-pop button:hover { background: rgba(255, 255, 255, .08); }


html.fr-full:not(.ph-lay) { --stage-w: min(100%, calc((100dvh - 344px) * 16 / 9)); }
html.fr-full:not(.ph-lay) .main { gap: 8px; }
html.fr-full:not(.ph-lay) .film-row { min-height: 32px; margin-top: -6px; }
html.fr-full:not(.ph-lay) .stage[data-shape='9x16'] { width: min(var(--stage-w), calc((100dvh - 344px) * 9 / 16)); }
html.fr-full:not(.ph-lay) .stage[data-shape='1x1'] { width: min(var(--stage-w), calc(100dvh - 344px)); }
html.fr-full:not(.ph-lay) .stage[data-shape='4x5'] { width: min(var(--stage-w), calc((100dvh - 344px) * 4 / 5)); }
@media (min-width: 861px) { html.fr-full:not(.ph-lay) .room { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (min-width: 1700px) { html.fr-full:not(.ph-lay) .room { grid-template-columns: minmax(0, 1fr) 440px; } }


.stage:not([data-k='start']) .sc-start img, .stage:not([data-k='start']) .sc-start .dots i, .stage:not([data-k='read']) .sc-read .spin, .stage:not([data-k='read']) .sc-read .brand li { animation: none; }
.finish[hidden] img, .fr [hidden] * { animation: none !important; }
html.fr-full .n9-tb .n9-tb-knapp svg rect { animation: none; }


:root[data-theme='dark'] .n9-tb .n9-tb-knapp { background: #F3F1FA; color: #1C1A27; border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 10px 28px -10px rgba(0, 0, 0, .8); }
:root[data-theme='dark'] .n9-tb .n9-tb-knapp:hover { background: #fff; }


.fr[data-fp='stoppa'] .screen { background: var(--tray); }
.fr[data-fp='stoppa'] .stage[data-k='msg'] .sc-msg { background: repeating-linear-gradient(90deg, transparent 0 39px, var(--grid) 39px 40px), repeating-linear-gradient(0deg, transparent 0 39px, var(--grid) 39px 40px), var(--tray); }
.sc-msg .stopp-nine { width: auto; height: 84px; }
.pane-stop .btn:not(.ink) { background: var(--card); color: var(--ink); border-color: var(--hair); }
.pane-stop .btn:not(.ink):hover { border-color: var(--ink); }


html.fr-full .lek-panel { background: var(--card); color: var(--ink); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; font: 400 14px/1.4 var(--sans); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .35); }
html.fr-full .lek-panel h3 { font: 600 16px/1.25 var(--sans); margin: 0 44px 4px 0; gap: 10px; }
html.fr-full .lek-panel h3 .prikk { width: 28px; height: 28px; border: 0; background: var(--accw); color: var(--acc); }
html.fr-full .lek-panel h3 .prikk svg { width: 18px; height: 18px; }
html.fr-full .lek-panel .linje { color: var(--mid); font-size: 13px; margin: 0 0 4px; }
html.fr-full .lek-panel .lukk { right: 10px; top: 10px; width: 36px; height: 36px; border: 1px solid var(--hair); background: var(--sunk); color: var(--ink); font: 400 16px/1 var(--sans); }
html.fr-full .lek-panel .lukk:hover { border-color: var(--ink); }
html.fr-full .lek-rad { margin-top: 10px; }
html.fr-full .lek-rad > b { font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mid); margin: 0 0 6px; }
html.fr-full .lek-forval { gap: 6px; }
html.fr-full .lek-forval button { min-height: 40px; border: 1px solid var(--hair); border-radius: 999px; background: var(--sunk); color: var(--ink); font: 500 13.5px/1.1 var(--sans); padding: 6px 10px; box-shadow: none; }
html.fr-full .lek-forval button:hover { border-color: var(--ink); }
html.fr-full .lek-forval button[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
html.fr-full .lek-fin { color: var(--mid); font: 500 11.5px/1 var(--sans); }
html.fr-full .lek-skyv { accent-color: var(--acc); }
html.fr-full .lek-botn { gap: 8px; margin-top: 12px; }
html.fr-full .lek-botn button { min-height: 44px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans); }
html.fr-full .lek-botn button:hover { border-color: var(--ink); }
html.fr-full .lek-botn .overrask { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html.fr-full .lek-botn .overrask svg { color: currentColor; }
html.fr-full .lek-panel .hald { margin-top: 10px; font: 500 13px/1.3 var(--sans); color: var(--mid); }
html.fr-full .lek-panel .hald:hover { color: var(--ink); }

html.fr-full .lek-merke { background: var(--card); color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .45); font: 400 13.5px/1.35 var(--sans); }
html.fr-full .lek-merke::after { background: var(--card); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
html.fr-full .lek-merke .prikk { border: 0; background: var(--accw); color: var(--acc); }
html.fr-full .lek-merke b { font: 600 14.5px/1.2 var(--sans); }
html.fr-full .lek-merke .steg { color: var(--mid); font: 500 11px/1 var(--mono); }
html.fr-full .lek-merke button { min-height: 36px; border: 1px solid var(--hair); border-radius: 999px; background: var(--sunk); color: var(--ink); font: 600 13px/1 var(--sans); }
html.fr-full .lek-merke button.hoved { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html.fr-full .lek-merke button.lukk { border: 0; background: transparent; color: var(--mid); font-weight: 500; }

html.fr-full.ph-lay .lek-panel.lek-sheet { top: var(--lek-top, 46dvh); bottom: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 1px solid var(--hair); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .35); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
html.fr-full.ph-lay .lek-panel.lek-sheet h3 { font-size: 15px; margin-right: 52px; }
html.fr-full.ph-lay .lek-panel.lek-sheet .lukk { width: 44px; height: 44px; top: 6px; right: 8px; }
html.fr-full.ph-lay .lek-panel.lek-sheet .linje { font-size: 12.5px; }
html.fr-full.ph-lay .lek-sheet .lek-rad { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 2px 8px; margin-top: 8px; }
html.fr-full.ph-lay .lek-sheet .lek-rad > b { margin: 0; font-size: 11px; }
html.fr-full.ph-lay .lek-sheet .lek-forval button { min-height: 44px; padding: 4px 4px; font-size: 13px; white-space: nowrap; min-width: 0; }
html.fr-full.ph-lay .lek-sheet .lek-fin { grid-column: 2; margin-top: 2px; }
html.fr-full.ph-lay .lek-sheet .lek-fin > span { display: none; }
html.fr-full.ph-lay .lek-sheet .lek-botn { margin-top: 10px; }
html.fr-full.ph-lay .lek-sheet .hald { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; }

html.fr-full:not(.ph-lay):not(.couch) body:has(#fp) .n9-tb { transform: none !important; left: auto !important; right: 14px !important; bottom: auto !important; top: 8px !important; width: 40px; height: 40px; }
html.fr-full:not(.ph-lay) .n9-tb .n9-tb-knapp { width: 40px; height: 40px; }
html.fr-full:not(.ph-lay) .n9-tb .n9-tb-knapp svg { width: 18px; height: 28px; }
html.fr-full:not(.ph-lay) .n9-tb .n9-tb-vekk { display: none !important; }
html.fr-full:not(.ph-lay) body:has(.n9-tb:not([hidden]):not(.n9-borte)) .fr-head { padding-right: 66px; }
html.fr-full.couch .n9-tb { display: none !important; }

.eta i { animation-timing-function: steps(2, jump-none); }
.crew li.on img { animation-timing-function: steps(3, jump-none); }
.dots i { animation-timing-function: steps(2, jump-none); }
.vers .livedot { animation-timing-function: steps(2, jump-none); }

html:not(.ph-lay) .fr > .room { grid-row: 4; }

.lek-side { flex: none; max-height: 100%; overflow: auto; padding: 12px 12px 6px; border-bottom: 1px solid var(--hair); scrollbar-width: thin; }
.lek-side[hidden] { display: none; }
.lek-side .lek-panel { box-shadow: none; }

.fr-fit { flex: 1 1 100%; order: 4; margin: 4px 0 0; font: 13px/1.45 var(--sans, system-ui); color: var(--mid); white-space: normal; } .fr-fit[hidden] { display: none; }
.fr-fit-add { font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
html.ph-lay .fr-fit { font-size: 12px; padding: 0 0 2px; }

.fr-head:has(> .fr-fit:not([hidden])) { flex-wrap: wrap !important; }
.fr-head > .fr-fit { flex: 1 1 100%; order: 9; margin: 0 0 2px; }
.pane .fr-fit { margin: 6px 0 0; }



html.ph-lay .main:has(> .stage[data-shape='9x16']), html.ph-lay .main:has(> .stage[data-shape='4x5']), html.ph-lay .main:has(> .stage[data-shape='1x1']) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content) minmax(0, 1fr); align-items: end; column-gap: 10px; padding: 6px 12px 6px; }
html.ph-lay .main:has(> .stage[data-shape='9x16']) > *, html.ph-lay .main:has(> .stage[data-shape='4x5']) > *, html.ph-lay .main:has(> .stage[data-shape='1x1']) > * { grid-column: 1 / -1; }
html.ph-lay .main:has(> .stage[data-shape='9x16']) > .stage, html.ph-lay .main:has(> .stage[data-shape='4x5']) > .stage, html.ph-lay .main:has(> .stage[data-shape='1x1']) > .stage { grid-column: 2; grid-row: 1; justify-self: center; border-radius: 10px; }
html.ph-lay .main:has(> .stage[data-shape='9x16']) > .film-row, html.ph-lay .main:has(> .stage[data-shape='4x5']) > .film-row, html.ph-lay .main:has(> .stage[data-shape='1x1']) > .film-row { grid-column: 3; grid-row: 1; align-self: end; width: auto; min-width: 0; padding: 0; margin: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; }
html.ph-lay .main:has(> .stage[data-shape]:not([data-shape='16x9'])) .row-tools { flex-direction: column; align-items: flex-start; margin: 0; gap: 4px; }
html.ph-lay .main:has(> .stage[data-shape]:not([data-shape='16x9'])) .row-say { flex: none; flex-direction: column; align-items: flex-start; font-size: 12px; }
html.ph-lay .main:has(> .stage[data-shape]:not([data-shape='16x9'])) .row-say > * { white-space: normal; }
html.ph-lay .main:has(> .stage[data-shape]:not([data-shape='16x9'])) .row-tools .st { white-space: normal; text-align: left; max-width: 100%; }
html.ph-lay .main:has(> .stage[data-shape]:not([data-shape='16x9'])) .row-tools .lek-st { padding: 6px 12px; line-height: 1.2; }
html.ph-lay .stage[data-shape='9x16'] { width: calc(46dvh * 9 / 16); max-height: 46dvh; }
html.ph-lay .stage[data-shape='4x5'] { width: calc(42dvh * 4 / 5); max-height: 42dvh; }
html.ph-lay .stage[data-shape='1x1'] { width: min(62vw, 38dvh); max-height: 38dvh; }
@media (max-height: 700px) {
  html.ph-lay .stage[data-shape='9x16'] { width: calc(38dvh * 9 / 16); max-height: 38dvh; }
  html.ph-lay .stage[data-shape='4x5'] { width: calc(36dvh * 4 / 5); max-height: 36dvh; }
  html.ph-lay .stage[data-shape='1x1'] { width: min(58vw, 34dvh); max-height: 34dvh; }
}

html.ph-lay.lek-open .stage[data-shape='9x16'] { width: calc(32dvh * 9 / 16); max-height: 32dvh; }
html.ph-lay.lek-open .stage[data-shape='4x5'] { width: calc(30dvh * 4 / 5); max-height: 30dvh; }
html.ph-lay.lek-open .stage[data-shape='1x1'] { width: 28dvh; max-height: 28dvh; }
html.ph-lay .stage { transition: width .2s ease, max-height .2s ease; }


html.ph-lay .ph-tellrow { order: 2; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 12px; border-top: 1px solid var(--hair); background: var(--card); }
html.ph-lay .ph-tellrow[hidden], html.ph-lay .ph-dock:not([data-fane='now']) .ph-tellrow { display: none; }
html.ph-lay .ph-tellrow .tell { position: static !important; display: flex; gap: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
html.ph-lay .ph-tellrow .tell[hidden] { display: none; }
html.ph-lay .ph-tellrow .tell input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 12px; background: var(--sunk); color: var(--ink); font: 16px var(--sans); }
html.ph-lay .ph-tellrow .tell button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font: 600 15px var(--sans); }
html.ph-lay .ph-tellrow .tell-t, html.ph-lay .ph-tellrow .tell-n { margin: 0; font-size: 12.5px; color: var(--mid); }
html.ph-lay .ph-tellrow .tell-t:empty { display: none; }
html.ph-lay .ph-tabs { order: 3; padding-right: 4px !important; }
html.ph-lay .ph-fab, html.ph-lay .ph-tell { display: none !important; }


html.ph-lay.kb-open .fr { top: calc(var(--vvt, 0px) + var(--top, 0px)); bottom: auto; height: calc(var(--vvh, 100dvh) - var(--top, 0px)); }
html.ph-lay.kb-open .journey, html.ph-lay.kb-open .film-row, html.ph-lay.kb-open .ph-tabs, html.ph-lay.kb-open .ph-note { display: none !important; }
html.ph-lay.kb-open .stage, html.ph-lay.kb-open .stage[data-k] { width: min(100%, calc(var(--vvh, 60dvh) * .3 * 16 / 9)); max-height: calc(var(--vvh, 60dvh) * .3); margin: 0 auto; }
html.ph-lay.kb-open .stage[data-shape='9x16'] { width: calc(var(--vvh, 60dvh) * .3 * 9 / 16); }
html.ph-lay.kb-open .stage[data-shape='4x5'] { width: calc(var(--vvh, 60dvh) * .3 * 4 / 5); }
html.ph-lay.kb-open .stage[data-shape='1x1'] { width: calc(var(--vvh, 60dvh) * .3); }
html.ph-lay.kb-open .fr-head { padding-top: 2px; padding-bottom: 2px; }
html.demo-rom.ph-lay.kb-open .dm-bar { top: var(--vvt, 0px); }
html.ph-lay.kb-open .lek-panel.lek-sheet { display: none; }


html.fr-imm, html.fr-imm body { background: #000 !important; overflow: hidden !important; }
html.fr-imm .fr { position: fixed !important; inset: 0 !important; top: 0 !important; height: auto !important; z-index: 2147480000; background: #000; }
html.fr-imm .fr-head, html.fr-imm .journey, html.fr-imm .net, html.fr-imm .ph-dock, html.fr-imm .film-row, html.fr-imm .couch-say, html.fr-imm .shapes, html.fr-imm .lek-host,
html.fr-imm .finish, html.fr-imm .strip, html.fr-imm .bench, html.fr-imm .panel, html.fr-imm .ph-tellrow, html.fr-imm header[data-nb], html.fr-imm .n9-tb, html.fr-imm .dm-bar, html.fr-imm .dm-coach,
html.fr-imm .dm-ring, html.fr-imm .dm-steg, html.fr-imm .dm-endcard, html.fr-imm .dm-sound, html.fr-imm .dm-tapp, html.fr-imm .dm-prikk, html.fr-imm .lek-panel, html.fr-imm .lek-merke, html.fr-imm .nb-dock { display: none !important; }
html.fr-imm .room { display: block !important; height: 100% !important; }
html.fr-imm .main { position: fixed !important; inset: 0; display: grid !important; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; background: #000; }
html.fr-imm .main > .stage { grid-column: 1 !important; grid-row: 1 !important; }
html.fr-imm .stage, html.fr-imm.couch .stage[data-shape], html.fr-imm.ph-lay .stage[data-k] { width: min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)) !important; max-height: none !important; aspect-ratio: 16 / 9; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; transition: none; }
html.fr-imm.couch .stage[data-shape='9x16'] { width: min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 9 / 16)) !important; aspect-ratio: 9 / 16; }
html.fr-imm.couch .stage[data-shape='4x5'] { width: min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 5)) !important; aspect-ratio: 4 / 5; }
html.fr-imm.couch .stage[data-shape='1x1'] { width: min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important; aspect-ratio: 1; }
.fr-imm-bar { display: none; }
html.fr-imm .fr-imm-bar:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 2147480001; pointer-events: none; }
.fr-imm-x { pointer-events: auto; position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: calc(env(safe-area-inset-right) + 10px); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1C1A27; font: 600 15px var(--sans, system-ui); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); }
.fr-imm-x svg { width: 20px; height: 20px; }
.fr-imm-snu { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 18px); margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); font: 500 14px var(--sans, system-ui); }
.fr-imm-snu[hidden] { display: none; }
.fr-imm-snu svg { width: 20px; height: 20px; }

#fr-tell-b { display: none; }
@media (max-height: 640px) {
  html.ph-lay .ph-dock:not([data-fane='now']) .ph-tellrow, html.ph-lay:not(.tell-paa):not(.kb-open) .ph-tellrow { display: none; }
  html.ph-lay:has(#ph-tell:not([hidden])) #fr-tell-b { display: inline-flex; }
}

html.ph-lay .main:not(:has(> .stage[data-shape]:not([data-shape='16x9']))) .film-row .row-tools { flex: 1 1 auto; min-width: 0; max-width: 100%; justify-content: flex-end; }
html.ph-lay .film-row .row-tools .st { white-space: nowrap; }
html.ph-lay #fr-tell-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.ph-lay #fr-tell-b { min-width: 44px; justify-content: center; }
html.ph-lay .main:not(:has(> .stage[data-shape]:not([data-shape='16x9']))) > .film-row { align-self: stretch; max-width: 100%; box-sizing: border-box; }
html.ph-lay .main:not(:has(> .stage[data-shape]:not([data-shape='16x9']))) .film-row .row-tools { flex-wrap: wrap; }

@media (max-width: 400px) { html.ph-lay .film-row .row-tools .st:not(.lek-st):has(svg) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.ph-lay .film-row .row-tools .st:not(.lek-st):has(svg) { min-width: 44px; justify-content: center; padding: 0 8px; } }
@media (max-width: 340px) { html.ph-lay .main:not(:has(> .stage[data-shape]:not([data-shape='16x9']))) > .film-row { padding: 0 6px; } html.ph-lay .film-row .row-tools { gap: 0; } html.ph-lay .film-row .row-tools .lek-st { padding: 0 9px; font-size: 13px; gap: 4px; } html.ph-lay .film-row .row-tools .st:not(.lek-st):has(svg) { min-width: 42px; padding: 0 6px; } }

html.ph-lay .moments li button { min-height: 40px; } html.ph-lay .fr summary { padding: 10px 0; min-height: 40px; box-sizing: border-box; }


html.ph-lay .stage { transition: none !important; }
html.ph-lay:not(.fr-imm) .fr-head { height: 54px; min-height: 0; box-sizing: border-box; align-items: flex-start; padding: 6px 6px 0 14px; border-bottom: 0; }
html.ph-lay:not(.fr-imm) .fr-head .fr-title { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 2px; min-width: 0; }
html.ph-lay:not(.fr-imm) .fr-head .fr-back { margin-top: -6px; }
html.ph-lay:not(.fr-imm) .fr-head .tools { align-self: center; margin-top: -6px; }
html.ph-lay:not(.fr-imm) .journey { position: relative; z-index: 3; margin-top: -26px; height: 26px; box-sizing: border-box; padding: 0 14px; display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 4px; pointer-events: none; border-bottom: 1px solid var(--hair); background: none; }
html.ph-lay:not(.fr-imm) .journey > * { pointer-events: auto; }
html.ph-lay:not(.fr-imm) .journey ol { flex: none; height: 3px; margin: 0; }
html.ph-lay:not(.fr-imm) .journey #fr-eta { flex: none; justify-content: flex-start; gap: 6px; max-width: calc(100% - 150px); font-size: 12.5px; line-height: 18px; margin: 0; }
html.ph-lay:not(.fr-imm) .fr:has(.fr-back:not([hidden])) .journey #fr-eta { margin-left: 26px; }


html.demo-rom.ph-lay:not(.fr-imm) .fr-head, html.demo-rom.ph-lay:not(.fr-imm) .journey { display: none !important; }
html.demo-rom.ph-lay .dm-pp { background: rgba(23, 19, 43, .07); color: #17132b; }
html.demo-rom[data-theme='dark'].ph-lay .dm-pp { background: rgba(255, 255, 255, .12); color: #f1eefb; }
html.demo-rom.ph-lay .dm-step.done i { background: #17132b; border-color: #17132b; }
html.demo-rom.ph-lay .dm-fill { background: #17132b; }
html.demo-rom[data-theme='dark'].ph-lay .dm-step.done i, html.demo-rom[data-theme='dark'].ph-lay .dm-fill { background: #f1eefb; border-color: #f1eefb; }
html.demo-rom.ph-lay .dm-step.on span { color: var(--acc, #6E4FF0); }


html.ph-lay:not(.fr-imm) .stage[data-shape='16x9'], html.ph-lay:not(.fr-imm) .stage:not([data-shape]) { border-radius: 0; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='1x1']) { display: flex; flex-direction: column; align-items: stretch; background: #0f0e14; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='1x1']) > .stage { width: min(100%, 40dvh); max-height: 40dvh; align-self: center; border-radius: 0; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='1x1']) > .film-row { background: var(--bg); width: auto; align-self: stretch; padding: 0 12px; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='1x1']) .row-tools { flex-direction: row; align-items: center; justify-content: flex-end; flex: 1 1 auto; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='1x1']) .row-say { display: none; }


html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']), html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: 1 1 auto; min-height: 0; padding: 0; container-type: size; background: radial-gradient(120% 80% at 50% 40%, #2a2833 0%, #121118 70%); overflow: hidden; }
html.ph-lay:not(.fr-imm) .main > .stage[data-shape='9x16'] { width: min(100cqw, 100cqh * 9 / 16) !important; height: min(100cqh, 100cqw * 16 / 9) !important; max-height: none !important; border-radius: 0; grid-column: auto; grid-row: auto; }
html.ph-lay:not(.fr-imm) .main > .stage[data-shape='4x5'] { width: min(100cqw, 100cqh * 4 / 5) !important; height: min(100cqh, 100cqw * 5 / 4) !important; max-height: none !important; border-radius: 0; grid-column: auto; grid-row: auto; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) > .film-row, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) > .film-row {
  position: absolute; right: 8px; bottom: 14px; z-index: 3; width: auto; min-width: 0; margin: 0; padding: 0; background: none; border: 0; grid-column: auto; grid-row: auto; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-say, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-say { display: none; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools { flex-direction: column-reverse; align-items: center; gap: 12px; margin: 0; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .st, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .st {
  width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(23, 19, 43, .62); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .st > span:not(.ikon), html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .st > span:not(.ikon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .lek-st, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .lek-st { background: #17152A; color: #fff; border-color: rgba(255, 255, 255, .28); width: 52px; height: 52px; box-shadow: 0 10px 26px -10px rgba(108, 86, 210, .9), 0 2px 6px rgba(0, 0, 0, .3); }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .lek-st .ikon, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .lek-st .ikon { margin: 0; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools svg, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools svg { width: 22px; height: 22px; }

html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock, html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock { flex: none; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) .ph-body, html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) .ph-body { flex: none; max-height: 30dvh; padding: 8px 12px 0; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) .ph-body::after, html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) .ph-body::after { display: none; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) #ph-now > :not(.live-bot), html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) #ph-now > :not(.live-bot) { display: none !important; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) .ph-p:not(#ph-now), html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) .ph-p:not(#ph-now) { display: none !important; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) .ph-body:not(:has(.live-bot > :not([hidden]):not(:empty))), html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) .ph-body:not(:has(.live-bot > :not([hidden]):not(:empty))) { display: none; }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock:not(.ph-open) .ph-tabs [aria-selected='true'], html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock:not(.ph-open) .ph-tabs [aria-selected='true'] { border-top-color: transparent; color: var(--mid); }
html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='9x16']) .ph-dock.ph-open .ph-body, html.ph-lay:not(.fr-imm) .room:has(.stage[data-shape='4x5']) .ph-dock.ph-open .ph-body { flex: none; height: 46dvh; border-top: 1px solid var(--hair); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .45); }
.ph-grab { display: none; }
html.ph-lay .room:has(.stage[data-shape='9x16']) .ph-dock.ph-open .ph-grab, html.ph-lay .room:has(.stage[data-shape='4x5']) .ph-dock.ph-open .ph-grab { display: flex; position: sticky; top: -10px; z-index: 4; margin: -10px -16px 4px; height: 28px; align-items: center; justify-content: center; width: calc(100% + 32px); border: 0; background: var(--card); padding: 0; }
.ph-grab i { width: 38px; height: 4px; border-radius: 2px; background: var(--hair); display: block; }


html.ph-lay:not(.tell-paa):not(:has(#lr-tekst:focus)) .ph-tellrow { display: none !important; }
html.ph-lay .ph-tabs #fr-tell-b { display: none !important; }
html.ph-lay:has(#ph-tell:not([hidden])) .ph-tabs #fr-tell-b { display: grid !important; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border: 0; border-top: 2px solid transparent; border-radius: 0; background: none; color: var(--mid); font: 600 11.5px/1.15 var(--sans); padding: 4px 2px; min-width: 0; }
html.ph-lay .ph-tabs #fr-tell-b span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
html.ph-lay .ph-tabs #fr-tell-b svg { width: 22px; height: 22px; color: var(--acc); }
html.ph-lay.tell-paa .ph-tabs, html.ph-lay.kb-open .ph-tabs { display: none !important; }
html.ph-lay .ph-tellrow .tell-x { display: none; }
html.ph-lay.tell-paa .ph-tellrow .tell-x, html.ph-lay.kb-open .ph-tellrow .tell-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mid); order: -1; }
html.ph-lay .ph-tellrow .tell-x svg { width: 18px; height: 18px; }


html.ph-lay.kb-open:has(#lr-tekst:focus) .stage, html.ph-lay.kb-open:has(#lr-tekst:focus) .stage[data-k] { width: min(100%, calc((var(--vvh, 60dvh) - 132px) * 16 / 9)); max-height: calc(var(--vvh, 60dvh) - 132px); }

html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .stage, html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .stage[data-k] { width: min(100%, calc(var(--vvh, 60dvh) * .4 * 16 / 9)); max-height: calc(var(--vvh, 60dvh) * .4); margin: 0 auto; }
html.ph-lay.kb-open:has(#lr-tekst:focus) .main > .stage[data-shape='9x16'] { width: calc((var(--vvh, 60dvh) - 132px) * 9 / 16) !important; height: calc(var(--vvh, 60dvh) - 132px) !important; }
html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .main > .stage[data-shape='9x16'] { width: calc(var(--vvh, 60dvh) * .4 * 9 / 16) !important; height: calc(var(--vvh, 60dvh) * .4) !important; }
html.ph-lay.kb-open:has(#lr-tekst:focus) .main > .stage[data-shape='4x5'] { width: calc((var(--vvh, 60dvh) - 132px) * 4 / 5) !important; height: calc(var(--vvh, 60dvh) - 132px) !important; }
html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .main > .stage[data-shape='4x5'] { width: calc(var(--vvh, 60dvh) * .4 * 4 / 5) !important; height: calc(var(--vvh, 60dvh) * .4) !important; }
html.ph-lay.kb-open .main:has(> .stage[data-shape='9x16']), html.ph-lay.kb-open .main:has(> .stage[data-shape='4x5']) { flex: none; container-type: normal; }
html.ph-lay.kb-open:has(#lr-tekst:focus) .ph-body { display: none !important; }
html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .ph-dock { flex: 1 1 auto; min-height: 0; } html.ph-lay.kb-open:not(:has(#lr-tekst:focus)) .ph-body { display: block !important; flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important; }
html.ph-lay.kb-open .ph-dock, html.ph-lay.tell-paa .ph-dock { justify-content: flex-end; }


html.ph-lay.lek-open:not(.fr-imm) .main:has(> .stage[data-shape='9x16']), html.ph-lay.lek-open:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) { flex: 0 0 50%; }
html.ph-lay.lek-open:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) > .film-row, html.ph-lay.lek-open:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) > .film-row { display: none; }

html.demo-rom.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']), html.demo-rom.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) { max-height: calc(100dvh - var(--dm-h, 44px) - var(--dm-ark-h, 0px) - 16px); }
html.demo-rom.ph-lay .dm-sound.i-bar { background: rgba(23, 19, 43, .07); color: #17132b; box-shadow: none; }
html.demo-rom[data-theme='dark'].ph-lay .dm-sound.i-bar { background: rgba(255, 255, 255, .12); color: #f1eefb; }

html.ph-lay:not(.fr-imm) body:has(#fr-lek-stor:not([hidden])) .main:has(> .stage[data-shape='9x16']) #fr-lek-kod:not([hidden]), html.ph-lay:not(.fr-imm) body:has(#fr-lek-stor:not([hidden])) .main:has(> .stage[data-shape='4x5']) #fr-lek-kod:not([hidden]) { display: inline-flex !important; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .st, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .st { font-size: 0; line-height: 0; gap: 0; overflow: hidden; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .st .ikon, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .st .ikon { display: inline-flex; width: auto; height: auto; }

html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) > .film-row { right: max(0px, calc((100cqw - min(100cqw, 100cqh * 9 / 16)) / 4 - 22px)); }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .st, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) .row-tools .lek-st { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }

html.ph-lay:not(.fr-imm):not(.kb-open) .main > .stage[data-shape='9x16'] { width: min(100cqw - 104px, 100cqh * 9 / 16) !important; height: min(100cqh, (100cqw - 104px) * 16 / 9) !important; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) > .film-row { right: max(4px, calc((100cqw - min(100cqw - 104px, 100cqh * 9 / 16)) / 4 - 22px)); }
html.ph-lay:not(.fr-imm):not(.kb-open) .main > .stage[data-shape='4x5'] { width: min(100cqw, (100cqh - 60px) * 4 / 5) !important; height: min(100cqh - 60px, 100cqw * 5 / 4) !important; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) > .film-row { position: static; height: 60px; display: flex; align-items: center; justify-content: center; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools { flex-direction: row-reverse; gap: 14px; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .st, html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) .row-tools .lek-st { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='9x16']) > .film-row:not(:has(.st:not([hidden]))), html.ph-lay:not(.fr-imm) .main:has(> .stage[data-shape='4x5']) > .film-row:not(:has(.st:not([hidden]))) { display: none; }

html.ph-lay .ph-tabs button, html.ph-lay .ph-tabs #fr-tell-b { font-size: 12px; line-height: 1.2; }
html.ph-lay .ph-tabs button .l, html.ph-lay .ph-tabs #fr-tell-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.ph-lay .hint, html.ph-lay .act p, html.ph-lay .auto, html.ph-lay .finish p, html.ph-lay .ph-note, html.ph-lay .ph-vers-t, html.ph-lay .shapes .hint, html.ph-lay .pane-wait .hint,
html.ph-lay .tell-t, html.ph-lay .tell-n, html.ph-lay .rows li > small, html.ph-lay .report, html.ph-lay .fr-fit, html.ph-lay .row-say, html.ph-lay .moments li.hist details .hint { font-size: 14px; line-height: 1.4; }
html.ph-lay .moments li.hist em, html.ph-lay .moments li.note em, html.ph-lay .feed > li.note em, html.ph-lay .sug button em, html.ph-lay .w-asks em, html.ph-lay .credits { font-size: 13px; }
html.ph-lay .lek-sheet .linje, html.fr-full.ph-lay .lek-panel.lek-sheet .linje { font-size: 14px; }
html.ph-lay .act p { text-align: left; }

html.ph-lay .controls:not(:has(> :not([hidden]))) { display: none; }

html.ph-lay.kb-open .fr[data-fp] .ph-tabs, html.ph-lay.tell-paa .fr[data-fp] .ph-tabs { display: none !important; }