:root {
  --bg: #F6F3ED; --panel: #FFFFFF; --ink: #141311; --muted: #6A645B; --line: #E3DDD2; --soft: #EFEAE1;
  --accent: #A8442A; --accent-hover: #8F3A23; --on-accent: #FFFFFF; --ok: #2F5D46; --warn: #8A5A00; --bad: #A12A1A;
  --radius: 10px; --shadow: 0 1px 2px rgba(20, 19, 17, .06), 0 4px 16px rgba(20, 19, 17, .05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; overflow-x: clip; } /* clip, not hidden: hidden makes body a scroll box and breaks the sticky preview */
body { background: var(--bg); color: var(--ink); font: 15px/1.5 "TBV Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 20px; } h3 { font-size: 15px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons */
.btn { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: #CFC7B9; background: #FBFAF7; }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .pick:focus-visible, .qcard:focus-visible, .catsq:focus-visible, .bgtile:focus-visible, .pickcard:focus-visible, .fcard:focus-visible, .acard:focus-visible, .look:focus-visible, .swatch-btn:focus-visible, .qnow:focus-visible, .qempty:focus-visible, .bgthumb:focus-visible, .seg button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.big { min-height: 48px; padding: 0 22px; font-size: 16px; width: 100%; justify-content: center; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--soft); }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.chip { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: var(--soft); gap: 3px; }
.seg button { border: 0; background: transparent; min-height: 32px; padding: 0 14px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel); box-shadow: var(--shadow); font-weight: 600; }

/* inputs */
input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 7px 10px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
/* A form select that keeps its 38 px in WebKit too (Safari draws a native select at 21 px and ignores min-height): its
   own look off, a fixed height and a drawn arrow, like the .ln-list and .ppl-sheet selects. */
select.field-select { -webkit-appearance: none; appearance: none; height: 38px; padding-right: 32px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A645B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; }
label.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
label.field > span { color: var(--ink); font-weight: 600; font-size: 13px; }
input[type=range] { width: 100%; accent-color: var(--accent); min-height: 24px; }
.slider { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.slider output { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* shell */
.top { position: sticky; top: 0; z-index: 10; background: rgba(246, 243, 237, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1480px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.mono { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #F3EEE4; display: grid; place-items: center; font-size: 10.5px; font-weight: 650; letter-spacing: .1em; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tab { border: 0; background: transparent; min-height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 550; white-space: nowrap; }
.tab:hover { color: var(--ink); background: var(--soft); }
.tab[aria-current="page"] { color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.tab .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
main { max-width: 1480px; margin: 0 auto; padding: 22px 20px 80px; }
.view-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.view-head p { margin: 4px 0 0; }

/* cards & panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel h3 { margin-bottom: 10px; }
.section-label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.empty { border: 1px dashed #D5CDBF; border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); background: rgba(255,255,255,.5); }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login form { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }

/* make */
.make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 22px; align-items: start; }
.seg.wrap { flex-wrap: wrap; }
.qnow { text-align: left; border: 1px solid var(--line); background: #FBFAF7; border-radius: 8px; padding: 12px 14px; cursor: pointer; display: grid; gap: 6px; }
.qnow:hover, .qempty:hover { border-color: #CFC7B9; }
.qnow .t, ol.qlist .t { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.qempty { min-height: 72px; border: 1px dashed #D5CDBF; border-radius: 8px; background: transparent; cursor: pointer; color: var(--muted); }
ol.qlist { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
ol.qlist li > * { vertical-align: middle; } ol.qlist li { font-size: 14px; } ol.qlist .t { -webkit-line-clamp: 2; display: -webkit-inline-box; width: calc(100% - 90px); font-size: 14px; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 28px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.fold .sum { flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-body { margin-top: 14px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); margin-right: 6px; vertical-align: -1px; }
.bgrow { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; }
.bgthumb { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 9 / 16; cursor: pointer; background: #ddd; }
.bgnow { width: 100%; height: 100%; object-fit: cover; display: block; }
span.bgnow.fill { display: grid; place-items: center; background: #3A352D; color: #fff; }

/* big pop-up windows (quotes, backgrounds) */
dialog.big { width: min(1180px, calc(100vw - 32px)); height: min(900px, calc(100vh - 32px)); max-width: none; max-height: none; overflow: hidden; }
.dlg { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dlg > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dlg-tools { display: grid; gap: 10px; padding: 14px 20px 0; }
.dlg-tools:empty { display: none; }
.dlg-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 20px; display: grid; gap: 16px; align-content: start; }
.dlg > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: #FBFAF7; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.qcard { aspect-ratio: 1; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-width: 0; }
.qcard:hover { border-color: #CFC7B9; }
.qcard[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.qcard .qtop { display: flex; gap: 4px; flex-wrap: wrap; }
.qcard .t { flex: 1; min-height: 0; font-size: 15px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.qcard .m { font-size: 12.5px; color: var(--muted); }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.catsq { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; overflow: hidden; padding: 0; cursor: pointer; background: #2B2925; color: #fff; text-align: left; }
.catsq img, .catsq .fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.catsq:hover img { transform: scale(1.04); }
.catsq .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02) 25%, rgba(0,0,0,.74)); }
.catsq .lbl { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; }
.catsq strong { font-size: 19px; line-height: 1.2; }
.catsq .ico { display: block; margin-bottom: 4px; }
.catsq[aria-pressed="true"], .bgtile[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: -3px; }
.bggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bgtile { position: relative; aspect-ratio: 9 / 16; border: 0; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; background: #2B2925; }
.bggrid.photos .bgtile { aspect-ratio: 3 / 4; }
.bgtile img, .bgtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bgtile .cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; text-align: left; }
.drop { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border: 2px dashed #D5CDBF; border-radius: 12px; text-align: center; cursor: pointer; }
.drop input { max-width: 320px; }
.q { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 10px 12px; cursor: pointer; display: grid; gap: 4px; }
.q:hover { border-color: #CFC7B9; }
.q[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.q .t { font-size: 14px; line-height: 1.35; }
.q .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-block; padding: 0 7px; border-radius: 9px; background: var(--soft); font-size: 11.5px; line-height: 19px; color: var(--muted); }
.pill.used { background: #F3E3DC; color: #7A3320; } .pill.ok { background: #DFEDE4; color: #234A36; } .pill.warn { background: #F6EBD3; color: #6B4700; }
.stage { position: sticky; top: 80px; display: grid; gap: 12px; justify-items: center; }
.frame { width: min(100%, 420px, calc((100vh - 330px) * .5625 + 20px)); min-width: min(100%, 260px); background: #DDD7CC; border-radius: 12px; padding: 10px; }
.frame canvas { width: 100%; display: block; border-radius: 6px; background: #CFC8BB; }
.frame.zones { position: relative; }
.controls { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; } /* one long control never widens the column past its 440 px (2026-10-10) */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; }
.pick { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 0; cursor: pointer; background: #ddd; aspect-ratio: 9 / 16; overflow: hidden; }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick[aria-pressed="true"] { border-color: var(--accent); }
.pick .badge { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 0 5px; border-radius: 5px; }
.pick.swatch { aspect-ratio: 1; }
.tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tpl { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px; cursor: pointer; display: grid; gap: 6px; text-align: left; font-size: 12.5px; }
.tpl canvas { width: 100%; border-radius: 4px; display: block; background: #eee; }
.tpl[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.words .chip { min-height: 28px; padding: 0 9px; font-size: 13px; }
.result { display: grid; gap: 10px; }
.progress { height: 6px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }

/* grids */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.card .thumb { background: #DDD7CC; display: grid; place-items: center; padding: 10px; }
.card .thumb canvas, .card .thumb img { width: 100%; max-width: 210px; border-radius: 5px; display: block; }
.card .body { padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.card .why { font-size: 13px; color: var(--muted); }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.strip .pick { flex: 0 0 92px; scroll-snap-align: start; }
table.list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
table.list th, table.list td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.list th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: #FBFAF7; font-weight: 650; }
.week { display: grid; gap: 8px; }
.slot { display: grid; grid-template-columns: 110px 70px 120px 1fr auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 9px; font-size: 14px; z-index: 50; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.toast.bad { background: var(--bad); }
.toast .toast-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 4px 2px; min-height: 24px; } /* a file to press again (For you) */
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(20, 19, 17, .35); }
dialog form { padding: 20px; display: grid; gap: 12px; }

/* style menus (font, animation, colour) */
.pickcard { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: #FBFAF7; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.pickcard:hover { border-color: #CFC7B9; }
.pickcard .aa { font-size: 30px; line-height: 1; text-align: center; }
.pickcard .anim-ico { font: 700 26px "TBV Inter"; color: var(--accent); }
.pickcard > .btn { pointer-events: none; }
.fmeta { display: grid; gap: 2px; min-width: 0; }
.fmeta strong { font-size: 14px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fcard, .acard, .look { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; display: grid; }
.fcard:hover, .acard:hover, .look:hover { border-color: #CFC7B9; }
.fcard[aria-pressed="true"], .acard[aria-pressed="true"], .look[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.fcard .fmeta, .acard .fmeta, .look .fmeta { padding: 10px 12px 12px; }
.fsample { display: flex; align-items: center; min-height: 150px; padding: 18px; font-size: 25px; line-height: 1.18; }
.anidemo { display: grid; place-content: center; min-height: 150px; padding: 16px; background: #1B1917; color: #F5F1EA; font: 600 21px/1.25 "TBV Newsreader"; text-align: center; overflow: hidden; }
.anidemo .ln { display: block; }
.anidemo.fade .ln { animation: aFade 3.2s infinite both; }
.anidemo.rise .ln { animation: aRise 3.2s infinite both; }
.anidemo.word .w { animation: aWord 3.2s infinite both; }
.anidemo.type { font-family: "TBV Courier"; font-weight: 400; font-size: 18px; place-content: center start; }
.anidemo.type .tw { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; width: 0; animation: aType 3.2s steps(var(--n, 24)) infinite; max-width: 100%; }
@keyframes aFade { 0% { opacity: 0; } 22%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aRise { 0% { opacity: 0; transform: translateY(16px); } 22%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes aWord { 0% { opacity: 0; } 8%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aType { 0% { width: 0; } 62%, 90% { width: calc(var(--n, 24) * 1ch); } 100% { width: 0; } }
@media (prefers-reduced-motion: reduce) { .anidemo * { animation: none !important; opacity: 1 !important; width: auto !important; transform: none !important; } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-btn { display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.swatch-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sw { display: block; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.sw.own, .sw[data-own] { background: conic-gradient(#141311 0 25%, #F3EEE4 0 50%, #E8B547 0 75%, #A8442A 0); }
.sws { display: flex; justify-content: center; } .sws .sw { width: 28px; height: 28px; } .sws .sw + .sw { margin-left: -8px; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lookprev { display: grid; place-items: center; height: 90px; font: 600 34px "TBV Newsreader"; }
.lookprev.dark { background: linear-gradient(165deg, #1F2A44, #5A3F5E 55%, #9A5A48); color: #F5F1EA; }
.lookprev.light { background: #F3EEE4; color: #141311; }
.lookprev.bw { background: linear-gradient(165deg, #111, #555 55%, #8a8a8a); color: #FFF; }
.lookprev.bwlight { background: linear-gradient(165deg, #d9d9d9, #f2f2f2); color: #111; }
.fx-prev { display: grid; place-items: center; min-height: 150px; padding: 18px; font: 700 22px/1.35 "TBV Inter"; text-align: center; }
.fx-line { padding: .12em .3em; border-radius: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fx-block { display: inline-block; padding: 14px 16px; border-radius: 10px; }
.pickcard .fx-ico { font: 800 24px "TBV Inter"; color: #fff; background: #141311; border-radius: 6px; padding: 2px 6px; -webkit-text-stroke: 1px #A8442A; justify-self: center; }
.combo { position: relative; display: grid; }
.combo .acard { width: 100%; }
.combo-del { position: absolute; top: 6px; right: 6px; min-height: 28px; background: rgba(255,255,255,.9); }
.combo-prev { min-height: 120px; font-size: 20px; }
/* immersive video editor: only the footage, sliders beside it, the studio blurred behind */
dialog.immersive { background: #121110; color: #F3EEE4; border: 1px solid #2A2724; width: min(1080px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); }
dialog.immersive::backdrop { background: rgba(12, 11, 10, .55); -webkit-backdrop-filter: blur(12px) saturate(.8); backdrop-filter: blur(12px) saturate(.8); }
.gwrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: 100%; min-height: 0; }
.gstage { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 20px; place-items: center; min-height: 0; background: #0B0A09; }
.grade-view { height: 100%; max-height: calc(100vh - 150px); width: auto; aspect-ratio: 9 / 16; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; }
.gpanel { display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow: auto; border-left: 1px solid #2A2724; }
.gpanel h3 { color: #fff; }
.immersive .chip { background: #1E1C1A; border-color: #3A3632; color: #F3EEE4; }
.immersive .chip[aria-pressed="true"] { background: #F3EEE4; color: #121110; border-color: #F3EEE4; }
.immersive .btn { background: #1E1C1A; border-color: #3A3632; color: #F3EEE4; }
.immersive .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.immersive .btn.ghost { background: transparent; border-color: transparent; }
.immersive .section-label { color: #A8A096; }
.gslider { display: grid; gap: 4px; font-size: 13px; }
.gslider output { color: #A8A096; font-variant-numeric: tabular-nums; }
.gslider input[type=range] { width: 100%; accent-color: #E8B547; }
.pickcard .grade-ico { color: var(--accent); justify-self: center; }
.frame { position: relative; }
.dragzone { position: absolute; inset: 10px; border-radius: 6px; touch-action: none; }
.dragzone[data-over="text"], .dragzone[data-over="handle"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.dragzone.dragging { background: linear-gradient(transparent 33.2%, rgba(255,255,255,.25) 33.3%, transparent 33.6%, transparent 66.5%, rgba(255,255,255,.25) 66.6%, transparent 66.9%), linear-gradient(90deg, transparent 33.2%, rgba(255,255,255,.25) 33.3%, transparent 33.6%, transparent 66.5%, rgba(255,255,255,.25) 66.6%, transparent 66.9%); }
.dragzone .ghost { position: absolute; border: 2px dashed #E8B547; border-radius: 6px; background: rgba(232,181,71,.12); pointer-events: none; }
.dragzone .guides { position: absolute; inset: 0; pointer-events: none; }
.dragzone .guides i { position: absolute; display: block; }
.dragzone .gsafe { outline: 1px dashed rgba(255,255,255,.35); border-radius: 4px; }
.dragzone .gline { border-top: 1px dashed rgba(255,255,255,.28); }
.dragzone .gline.v { border-top: 0; border-left: 1px dashed rgba(255,255,255,.28); }
.dragzone .gline.on { border-color: rgba(232,181,71,.7); border-style: solid; } /* see-through: the letters under a guide stay readable while dragging */
.dragzone .gspot { border: 1px dashed rgba(255,255,255,.45); border-radius: 4px; }
.dragzone .gspot.on { border: 2px solid #E8B547; }
.dragzone .gsafe.faint { outline-color: rgba(255,255,255,.18); }
.dragzone .gsmart { border-top: 1px solid #FF3DA8; box-shadow: 0 0 0 .5px rgba(255,61,168,.35); }
.dragzone .gsmart.v { border-top: 0; border-left: 1px solid #FF3DA8; }
.dragzone .guides b { position: absolute; font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.dragzone .glabel { color: #fff; background: #FF3DA8; padding: 3px 6px; border-radius: 4px; }
.dragzone .gread { color: #141311; background: #E8B547; padding: 3px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.dragzone .selbox { position: absolute; border: 1.5px solid rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(20,19,17,.35); border-radius: 4px; pointer-events: none; transform-origin: 50% 50%; }
.dragzone .selbox::before { content: ''; position: absolute; left: 50%; top: -22px; height: 20px; border-left: 1.5px solid rgba(255,255,255,.92); }
.dragzone .selh { position: absolute; width: 24px; height: 24px; pointer-events: auto; display: grid; place-items: center; touch-action: none; }
.dragzone .selh::before { content: ''; width: 11px; height: 11px; background: #fff; border: 1.5px solid #141311; border-radius: 3px; }
.dragzone .selh.nw { left: -13px; top: -13px; cursor: nwse-resize; } .dragzone .selh.se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.dragzone .selh.ne { right: -13px; top: -13px; cursor: nesw-resize; } .dragzone .selh.sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.dragzone .selh.rot { left: 50%; top: -40px; margin-left: -12px; cursor: grab; } .dragzone .selh.rot::before { border-radius: 50%; width: 13px; height: 13px; }
.dragzone .draghint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20,19,17,.85); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.handlegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: var(--soft); }
.handlegrid button { border: 0; background: transparent; min-height: 32px; border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.handlegrid button[aria-pressed="true"] { background: var(--panel); box-shadow: var(--shadow); font-weight: 600; }
.handlegrid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* swipe decks (Library, Trending) */
.swhost { display: grid; justify-items: center; }
.swdeck { width: min(100%, 440px); display: grid; gap: 14px; }
.swstack { position: relative; height: min(560px, 72vh); outline: none; }
.swstack:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 22px; }
.swcard { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,19,17,.18); transition: transform .22s ease, opacity .22s ease; touch-action: pan-y; user-select: none; cursor: grab; }
.swcard.dragging { transition: none; cursor: grabbing; }
.swcard.depth1 { transform: translateY(10px) scale(.96); opacity: .9; }
.swcard.depth2 { transform: translateY(20px) scale(.92); opacity: .7; }
.swcard.fly-yes { transform: translate(140%, -10px) rotate(18deg) !important; opacity: 0; }
.swcard.fly-no { transform: translate(-140%, -10px) rotate(-18deg) !important; opacity: 0; }
.swcard.fly-up { transform: translate(0, -130%) !important; opacity: 0; }
.swstamp { position: absolute; top: 22px; padding: 4px 12px; border: 3px solid; border-radius: 8px; font: 800 22px/1.1 "TBV Inter"; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .1s; pointer-events: none; }
.swstamp.yes { left: 20px; color: #7EE2A8; transform: rotate(-12deg); }
.swstamp.no { right: 20px; color: #FF8A7A; transform: rotate(12deg); }
.swstamp.up { left: 50%; top: auto; bottom: 90px; transform: translateX(-50%); color: #E8B547; }
.swcard[data-lean="yes"] .swstamp.yes, .swcard[data-lean="no"] .swstamp.no, .swcard[data-lean="up"] .swstamp.up { opacity: 1; }
.swbar { display: flex; justify-content: center; align-items: center; gap: 18px; }
.swbtn { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.swbtn.small { width: 44px; height: 44px; color: var(--muted); }
.swbtn.no { color: #B23A2A; } .swbtn.yes { color: #2F7A50; } .swbtn.up { color: #A8442A; }
.swbtn:disabled { opacity: .35; cursor: default; }
.swbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.swlegend { display: flex; gap: 14px; flex-wrap: wrap; }
.swempty { position: absolute; inset: 0; display: grid; place-items: center; border: 1px dashed #D5CDBF; border-radius: 20px; padding: 24px; }
.qface { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px; color: #F5F1EA; }
.qface.trend { background: linear-gradient(160deg, #1B1917, #3A3128); }
.qface-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qrank { font: 800 22px/1 "TBV Inter"; color: #E8B547; margin-right: 4px; }
.qbadge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 12px; color: #EDE6DA; }
.qbadge a { color: inherit; }
/* a text link in small print (For you's evidence, Sounds' source 1-8, Checked source, see post): the same look, a
   24 px tap target at every width (WCAG 2.5.8; QA back sweep P3-10: they were 14-16 px). The padding grows the box and
   the negative margin gives the space back, so the line around it does not move. */
a.tap { display: inline-block; min-height: 24px; padding: 4px 2px; margin: -4px -2px; line-height: 16px; box-sizing: border-box; vertical-align: baseline; }
.src-line { min-height: 24px; } /* Sounds' stacked sources: rows as tall as the targets, so two never overlap */
.qbadge.gold { background: #E8B547; color: #1B1917; font-weight: 700; }
.qbadge.warn { background: rgba(255,138,122,.22); }
.qface-text { flex: 1; min-height: 0; overflow: auto; margin: 0; font: 600 clamp(22px, 4.2vw, 30px)/1.25 "TBV Newsreader", serif; display: flex; align-items: center; }
.qface-who { margin: 0; font-size: 14px; color: #D8CFC2; }
.qface-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qwhy { font-size: 12px; color: #CFC6B8; }
.qface-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qface-actions .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #F5F1EA; }
.qface-actions .btn.ghost { background: transparent; border-color: transparent; }
.qgrid.lib { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* the Library's search row (QA back sweep P2-9): the box and its count, above the filters in every view */
.lib-find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.lib-find .lib-search { flex: 1 1 260px; max-width: 420px; min-height: 40px; }
.qtile { position: relative; aspect-ratio: 4 / 5; border: 0; border-radius: 16px; padding: 16px; color: #F5F1EA; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.qtile:hover { filter: brightness(1.08); }
.qtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qtile-text { flex: 1; min-height: 0; font: 600 17px/1.3 "TBV Newsreader", serif; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.qtile-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.35); display: grid; place-items: center; color: #fff; }
@media (prefers-reduced-motion: reduce) { .swcard { transition: none; } }
.bgtile.shelf { display: block; }
.bgtile.shelf .shelf-pick { position: absolute; inset: 0; border: 0; padding: 0; background: #2B2925; cursor: pointer; }
.bgtile.shelf .shelf-pick video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgtile.shelf .shelf-acts { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 4px; }
.bgtile.shelf .shelf-acts .btn { min-height: 28px; padding: 0 8px; font-size: 12px; background: rgba(0,0,0,.55); color: #fff; border-color: transparent; }
.wheelbox { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.wheel { width: 240px; height: 240px; border-radius: 50%; cursor: crosshair; touch-action: none; }

@media (max-width: 980px) { .make { grid-template-columns: minmax(0, 1fr); } .stage { position: static; } }
@media (max-width: 760px) {
  dialog.big { width: 100vw; height: 100dvh; border-radius: 0; border: 0; margin: 0; }
  .dlg > header, .dlg-tools, .dlg-body, .dlg > footer { padding-left: 16px; padding-right: 16px; }
  .qgrid, .catgrid, .bggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qcard { padding: 10px; } .qcard .t { font-size: 13.5px; -webkit-line-clamp: 6; }
  .catsq strong { font-size: 16px; } .catsq .lbl .tiny { display: none; }
  .gwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 55vh) auto; overflow: auto; } .gpanel { border-left: 0; border-top: 1px solid #2A2724; overflow: visible; } .grade-view { max-height: 52vh; }
  .fgrid, .looks { grid-template-columns: minmax(0, 1fr); } .wheelbox { grid-template-columns: minmax(0, 1fr); justify-items: center; } .fsample, .anidemo { min-height: 120px; }
  .top-in { gap: 10px; padding: 0 12px; } .brand span { display: none; } .who .name { display: none; }
  main { padding: 16px 16px 60px; } .slot { grid-template-columns: 1fr 1fr; }
}
/* free form on posts and carousels (2026-10-09): the handle's x (a 24 px target), the carousel's "Changes go to"
   bar, the Apply to all notes and the marks on slides with their own look */
.dragzone .hdel { position: absolute; width: 24px; height: 24px; padding: 0; border: 1.5px solid #fff; border-radius: 50%; background: #FF3DA8; color: #fff; display: grid; place-items: center; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(20,19,17,.35); z-index: 2; }
.dragzone .hdel:hover { background: #D81F86; }
.dragzone .hdel[hidden] { display: none; }
.stagetools { justify-content: center; }
.scopebar { width: min(100%, 560px); gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); justify-content: center; }
.scopebar .seg { flex-wrap: wrap; max-width: 100%; }
.scopenote { gap: 8px; align-items: center; }
.hshow { gap: 8px; align-items: center; min-height: 24px; }
.hshow input { width: 18px; height: 18px; }
.slide-row .slide-marks { margin-left: auto; display: inline-flex; gap: 4px; flex: none; }
.slide-mark { font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 999px; background: rgba(255,61,168,.12); color: #9C0F5B; white-space: nowrap; }
.scopewrap { display: contents; }
/* the Creators carousel editor (Make's tools there too): marks on strip thumbnails of slides with their own look */
.inf-thumb .inf-marks { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; flex-wrap: wrap; gap: 3px; pointer-events: none; }
.inf-thumb .inf-marks .slide-mark { background: rgba(255,255,255,.94); font-size: 10px; padding: 3px 5px; }
/* Made (quick win 1, 2026-10-09): the posts due for results, their inline form, and What's working's six tables.
   Tables scroll inside their own box, so the page never scrolls sideways at 320 px. */
.due { margin-bottom: 18px; }
.due h3 { display: flex; align-items: center; gap: 8px; }
.count-pill { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12px; line-height: 22px; text-align: center; font-weight: 650; }
.due-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.due-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.due-row.open { border-color: #CFC7B9; background: #FBFAF7; }
.due-row .dthumb { width: 48px; height: 64px; object-fit: cover; border-radius: 5px; background: #DDD7CC; display: block; }
.due-row .dtext { min-width: 0; display: grid; gap: 2px; }
.due-row .dline { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-row .dact { justify-content: flex-end; }
.due-form { grid-column: 1 / -1; display: grid; gap: 10px; padding: 4px 2px 2px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.mgrid input, .mgrid select { min-height: 36px; width: 100%; min-width: 0; }
/* WebKit ignores min-height on a native select (it drew 21 px): its own look off, our arrow on */
.mgrid select { -webkit-appearance: none; appearance: none; height: 36px; padding-right: 30px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A645B' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; }
.working-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr)); gap: 16px 20px; }
.wtable { min-width: 0; }
.tablewrap { overflow-x: auto; max-width: 100%; border-radius: var(--radius); }
.tablewrap table.list { min-width: 500px; table-layout: auto; }
.tablewrap table.list th, .tablewrap table.list td { padding: 9px 10px; }
.tablewrap table.list thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tablewrap table.list td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablewrap table.list th.wname { white-space: normal; min-width: 110px; max-width: 220px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); background: var(--panel); font-weight: 550; vertical-align: top; }
@media (max-width: 560px) {
  .due-row { grid-template-columns: 40px minmax(0, 1fr); }
  .due-row .dthumb { width: 40px; height: 53px; }
  .due-row .dact { grid-column: 1 / -1; justify-content: flex-start; }
}
/* The AI helper pill in the header and its off dialog (quick win 2, 2026-10-09). Refreshed only by the checks before
   an AI job and by a press on the pill, never by a timer. */
.helper-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.helper-pill:hover { border-color: #CFC7B9; }
.helper-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.helper-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #B9B1A4; flex: none; }
.helper-pill[data-on="true"] { color: var(--ok); }
.helper-pill[data-on="true"] .dot { background: var(--ok); }
.helper-pill[data-on="false"] { color: var(--warn); border-color: #E7D3A8; background: #FBF5E8; }
.helper-pill[data-on="false"] .dot { background: var(--warn); }
.helper-pill .mid, .helper-pill .short { display: none; }
dialog.helper-off form { max-width: 460px; }
@media (max-width: 1599px) { .helper-pill .long { display: none; } .helper-pill .mid { display: inline; } }
@media (max-width: 760px) {
  .helper-pill { padding: 0 8px; }
  .helper-pill .mid { display: none; }
  .helper-pill .short { display: inline; }
}
.shadowrow { gap: 8px; flex-wrap: nowrap; } .shadowrow input[type=range] { flex: 1 1 auto; min-width: 80px; } .shadowrow output { min-width: 4ch; text-align: right; }
/* Make's hook test for Trial Reels and Made's Hook tests (quick win 3, 2026-10-09) */
.result .variants { border-top: 1px solid var(--line); padding-top: 10px; gap: 8px; }
.variant-hooks { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; }
.variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.variant { margin: 0; display: grid; gap: 4px; min-width: 0; }
.variant img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: #DDD7CC; display: block; }
.variant figcaption { overflow-wrap: anywhere; line-height: 1.3; }
.tests .tablewrap table.list td.whook { white-space: normal; min-width: 160px; max-width: 280px; }
.tests table.list td.best { font-weight: 700; color: var(--ok); }
.variants a.btn { text-decoration: none; justify-content: center; }
/* A quiet link (the calm-UI review, as Edit's .ve-quiet): a secondary way out that is not a button; 32 px tall */
.link-quiet { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; opacity: .78; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.link-quiet:hover, .link-quiet:focus-visible { opacity: 1; }
.link-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* For you (the calm-UI review): Today's post leads, one accent (its Make it); Ready today; the next drafts; the radar */
.fy-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; padding: 20px 28px 20px 20px; margin-bottom: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.fy-prev { position: relative; width: min(300px, calc(min(60vh, 520px) * .5625 + 20px)); padding: 10px; background: #DDD7CC; border-radius: 12px; }
.fy-prev canvas { display: block; width: 100%; border-radius: 6px; background: #CFC8BB; }
.fy-play { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); min-height: 36px; padding: 0 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(20, 19, 17, .62); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fy-play:hover { background: rgba(20, 19, 17, .78); }
.fy-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fy-body { display: grid; gap: 12px; align-content: center; min-width: 0; }
.fy-kicker { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fy-quote { margin: 0; max-width: 32ch; font: 560 clamp(1.4rem, 1rem + 1.2vw, 2.1rem)/1.22 "TBV Newsreader", Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fy-who { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.fy-why { margin: 0; max-width: 62ch; font-size: 15px; color: var(--ink); }
.fy-why strong { font-weight: 650; }
.fy-acts { gap: 10px; margin-top: 4px; }
.fy-acts .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.fy-acts .btn.primary { padding: 0 26px; }
.fy-empty { margin-bottom: 28px; }
.fy-h { margin: 6px 0 12px; }
.fy-row { margin-bottom: 28px; }
.fy-rowhead { justify-content: space-between; align-items: baseline; margin: 0 0 12px; }
.fy-rowhead > .small { margin-right: auto; }
.fy-ready { margin-bottom: 28px; }
.fy-ready-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.fy-rd { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fy-rd-cv { display: block; border-radius: 6px; overflow: hidden; background: #1B1917; aspect-ratio: 9 / 16; }
.fy-rd-cv canvas { display: block; width: 100%; height: 100%; }
.fy-rd-body { display: grid; gap: 4px; min-width: 0; }
.fy-rd-line { margin: 0 0 4px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.fy-radar { margin-bottom: 8px; }
.radar.is-compact .radar-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radar-head .radar-all { margin-left: auto; }
@media (max-width: 760px) {
  .fy-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  .fy-prev { width: min(100%, calc(32vh * .5625 + 20px)); justify-self: center; }
  .fy-quote { font-size: 1.3rem; }
  .fy-body > * { order: 4; } .fy-body > .fy-kicker { order: 0; } .fy-body > .fy-quote { order: 1; } .fy-body > .fy-who { order: 2; } .fy-body > .fy-acts { order: 3; margin-top: 0; } /* Make it on the first screen */
  .fy-head > div > p { display: none; }
  .fy-acts .btn { flex: 1 1 auto; justify-content: center; }
  .fy-ready-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .fy-ready-list > .fy-rd { scroll-snap-align: start; }
  .radar.is-compact .radar-row { grid-template-columns: none; } /* the phone's sideways row (mobile.css) */
  .view-head .row .link-quiet { margin-left: 4px; }
}
/* Make (the calm-UI review): Why this and three chips, four rows (Format, Quote, Look, Background), one closed Fine-tune */
.mk-why { display: grid; gap: 8px; padding: 0 2px 2px; }
.mk-why-t { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-row { padding: 12px 16px; }
.mk-row .section-label { margin: 0; }
.mk-line { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.mk-links { gap: 2px 14px; }
.mk-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-brand { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.mk-bgrow { grid-template-columns: 64px minmax(0, 1fr); }
.mk-fine > .fold-body { gap: 16px; }
.mk-fine .fold-body > .panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 0; background: none; box-shadow: none; }
@media (max-width: 980px) {
  .make .frame { width: min(100%, 420px, calc((55vh - 20px) * .5625 + 20px)); } /* the preview at most about 55 % of the screen */
  .make .stage > *, .make .stage .scopewrap > * { order: 2; } .make .stage > .frame { order: 0; } .make .stage > .mk-go { order: 1; } /* Make the reel under the preview */
}
@media (max-width: 760px) { .mk-head > div > p { display: none; } }
.mk-tpls .tpl canvas { height: 132px; object-fit: cover; object-position: 50% 42%; } /* the three style thumbs: the words in view, the row kept short */
/* Trending (the calm-UI review): the card first; Swipe or Grid and the filters behind Filter; Add all / Skip all under … */
.tr-tools { gap: 8px; align-items: center; }
.tr-more { position: relative; }
.tr-more-btn { min-width: 40px; justify-content: center; font-size: 18px; letter-spacing: .05em; }
.tr-more-btn[aria-expanded="true"] { background: var(--soft); }
.tr-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; width: min(280px, calc(100vw - 32px)); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 19, 17, .14); }
.tr-menu-item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.tr-menu-item:hover { background: var(--soft); }
.tr-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-menu > .tiny { padding: 4px 10px 6px; }
.tr-filters { margin: -6px 0 16px; gap: 10px; }
@media (max-width: 760px) { .tr-tools { width: 100%; } .tr-tools .tr-more { margin-left: auto; } } /* the … at the right edge, its menu on screen */