/* Hoof Trimmer Influencer Simulator: a dark barn-at-dawn interface with a creator-studio layer on top; one look, no light theme. */
:root {
  --bg: #121615; --panel: rgba(24, 30, 29, .92); --line: rgba(255, 255, 255, .1);
  --ink: #ece6da; --rec: #ff3b3b; --muted: #9aa6a1; --wrap: #e95b93; --glue: #3cbcb3; --warn: #f2c14e; --bad: #ff7a5a; --ok: #7fd39a;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--display); font-size: 15px; line-height: 1.45; overflow: hidden }
button { font: inherit; color: inherit; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer }
button:hover { background: rgba(255, 255, 255, .12) }
button:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px }
button.primary { background: var(--wrap); border-color: transparent; color: #1a0d13; font-weight: 750 }
button.primary:hover { filter: brightness(1.08) }
button.ghost { background: none }
.kbd { font-family: var(--mono); font-size: .8em; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; opacity: .8 }
.k, .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.muted { color: var(--muted) } .small { font-size: 13px } .mono { font-family: var(--mono) }
.quote { font-style: italic }
#app { height: 100% }
.screen { height: 100%; width: 100% }
[hidden] { display: none !important }


/* ===== in-chute screen (UI agent B restyles it in play.css; kept here so it keeps working meanwhile) ===== */
/* play */
#screen-play { display: grid; grid-template-columns: 260px minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 10px; position: relative }
.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px }
.panel .name { font-size: 24px; font-weight: 850; font-stretch: 70%; line-height: 1.05 }
#checklist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px }
#checklist li { padding-left: 22px; position: relative }
#checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 3px }
#checklist li.ok { color: var(--muted); text-decoration: line-through }
#checklist li.ok::before { background: var(--ok); border-color: var(--ok) }
.help { font-size: 13px; color: var(--muted) }
.help b { color: var(--ink); display: block }
.cow .cowhead { width: 110px; height: 72px; justify-self: center }
#c-ears, #c-ears2 { transition: transform .4s }
.row { display: flex; justify-content: space-between; align-items: baseline }
.bar { height: 7px; background: rgba(255, 255, 255, .12); border-radius: 4px; overflow: hidden }
.bar i { display: block; height: 100%; width: 0; transition: width .3s, background .3s }
.keys { font-size: 13px; gap: 6px }
.btns { gap: 8px }
.btns button { text-align: left }
#btn-heat.on { background: rgba(60, 188, 179, .25); border-color: var(--glue) }
#stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0 }
#canvases { position: relative }
#canvases canvas { position: absolute; inset: 0; display: block; border-radius: 8px }
#ov { cursor: none; touch-action: none }
#toolbar { grid-column: 1/-1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding-bottom: 4px }
.tool { width: 64px; height: 62px; display: grid; place-items: center; position: relative; padding: 4px; border-radius: 8px; background: var(--panel) }
.tool svg { width: 26px; height: 26px; margin-top: -8px }
.tool em { position: absolute; top: 3px; left: 6px; font-style: normal; font-family: var(--mono); font-size: 10px; opacity: .6 }
.tool span { position: absolute; bottom: 4px; font-size: 11px; opacity: .8 }
.tool.on { border-color: var(--warn); background: rgba(242, 193, 78, .16); box-shadow: 0 0 0 2px rgba(242, 193, 78, .3) }
#hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--warn); color: #1b1b14; font-weight: 650; padding: 6px 12px; border-radius: 6px; max-width: min(92%, 680px); text-align: center; font-size: 14px; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35) }
#hint:empty { display: none }
#sub { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .66); padding: 7px 14px; border-radius: 6px; font-size: 18px; font-weight: 600; max-width: min(90%, 720px); text-align: center; opacity: 0; transition: opacity .4s; pointer-events: none }
#sub.on { opacity: 1 }
#readout { position: absolute; background: rgba(14, 18, 17, .9); border: 1px solid var(--line); padding: 8px 10px; border-radius: 6px; font-size: 13px; max-width: 220px; pointer-events: none }
#readout b { font-size: 18px; font-stretch: 75% }
#readout .good { color: var(--ok) } #readout .warn { color: var(--warn) } #readout .bad { color: var(--bad) }
#toasts { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; pointer-events: none; justify-items: center }
.toast { background: rgba(14, 18, 17, .92); border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; font-size: 14px; transition: opacity .5s }
.toast.warn { border-color: var(--warn) }
.toast.gone { opacity: 0 }
#found { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(14, 18, 17, .88); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; transition: opacity .5s, transform .5s; pointer-events: none }
#found.out { opacity: 0; transform: translate(-50%, -60%) }
#found canvas { width: 300px; height: 200px; display: block }
#found-text { font-size: 20px; font-weight: 750; font-stretch: 80% }

/* modals */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 10; padding: 16px }
.card { background: #1b2120; border: 1px solid var(--line); border-radius: 10px; padding: 20px; width: min(440px, 100%); display: grid; gap: 14px; max-height: 90vh; overflow: auto }
.card.wide { width: min(720px, 100%) }
.card h3 { margin: 0; font-size: 26px; font-stretch: 75% }
.card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px }
.card li.ok { color: var(--ok); list-style: none; margin-left: -18px }
.row-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px }
.cases button { text-align: left; display: grid; gap: 4px; padding: 12px }
.cases button span { color: var(--muted); font-size: 13px }
.how ol { margin: 0; padding-left: 20px; display: grid; gap: 8px }

/* camera in the chute */
#rec { position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; background: rgba(0, 0, 0, .6); padding: 4px 10px; border-radius: 4px; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 2 }
#rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2) infinite }
#rec span { color: var(--muted); font-weight: 400 }
@keyframes blink { 50% { opacity: .2 } }
.clips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px }
.clipchip { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05) }
.clipchip.said { border-color: var(--glue); color: #bff0ea }
.clipchip.bad { border-color: var(--bad); color: var(--bad) }
.cam-key { color: #ffb4b4 }
.toast.clip { display: flex; align-items: center; gap: 8px; border-color: rgba(255, 59, 59, .5) }
.toast.clip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec) }

@media (max-width: 1000px) {
  body { overflow: auto }
  #screen-play { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 70vh) auto auto; height: auto }
  .side.left { order: 0 } #stage { order: 1 } #toolbar { order: 2 } .side.right { order: 3 }
}

/* ================= UI agent A: title, hub, brief, result, post, summary, overlays ================= */
/* Scale: every screen of mine sets its own font-size from the viewport and uses em, so 1280x720 and 1920x1080 are the same layout. */
#screen-title, #screen-hub, #screen-brief, #screen-result, #screen-post, #screen-summary, .ovl, #gtoast {
  font-size: clamp(10.5px, min(1.1vw, 1.95vh), 22px);
}
:root {
  --pink: #e95b93; --pink-d: #a2305f; --amber: #f2c14e; --amber-d: #9a6f12; --cream: #f6ecdc;
  --cab: #17110f; --glass: rgba(18, 13, 12, .74);
  --clipt-bg: #fff8f1; --clipt-ink: #2b1e24; --clipt-mut: #8a7580; --clipt-line: #f0e1d6;
  --studio: #17131a; --studio-2: #221c27; --studio-line: #3a3340;
  --ease-pop: cubic-bezier(.2, 1.45, .4, 1);
}
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-thumb { background: rgba(140, 120, 120, .45); border-radius: 4px }
::-webkit-scrollbar-track { background: transparent }
button:not(.btn):hover { background: rgba(255, 255, 255, .12) }

/* ---------- chunky buttons ---------- */
.btn { font: inherit; font-weight: 700; color: var(--cream); border: 0; border-radius: .9em; padding: .7em 1.25em; cursor: pointer; position: relative;
  background: linear-gradient(#41332e, #2d231f);
  box-shadow: inset 0 .09em 0 rgba(255, 255, 255, .16), 0 .3em 0 #0f0a09, 0 .55em .9em rgba(0, 0, 0, .4);
  transition: transform .08s, box-shadow .08s, filter .12s }
.btn:hover { filter: brightness(1.14); transform: translateY(-.07em); background: linear-gradient(#41332e, #2d231f) }
.btn:active { transform: translateY(.26em); filter: brightness(.96); box-shadow: inset 0 .09em 0 rgba(255, 255, 255, .12), 0 .04em 0 #0f0a09, 0 .1em .3em rgba(0, 0, 0, .4) }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.5) }
.btn.primary { color: #2a0c1a; background: linear-gradient(#f478a9, #e95b93); box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .4), 0 .3em 0 var(--pink-d), 0 .6em 1.1em rgba(233, 91, 147, .3) }
.btn.primary:hover { background: linear-gradient(#f478a9, #e95b93) }
.btn.primary:active { box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .3), 0 .04em 0 var(--pink-d), 0 .1em .4em rgba(233, 91, 147, .3) }
.btn.danger { color: #ffd9d0; background: linear-gradient(#7a2b1f, #5f1f16); box-shadow: inset 0 .09em 0 rgba(255, 255, 255, .14), 0 .3em 0 #2d0e09 }
.btn.ghost { background: none; box-shadow: none; color: var(--muted); font-weight: 600 }
.btn.ghost:hover { color: var(--cream); background: rgba(255, 255, 255, .06); transform: none }
.btn.small { padding: .4em .9em; font-size: .85em; border-radius: .7em; box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .14), 0 .2em 0 #0f0a09 }
.btn.big { font-size: 1.3em }
.btn.huge { font-size: 1.7em; padding: .75em 1.1em }
.btn:focus-visible { outline: .18em solid var(--amber); outline-offset: .2em }
.linkbtn { background: none !important; border: 0; padding: 0; font-size: .8em; color: var(--pink); cursor: pointer; text-decoration: underline; font-weight: 600 }
@keyframes bump { 0% { transform: scale(1) } 35% { transform: scale(1.3); color: var(--amber) } 100% { transform: scale(1) } }
.bump { animation: bump .45s var(--ease-pop); display: inline-block }
@keyframes kenburns { from { transform: scale(1.03) translate(0, 0) } to { transform: scale(1.13) translate(-2%, -1.4%) } }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(1.5em) } }
@keyframes rise { from { opacity: 0; transform: translateY(1.2em) } }

/* ---------- screen wipe ---------- */
#wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: none; background: linear-gradient(100deg, var(--pink) 0 90%, #1a0d13 90% 100%); }
#wipe.go { display: block; animation: wipe .34s cubic-bezier(.6, 0, .9, .5) forwards }
@keyframes wipe { from { transform: translateX(-4%); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) } to { transform: translateX(112%); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%) } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none }

/* ---------- toasts (global) ---------- */
#gtoast { position: fixed; top: 4.6em; left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: .5em; justify-items: center; pointer-events: none }
.gt { background: var(--clipt-bg); color: var(--clipt-ink); padding: .65em 1.2em; border-radius: 2em; font-weight: 700; box-shadow: 0 .4em 0 rgba(0, 0, 0, .25), 0 1em 2em rgba(0, 0, 0, .35); animation: pop .4s var(--ease-pop); transition: opacity .4s, transform .4s; max-width: 40em; text-align: center }
.gt.good { background: #d7f5e0 } .gt.bad { background: #ffd9d0 }
.gt.gone { opacity: 0; transform: translateY(-.8em) }

/* ================= TITLE ================= */
#screen-title { position: relative; overflow: hidden; background: #0d0a09 }
.kb { position: absolute; inset: -3%; overflow: hidden }
.kb img { width: 100%; height: 100%; object-fit: cover; display: block; animation: kenburns 28s ease-in-out infinite alternate; transform-origin: 70% 55% }
.vig { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 5, .94) 0, rgba(10, 6, 5, .72) 30%, rgba(10, 6, 5, .1) 58%, transparent 70%), radial-gradient(ellipse at 68% 45%, transparent 45%, rgba(0, 0, 0, .55) 100%) }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.title-wrap { position: absolute; left: 5.5%; top: 50%; transform: translateY(-50%); width: min(36em, 46%); display: grid; gap: 1em; justify-items: start }
.logo { margin: 0; display: grid; gap: .12em; justify-items: start; line-height: .85; font-weight: 900; font-stretch: 62%; transform: rotate(-2.2deg); transform-origin: left bottom; animation: logoIn .7s var(--ease-pop) both }
@keyframes logoIn { from { opacity: 0; transform: rotate(-6deg) translateY(2em) scale(.9) } }
.logo .l1 { white-space: nowrap; font-size: 5em; line-height: .82; color: var(--cream); text-transform: uppercase; letter-spacing: -.005em; text-shadow: 0 .04em 0 #cdb895, 0 .08em 0 #8a6a45, 0 .12em 0 #4a301b, 0 .22em .3em rgba(0, 0, 0, .65) }
.logo .l2 { white-space: nowrap; font-size: 3.3em; color: #fff; background: var(--pink); padding: .02em .16em .07em .08em; border-radius: .1em; display: inline-flex; align-items: center; gap: .08em; text-transform: uppercase; box-shadow: 0 .06em 0 var(--pink-d), 0 .14em 0 #5a1a37, 0 .24em .3em rgba(0, 0, 0, .5); transform: rotate(1.4deg) }
.logo .mark { width: .86em; height: .86em; color: #fff; flex: none; filter: drop-shadow(0 .03em 0 rgba(0, 0, 0, .25)) }
.logo .l3 { font-size: 1.3em; font-stretch: 100%; font-weight: 850; letter-spacing: .3em; color: var(--amber); text-transform: uppercase; margin: .35em 0 0 .1em; text-shadow: 0 .08em 0 #5c3d08, 0 .15em .2em rgba(0, 0, 0, .6) }
.tag { margin: 0; font-size: 1.2em; color: var(--cream); font-stretch: 92%; text-shadow: 0 .08em .3em rgba(0, 0, 0, .7); animation: rise .6s .3s both }
.menu { display: grid; gap: .85em; width: min(100%, 21em); animation: rise .6s .45s both }
.menu .btn { text-align: left }
.menu #btn-start { white-space: nowrap; font-size: 1.6em; padding: .55em .8em; display: flex; justify-content: space-between; align-items: baseline; gap: .6em }
.menu #btn-start small { font-size: .5em; opacity: .75; font-weight: 700 }
.menu #btn-practice { font-size: 1.2em; padding: .6em .9em }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85em }
.menu-row .btn { font-size: 1.05em; text-align: center }
.career { position: absolute; top: 1em; right: 1.4em; display: flex; gap: .6em; animation: fade .8s .6s both; z-index: 2 }
.career span { display: grid; gap: .05em; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); border-radius: .9em; padding: .4em 1em .5em; min-width: 6em; box-shadow: 0 .2em 0 rgba(0, 0, 0, .35) }
.career i { font-style: normal; font-size: .74em; color: #b9aca0 }
.career b { font-size: 1.5em; font-weight: 850; font-stretch: 78%; color: var(--cream); font-variant-numeric: tabular-nums }
.credit { position: absolute; left: 5.5%; bottom: 1.2em; margin: 0; max-width: 56%; font-size: .78em; color: #a99d8f; text-shadow: 0 .1em .3em #000 }

/* ================= HUB ================= */
#screen-hub { position: relative; overflow: hidden; background: #0d0a09 }
.cab-bg { position: absolute; inset: -2%; background: url(img/truck-cab.jpg) center/cover; animation: cabsway 16s ease-in-out infinite alternate }
@keyframes cabsway { from { transform: scale(1.02) translateX(0) } to { transform: scale(1.06) translateX(-1%) } }
.cab-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 68% 55%, rgba(10, 8, 14, .1) 0, rgba(10, 8, 14, .7) 78%), linear-gradient(rgba(8, 6, 10, .65), transparent 24%, transparent 70%, rgba(8, 6, 10, .55)) }
.hud { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: .6em; align-items: stretch; padding: .8em 1.3em; z-index: 3 }
.hud-back { align-self: center; display: inline-flex; align-items: center; gap: .3em; margin-right: .4em }
.hud-chip { background: var(--glass); backdrop-filter: blur(8px); border-radius: .9em; padding: .4em .95em .5em; border: 1px solid rgba(255, 255, 255, .09); display: grid; align-content: center; gap: .1em; min-width: 5.5em; box-shadow: 0 .2em 0 rgba(0, 0, 0, .35) }
.hud-chip i { font-style: normal; font-size: .74em; color: #b9aca0 }
.hud-chip b { font-size: 1.55em; font-weight: 850; font-stretch: 72%; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--cream) }
.hud-chip.subs { margin-left: auto; border-color: rgba(233, 91, 147, .5) }
.hud-chip.subs b { color: #ff8fb8 }
.hud-chip.cash b { color: #9ee0b1 }
.hud-chip.hours { min-width: 8.5em }
.ticks { display: grid; grid-template-columns: repeat(12, 1fr); gap: .15em; margin-top: .25em }
.ticks u { height: .5em; border-radius: .15em; background: rgba(255, 255, 255, .14) } .ticks u.on { background: var(--amber) } .ticks u.over { background: var(--bad) }
.meter { height: .5em; border-radius: .3em; background: rgba(255, 255, 255, .14); overflow: hidden; margin-top: .25em }
.meter u { display: block; height: 100%; width: 0; border-radius: .3em; transition: width .7s cubic-bezier(.3, 1, .4, 1), background .3s }
.hud-chip.trust { min-width: 7.5em }

.dash { position: absolute; left: 2.6%; top: 5.8em; bottom: 1.6em; width: min(20em, 27%); display: flex; flex-direction: column; gap: .8em; justify-content: flex-end; z-index: 2 }
.dcard { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .09); border-radius: 1.1em; padding: .8em 1em; display: grid; gap: .45em; box-shadow: 0 .3em 0 rgba(0, 0, 0, .35); animation: rise .5s both }
.dcard:nth-child(2) { animation-delay: .1s } .dcard:nth-child(3) { animation-delay: .2s }
.dcard h4 { margin: 0; font-size: 1.1em; font-weight: 800; display: flex; justify-content: space-between; align-items: baseline; gap: .5em }
.dcard h4 small { font-size: .78em; color: var(--muted); font-weight: 600 }
.dcard p { margin: 0; font-size: .86em; color: #cfc4b8 }
.dcard .warn { color: var(--amber) }
.dcard .meter { height: .7em; margin: 0 }
.dcard .plq { display: flex; gap: .8em; align-items: center }
.dcard .plq img { width: 3.2em; height: 3.2em; object-fit: contain; filter: grayscale(.9) brightness(.7); flex: none }
.dcard .plq.next img { animation: fade 1s both }
.dcard .btn { justify-self: start }

.phone { position: absolute; right: 8%; top: 5.2em; height: calc(100% - 6.6em); aspect-ratio: .575; z-index: 2; background: #0b0a0c; border-radius: 2.5em; padding: .5em;
  box-shadow: 0 0 0 .14em #3b3438, 0 0 0 .3em #17131a, 0 2.4em 4em rgba(0, 0, 0, .65), inset 0 0 .5em #000; transform: rotate(1.3deg); animation: phoneIn .6s var(--ease-pop) both, bob 7s 1s ease-in-out infinite alternate }
@keyframes phoneIn { from { opacity: 0; transform: translateY(5em) rotate(4deg) } }
@keyframes bob { from { transform: rotate(1.3deg) translateY(0) } to { transform: rotate(.9deg) translateY(-.4em) } }
.ph-side { position: absolute; right: -.3em; top: 22%; width: .22em; height: 3.4em; background: #3b3438; border-radius: .1em }
.ph-screen { height: 100%; border-radius: 2em; overflow: hidden; background: var(--clipt-bg); color: var(--clipt-ink); display: flex; flex-direction: column; position: relative; font-size: .98em }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: .6em 1.5em .15em; font-size: .78em; font-weight: 800 }
.ph-island { width: 5.4em; height: 1.35em; background: #0b0a0c; border-radius: 1em }
.ph-bat { width: 1.8em; height: .8em; border: .12em solid currentColor; border-radius: .25em; padding: .1em } .ph-bat i { display: block; height: 100%; width: 70%; background: currentColor; border-radius: .1em }
.app-head { display: flex; align-items: center; gap: .45em; padding: .3em 1em .55em }
.clipt-logo { width: 1.9em; height: 1.9em; color: var(--pink); flex: none }
.clipt-word { font-size: 1.7em; font-weight: 900; font-stretch: 66%; color: var(--pink); letter-spacing: -.01em }
.app-me { margin-left: auto; display: flex; align-items: center; gap: .55em; min-width: 0 }
.app-avatar { width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden; border: .14em solid var(--pink); flex: none } .app-avatar img { width: 100%; height: 100%; object-fit: cover; display: block }
.app-name { display: grid; line-height: 1.15; min-width: 0 } .app-name b { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em }
.ph-pages { flex: 1; min-height: 0; overflow-y: auto; padding: .2em .9em 1em; scrollbar-width: thin }
.ph-page { display: grid; gap: .8em; align-content: start; animation: fade .25s }
.ph-tabs { display: grid; grid-template-columns: repeat(5, 1fr); padding: .35em .5em .8em; background: #fff; border-top: 1px solid var(--clipt-line) }
.ph-tabs button { background: none; border: 0; color: var(--clipt-mut); display: grid; justify-items: center; gap: .1em; font-size: .78em; font-weight: 700; padding: .35em 0 .2em; border-radius: 1em; position: relative; cursor: pointer }
.ph-tabs button:hover { background: #fdeef4 }
.ph-tabs svg { width: 1.9em; height: 1.9em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ph-tabs button.on { color: var(--pink) } .ph-tabs button.on svg { animation: tabpop .35s var(--ease-pop); fill: rgba(233, 91, 147, .14) }
@keyframes tabpop { from { transform: scale(.6) } }
.ph-tabs em { position: absolute; top: .1em; right: 22%; background: var(--pink); color: #fff; font-style: normal; font-size: .85em; min-width: 1.5em; height: 1.5em; border-radius: 1em; display: grid; place-items: center; font-weight: 800 }

.trendbar { background: linear-gradient(120deg, #ffe3ef, #fff0d6); border-radius: 1.1em; padding: .7em .9em; display: grid; gap: .15em; border: 1px solid #f7d3e1 }
.trendbar b { font-size: 1em } .trendbar span { font-size: .85em; color: #6e5560 } .trendbar small { color: var(--clipt-mut); font-size: .8em }
.trendbar .tl { display: flex; justify-content: space-between; gap: .5em; align-items: baseline }
.trendbar .tl em { font-style: normal; color: var(--pink); font-weight: 800; font-size: .85em; white-space: nowrap }
.offers { display: grid; gap: .8em }
.offer { all: unset; box-sizing: border-box; cursor: pointer; display: block; background: #fff; border-radius: 1.2em; overflow: hidden; box-shadow: 0 .15em 0 var(--clipt-line), 0 .5em 1.1em rgba(90, 40, 60, .12); transition: transform .12s, box-shadow .12s; position: relative; animation: rise .45s both }
.offer:nth-child(2) { animation-delay: .06s } .offer:nth-child(3) { animation-delay: .12s } .offer:nth-child(4) { animation-delay: .18s }
.offer:hover { transform: translateY(-.15em) rotate(-.3deg); box-shadow: 0 .15em 0 var(--pink), 0 .8em 1.4em rgba(233, 91, 147, .25) }
.offer:active { transform: translateY(.1em) }
.offer:focus-visible { outline: .2em solid var(--pink) }
.oc-art { height: 6.6em; background-size: cover; background-position: center; position: relative }
.oc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(30, 14, 20, .55)) }
.oc-kind { position: absolute; left: .7em; top: .6em; z-index: 1; background: rgba(255, 248, 241, .94); color: var(--clipt-ink); font-weight: 800; font-size: .76em; padding: .25em .7em; border-radius: 1em }
.oc-tags { position: absolute; right: .6em; top: .6em; z-index: 1; display: flex; gap: .3em; flex-wrap: wrap; justify-content: flex-end }
.oc-tags em { font-style: normal; font-size: .72em; font-weight: 800; padding: .2em .6em; border-radius: 1em; background: var(--pink); color: #fff } .oc-tags em.dk { background: #2b1e24 } .oc-tags em.gd { background: var(--amber); color: #2a2008 }
.oc-farmer { position: absolute; left: .8em; bottom: -1.5em; width: 3.4em; height: 3.4em; border-radius: 50%; object-fit: cover; border: .17em solid #fff; z-index: 2; box-shadow: 0 .2em .5em rgba(0, 0, 0, .3) }
.oc-body { padding: 1.9em .9em .8em; display: grid; gap: .35em }
.oc-body > b { padding-right: 7.5em; font-size: 1.15em; font-weight: 850; font-stretch: 82%; margin-top: -1.6em; margin-left: 3.55em; min-height: 1.4em; display: flex; flex-direction: column; justify-content: center; line-height: 1.1 }
.oc-body > b small { font-size: .68em; font-weight: 700; color: var(--clipt-mut); font-stretch: 100% }
.oc-note { font-size: .86em; color: #5c4a52; margin-top: .5em }
.oc-meta { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .25em }
.oc-meta span { font-size: .78em; font-weight: 700; background: #faf0e8; border-radius: .6em; padding: .25em .6em; color: #5c4a52 }
.oc-meta span.cash { background: #dff5e6; color: #1e6b3a } .oc-meta span.ot { background: #ffe1d8; color: #a43a1c }
.oc-meta .dots { letter-spacing: .1em; color: var(--pink) }
.oc-go { position: absolute; right: .8em; top: 7.2em; background: var(--pink); color: #fff; font-weight: 800; font-size: .8em; padding: .4em .9em; border-radius: 1.2em; box-shadow: 0 .15em 0 var(--pink-d) }
.offer:hover .oc-go { filter: brightness(1.1) }
.offer.nofilm .oc-go { background: #2b1e24; box-shadow: 0 .15em 0 #000 }

.videos { display: grid; gap: .7em }
.vid { display: grid; grid-template-columns: 7.6em 1fr; gap: .7em; align-items: start; background: #fff; border-radius: 1em; padding: .5em; box-shadow: 0 .1em 0 var(--clipt-line); animation: rise .4s both }
.vid img { width: 100%; aspect-ratio: 16/9; border-radius: .7em; display: block; object-fit: cover }
.vid > div { display: grid; gap: .15em; min-width: 0; font-size: .9em } .vid b { line-height: 1.2; font-size: .95em }
.vid .st { color: var(--clipt-mut); font-size: .84em } .vid .st em { font-style: normal; color: var(--pink); font-weight: 800 }
.vid .quote { color: #7a6670; font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.empty { text-align: center; color: var(--clipt-mut); padding: 2.5em 1em; font-size: .92em; display: grid; gap: .6em; justify-items: center }
.empty svg { width: 3.4em; height: 3.4em; color: #e8cdd9 }
.inbox { display: grid; gap: .6em }
.msg { background: #fff; border-radius: 1em; padding: .7em .8em; display: grid; grid-template-columns: 2.4em 1fr; gap: .2em .7em; font-size: .9em; box-shadow: 0 .1em 0 var(--clipt-line); animation: rise .4s both }
.msg .ava { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font-weight: 900; grid-row: span 2 }
.msg .ava.ms { background: var(--amber); color: #2a2008 } .msg .ava.sp { background: #3cbcb3; color: #06302d }
.msg b { font-size: .95em } .msg span { color: #5c4a52; line-height: 1.35 }
.msg-btns { display: flex; gap: .4em; grid-column: 2; margin-top: .3em }
.msg-btns .btn { font-size: .85em }
.pill { font-weight: 800; font-size: .78em; color: var(--clipt-mut); grid-column: 2 } .pill.ok { color: #1e8a4b }
.msg .btn.ghost { color: var(--clipt-mut) } .msg .btn.ghost:hover { color: var(--clipt-ink); background: #f5e9e0 }
.msg .btn:not(.ghost):not(.primary) { color: var(--cream) }

.gear { display: grid; grid-template-columns: 1fr 1fr; gap: .6em }
.gear-item { background: #fff; border-radius: 1.1em; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 .1em 0 var(--clipt-line); position: relative; animation: rise .4s both }
.gear-item .gi-art { background: radial-gradient(circle at 50% 40%, #3a2c24, #14100e); display: grid; place-items: center; height: 6em }
.gear-item .gi-art img, .gear-item .gi-art svg { height: 5.2em; width: 5.2em; object-fit: contain }
.gear-item .gi-body { padding: .55em .65em .7em; display: grid; gap: .25em; align-content: start }
.gear-item b { font-size: .9em; line-height: 1.15 } .gear-item .gi-desc { font-size: .76em; color: #6e5a62; line-height: 1.3 }
.gear-item .btn { justify-self: stretch; font-size: .85em; padding: .45em .6em; margin-top: .2em; text-align: center }
.gear-item.owned .gi-art { filter: saturate(.6) } .gear-item.locked .gi-art { filter: grayscale(1) brightness(.5) }
.gear-item .tagr { position: absolute; top: .5em; right: .5em; font-size: .7em; font-weight: 800; padding: .2em .6em; border-radius: 1em; background: #fff; color: var(--clipt-ink); z-index: 1 }
.gear-item .tagr.sale { background: var(--pink); color: #fff } .gear-item .tagr.own { background: #d7f5e0; color: #1e6b3a }
.gear-item .lock { font-size: .78em; font-weight: 800; color: var(--clipt-mut); text-align: center; padding: .3em 0 }
.gear-item .passive { font-size: .72em; color: #1e8a4b; font-weight: 700 }

.rcard { background: #fff; border-radius: 1.1em; padding: .8em; display: grid; gap: .5em; box-shadow: 0 .1em 0 var(--clipt-line) }
.rcard h5 { margin: 0; font-size: .9em; color: var(--clipt-mut); font-weight: 700 }
.rv-top { display: flex; gap: .7em; align-items: center }
.avatar-r { width: 3.4em; height: 3.4em; border-radius: 50%; background: conic-gradient(from 200deg, #3d4a6e, #1f2740, #5c3d6e, #3d4a6e); color: #fff; display: grid; place-items: center; font-weight: 900; font-stretch: 70%; font-size: 1.4em; border: .12em solid #fff; box-shadow: 0 .15em .4em rgba(0, 0, 0, .3); flex: none; letter-spacing: .02em }
.avatar-r.sm { width: 2.8em; height: 2.8em; font-size: 1em }
.rv-top b { font-size: 1.15em } .rv-top span { color: var(--clipt-mut); font-size: .86em; display: block }
.vsbar { display: grid; grid-template-columns: auto 1fr auto; gap: .5em; align-items: center; font-size: .82em; font-weight: 800 }
.vsbar .track { height: 1em; background: #f1e3e8; border-radius: 1em; position: relative; overflow: hidden }
.vsbar .you { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--pink), #ff8fb8); border-radius: 1em; transition: width .8s cubic-bezier(.3, 1, .4, 1) }
.vsbar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: .15em; background: #2b1e24; opacity: .3 }
.rcard p { margin: 0; font-size: .86em; color: #5c4a52 }
.farmrow { display: grid; grid-template-columns: 2.4em 1fr; gap: .1em .6em; align-items: center; font-size: .86em }
.farmrow img { width: 2.4em; height: 2.4em; border-radius: 50%; object-fit: cover; grid-row: span 2 }
.farmrow .meter { background: #f1e3e8; margin: 0; height: .45em }
.farmrow b { display: flex; justify-content: space-between; gap: .5em } .farmrow b small { color: var(--clipt-mut); font-weight: 700 }

/* ================= BRIEF ================= */
#screen-brief { position: relative; overflow: hidden; background: #0d0a09 }
.farm-bg { position: absolute; inset: -3%; background-size: cover; background-position: center; animation: kenburns 32s ease-in-out infinite alternate }
.farm-shade { position: absolute; inset: 0; background: linear-gradient(rgba(10, 6, 5, .5), transparent 25%, transparent 42%, rgba(10, 6, 5, .88) 88%) }
.b-top { position: absolute; top: 1em; left: 1.4em; right: 1.4em; display: flex; gap: .6em; z-index: 2 }
.b-chip { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); padding: .4em 1em; border-radius: 2em; font-weight: 700; font-size: .95em; box-shadow: 0 .18em 0 rgba(0, 0, 0, .35) }
.b-chip.hrs { margin-left: auto; color: var(--amber) } .b-chip:empty { display: none }
.cow-card { position: absolute; right: 7%; top: 5.2em; width: min(21em, 30%); background: var(--clipt-bg); color: var(--clipt-ink); border-radius: 1.3em; overflow: hidden; transform: rotate(2.2deg); box-shadow: 0 .4em 0 #d9c4b6, 0 1.6em 3em rgba(0, 0, 0, .55); animation: cardflip .7s .15s var(--ease-pop) both }
@keyframes cardflip { from { opacity: 0; transform: rotate(10deg) translateY(4em) scale(.9) } }
.cc-photo { position: relative; aspect-ratio: 4/3; background: #222 } .cc-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.cc-tag { position: absolute; top: .8em; right: -.2em; background: var(--amber); color: #2a2008; font-weight: 900; font-size: 1.05em; padding: .3em .8em .3em 1.5em; border-radius: .4em 0 0 .4em; box-shadow: 0 .2em .5em rgba(0, 0, 0, .35); display: flex; align-items: center }
.cc-tag i { position: absolute; left: .45em; width: .6em; height: .6em; border-radius: 50%; background: #9a6f12; box-shadow: inset 0 .08em .1em rgba(0, 0, 0, .5) }
.cc-body { padding: .8em 1em 1em; display: grid; gap: .45em }
.cc-body h2 { margin: 0; font-size: 2.1em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.cc-meta { color: var(--clipt-mut); font-size: .9em; font-weight: 600 }
.cc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: .3em }
.cc-stats > div { background: #faf0e8; border-radius: .8em; padding: .5em .7em; display: grid; gap: .1em }
.cc-stats i { font-style: normal; font-size: .78em; color: var(--clipt-mut); font-weight: 700 } .cc-stats b { font-size: 1.15em; font-weight: 850 } .cc-stats small { color: var(--clipt-mut); font-weight: 700 }
.pips { display: flex; gap: .25em; margin: .15em 0 } .pips u { width: 1.2em; height: .75em; border-radius: .25em; background: #e6d6cc } .pips u.on { background: var(--c, var(--pink)) }
.cow-card .case { color: #8a5a10; margin: 0; font-size: .86em; font-weight: 600 } .cow-card .case:empty { display: none }
.vn { position: absolute; left: 3%; right: 3%; bottom: 1.5em; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 1.1em; z-index: 2 }
.vn-portrait { width: 10.5em; height: 10.5em; border-radius: 1.4em; overflow: hidden; border: .22em solid var(--cream); box-shadow: 0 .35em 0 rgba(0, 0, 0, .4), 0 1em 2em rgba(0, 0, 0, .5); position: relative; transform: translateY(-.7em) rotate(-2deg); animation: rise .6s .2s both; background: #3a2a1c }
.vn-portrait img { width: 100%; height: 100%; object-fit: cover; display: block }
.vn-rel { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(20, 14, 12, .8); color: var(--cream); font-size: .78em; font-weight: 800; text-align: center; padding: .3em }
.vn-box { background: rgba(20, 14, 12, .9); border: .14em solid rgba(246, 236, 220, .5); border-radius: 1.2em; padding: 1.5em 1.8em 1em; min-height: 9em; position: relative; box-shadow: 0 1em 2.5em rgba(0, 0, 0, .5); animation: rise .5s .1s both; cursor: pointer }
.vn-name { position: absolute; top: -1.05em; left: 1.4em; background: var(--pink); color: #2a0c1a; font-weight: 850; padding: .25em 1em; border-radius: .6em; font-size: 1em; box-shadow: 0 .18em 0 var(--pink-d) }
.vn-text { margin: 0 0 .5em; font-size: 1.5em; line-height: 1.32; font-style: italic; min-height: 2.65em; color: #fffaf0; font-stretch: 94% }
.vn-text.typing::after { content: "|"; opacity: .6; animation: blink 1s steps(2) infinite }
.vn-sub { margin: 0; font-size: .9em; color: #bfb1a3; min-height: 1.3em }
.vn-sub b { color: var(--amber) }
.vn-next { position: absolute; right: 1.2em; bottom: .8em; width: 0; height: 0; border: .55em solid transparent; border-top: .8em solid var(--pink); opacity: 0 }
.vn-box.done .vn-next { opacity: 1; animation: nudge 1s ease-in-out infinite }
@keyframes nudge { 50% { transform: translateY(.35em) } }
#b-go { align-self: center; animation: rise .5s .5s both }

/* ================= RESULT ================= */
#screen-result { position: relative; display: grid; place-items: center; overflow: hidden }
.chute-bg { position: absolute; inset: -3%; background: url(img/barn-chute.jpg) center/cover; filter: brightness(.36) blur(4px) saturate(.85) }
.verdict-card { position: relative; width: min(76em, 95%); max-height: 95%; background: linear-gradient(#2a201c, #1b1411); border-radius: 1.6em; border: .12em solid rgba(246, 236, 220, .2); box-shadow: 0 .5em 0 #0b0706, 0 2.5em 5em rgba(0, 0, 0, .65); padding: 1.1em 1.6em 1.4em; display: grid; gap: .9em; animation: cardIn .5s var(--ease-pop) both }
@keyframes cardIn { from { opacity: 0; transform: translateY(3em) scale(.94) } }
.vc-head { display: flex; justify-content: space-between; align-items: center; gap: 1em }
.vc-title { color: #c8bcae; font-weight: 600; font-size: 1.05em }
.stamp { font-size: 2.7em; font-weight: 900; font-stretch: 62%; text-transform: uppercase; color: var(--ok); border: .07em solid currentColor; border-radius: .2em; padding: .02em .28em; transform: rotate(-4deg); animation: stampIn .5s .55s both cubic-bezier(.3, 1.9, .5, 1); line-height: 1.1; white-space: nowrap; box-shadow: inset 0 0 0 .04em currentColor; text-shadow: 0 .04em 0 rgba(0, 0, 0, .35) }
.stamp.mid { color: var(--amber) } .stamp.bad { color: var(--bad) }
@keyframes stampIn { from { opacity: 0; transform: rotate(-12deg) scale(2.6) } }
.vc-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.6em; align-items: start }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: .9em }
.ba figure { margin: 0; background: var(--cream); padding: .45em .45em .3em; border-radius: .5em; box-shadow: 0 .4em 1em rgba(0, 0, 0, .5); display: grid; gap: .25em; transform: rotate(-1.6deg); animation: rise .5s .15s both }
.ba figure:nth-child(2) { transform: rotate(1.4deg); animation-delay: .3s }
.ba canvas { width: 100%; height: auto; display: block; border-radius: .25em }
.ba figcaption, .walk figcaption { color: #4a3b32; font-weight: 800; text-align: center; font-size: .9em }
.walk { margin: .9em 0 0; display: grid; gap: .25em; animation: rise .5s .45s both }
.walk canvas { width: 100%; height: auto; display: block; border-radius: .8em; background: linear-gradient(#4a4540, #34312c); border: .1em solid rgba(246, 236, 220, .15) }
.walk figcaption { color: #cfc2b4; text-align: left; font-size: .95em }
.vc-right { display: grid; gap: .75em; align-content: start }
.score-top { display: flex; justify-content: space-between; align-items: center }
#r-stars { font-size: 2.6em; letter-spacing: .05em; color: var(--amber); text-shadow: 0 .06em 0 #6a470b; white-space: nowrap }
#r-stars span { display: inline-block; animation: starIn .45s calc(var(--i) * .13s + .5s) both var(--ease-pop) } #r-stars span.off { color: #4b3f38; text-shadow: none }
@keyframes starIn { from { opacity: 0; transform: scale(0) rotate(-90deg) } }
.total { text-align: right } .total b { font-size: 3.6em; font-weight: 900; font-stretch: 62%; line-height: .9; font-variant-numeric: tabular-nums } .total small { display: block; color: #b9ada0; font-weight: 600 }
#r-rows { display: grid; gap: .5em }
#r-rows .row { display: grid; grid-template-columns: 7.5em 1fr 2.4em; gap: .7em; align-items: center; animation: rowIn .4s calc(var(--i) * .12s + .4s) both }
@keyframes rowIn { from { opacity: 0; transform: translateX(1.2em) } }
#r-rows .bar { height: .8em; border-radius: .5em; background: rgba(255, 255, 255, .1) }
#r-rows .bar i { transform-origin: left; animation: fill .8s calc(var(--i) * .12s + .5s) both cubic-bezier(.3, 1, .4, 1); border-radius: .5em }
@keyframes fill { from { transform: scaleX(0) } }
#r-rows b { font-family: var(--mono); text-align: right; font-size: .95em }
#r-notes { margin: 0; padding-left: 1.2em; display: grid; gap: .3em; color: #cfc3b6; font-size: .9em; animation: fade .5s 1.2s both }
.pay { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-top: .1em dashed rgba(246, 236, 220, .25); padding-top: .6em; font-size: .88em; color: #cfc3b6; animation: fade .5s 1.3s both }
.pay b { font-size: 2.1em; font-weight: 900; font-stretch: 70%; color: #9ee0b1; text-shadow: 0 .06em 0 #0f3a1d }
.vc-btns { display: flex; gap: .8em; justify-content: flex-end; align-items: center; margin-top: .2em; position: sticky; bottom: -1.4em; padding: .6em 0 .2em; background: linear-gradient(rgba(27, 20, 17, 0), #1b1411 35%) }
.verdict-card { overflow-y: auto; overscroll-behavior: contain }

/* ================= POST (Clipt Studio) ================= */
#screen-post { position: relative; display: grid; place-items: center; overflow: hidden }
.studio-bg { position: absolute; inset: -4%; background: url(img/truck-cab.jpg) center/cover; filter: blur(16px) brightness(.32) saturate(.8) }
.studio { position: relative; width: min(88em, 96%); height: min(52em, 95%); background: var(--studio); border-radius: 1.2em; border: .1em solid var(--studio-line); box-shadow: 0 .5em 0 #0b080d, 0 2.5em 5em rgba(0, 0, 0, .6); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; animation: cardIn .45s var(--ease-pop) both }
.st-top { display: flex; align-items: center; gap: 1em; padding: .65em 1em; background: var(--studio-2); border-bottom: .1em solid var(--studio-line) }
.st-top::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: #ff5f57; box-shadow: 1.2em 0 #febc2e, 2.4em 0 #28c840; margin-right: 2.6em }
.st-logo { display: flex; align-items: center; gap: .4em; color: var(--pink); font-weight: 900; font-stretch: 66%; font-size: 1.35em } .st-logo svg { width: 1.4em; height: 1.4em }
.st-proj { color: #b6a9bd; font-weight: 600; font-size: .95em; margin-left: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.st-vs { margin-left: auto; background: linear-gradient(90deg, #5b2bbf, #e0483b); color: #fff; font-weight: 850; padding: .3em 1em; border-radius: 2em; font-size: .88em }
.st-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 1em; padding: 1em; min-height: 0 }
.st-left { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .8em; min-height: 0 }
/* the preview gives way so every clip on the timeline stays in view */
.monitor { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .5em; min-width: 0; min-height: 0 }
.monitor .bezel { min-height: 0; max-height: 100%; max-width: 100%; aspect-ratio: 16/9; justify-self: center; align-self: start }
.monitor .bezel canvas { height: 100% }
.bezel { position: relative; background: #000; border-radius: .8em; border: .35em solid #0a080c; box-shadow: 0 0 0 .1em var(--studio-line), 0 .8em 1.5em rgba(0, 0, 0, .5); overflow: hidden }
.bezel canvas { width: 100%; height: auto; aspect-ratio: 16/9; display: block }
.mon-live { position: absolute; right: .6em; top: .5em; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75em; font-weight: 700; padding: .2em .7em; border-radius: 1em }
.vtitle { display: grid; gap: .1em } .yt-title { font-size: 1.15em; font-weight: 750; line-height: 1.25; color: #f6eefa } .yt-meta { color: #a79bb0; font-size: .85em }
.timeline { align-self: start; background: #100d13; border-radius: .9em; padding: .55em .7em .7em; border: .1em solid var(--studio-line); min-height: 0 }
.tl-label { font-weight: 800; font-size: .85em; margin-bottom: .3em } .tl-label span { color: #9d90a6; font-weight: 500; margin-left: .5em }
.tl-ruler { height: .6em; background: repeating-linear-gradient(90deg, #4a4252 0 .1em, transparent .1em 1.4em); opacity: .7; margin-bottom: .35em; border-bottom: .1em solid #4a4252 }
/* every clip in view: rows wrap instead of a strip that hides its tail behind a scroll nobody sees */
.pclips { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2em, 1fr)); gap: .85em .45em; padding: .85em 0 .25em }
.pclip { min-width: 0; padding: .3em; display: grid; gap: .25em; font-size: .78em; text-align: left; border-radius: .6em; background: #1c1721; border: .12em solid #2d2634; color: #e8dcee; cursor: pointer; position: relative }
.pclip:hover { background: #2a2231 } .pclip canvas { width: 100%; height: auto; border-radius: .35em; display: block } .pclip span { font-weight: 700; line-height: 1.15; min-height: 2.3em }
.pclip.on { border-color: var(--pink); background: rgba(233, 91, 147, .16); box-shadow: 0 0 0 .1em var(--pink) }
.pclip.on::after { content: "Thumbnail"; position: absolute; top: -.7em; left: .4em; background: var(--pink); color: #2a0c1a; font-weight: 850; font-size: .85em; padding: .1em .6em; border-radius: 1em }
.st-insp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1em; min-height: 0; align-content: start }
.insp-col { display: grid; gap: .9em; align-content: start; min-width: 0 }
.insp-sec h4 { margin: 0 0 .4em; font-size: .95em; font-weight: 800; color: #cbbfd3 }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .45em } .seg.three { grid-template-columns: repeat(3, 1fr) }
.seg button, .ptitles button { background: #221c27; border: .12em solid #332b3a; border-radius: .8em; padding: .55em .7em; color: #efe6f4; text-align: left; display: grid; gap: .15em; cursor: pointer; font-size: 1em; box-shadow: 0 .18em 0 #0d0a10 }
.seg button:hover, .ptitles button:hover, .toggles button:hover { background: #2d2535 }
.seg button:active, .ptitles button:active { transform: translateY(.14em); box-shadow: 0 .04em 0 #0d0a10 }
.seg small { color: #a99dB3; font-size: .82em; line-height: 1.25 }
.seg button.on, .ptitles button.on { border-color: var(--pink); background: rgba(233, 91, 147, .17); box-shadow: 0 0 0 .1em var(--pink), 0 .18em 0 #0d0a10 }
.toggles { display: grid; gap: .4em }
.toggles button { display: grid; grid-template-columns: 2.6em 1fr; gap: .1em .7em; align-items: center; text-align: left; background: #221c27; border: .12em solid #332b3a; border-radius: .8em; padding: .5em .7em; color: #efe6f4; cursor: pointer; box-shadow: 0 .16em 0 #0d0a10 }
.toggles .sw { grid-row: span 2; width: 2.6em; height: 1.45em; border-radius: 1em; background: #4a4252; position: relative; transition: background .15s }
.toggles .sw::after { content: ""; position: absolute; left: .18em; top: .18em; width: 1.09em; height: 1.09em; border-radius: 50%; background: #fff; transition: transform .18s var(--ease-pop) }
.toggles button.on .sw { background: var(--pink) } .toggles button.on .sw::after { transform: translateX(1.15em) }
.toggles button.on { border-color: rgba(233, 91, 147, .6) }
.toggles b { font-size: .95em; display: flex; justify-content: space-between; gap: .5em } .toggles b em { font-style: normal; color: var(--amber); font-family: var(--mono); font-size: .85em; font-weight: 600 }
.toggles small { color: #a99db3; font-size: .8em; line-height: 1.25 }
.toggles button:disabled { opacity: .4; cursor: not-allowed }
.hours-line { margin-top: .5em; font-size: .86em; color: var(--amber); background: rgba(242, 193, 78, .09); border-radius: .7em; padding: .45em .7em; line-height: 1.3 } .hours-line.over { color: #ff9c82; background: rgba(255, 122, 90, .1) }
.ptitles { display: grid; gap: .4em }
.ptitles button { font-weight: 650; line-height: 1.25 } .tone { font-size: .76em; font-weight: 700 }
.tone-honest { color: #7fd39a } .tone-story { color: #5fd6cc } .tone-clickbait { color: #ff9c82 }
.insp-sec.notes { display: grid; gap: .45em }
.chip.trend { background: rgba(60, 188, 179, .14); color: #8be5dc; font-weight: 700; font-size: .85em; padding: .4em .8em; border-radius: .8em; line-height: 1.3 }
.small-note { font-size: .84em; color: #a99db3; line-height: 1.35 } .small-note:empty { display: none }
.st-foot { display: flex; justify-content: flex-end; align-items: center; gap: .9em; padding: .7em 1em .9em; background: var(--studio-2); border-top: .1em solid var(--studio-line) }
.studio .btn.ghost { color: #a99db3 }

.post-perf { position: relative; width: min(88em, 96%); height: min(50em, 95%); display: grid; grid-template-columns: 17em minmax(0, 1fr) minmax(0, 1.08fr); gap: 1.4em; align-items: stretch }
.pp-phone { background: #0b0a0c; border-radius: 2.4em; padding: .5em; box-shadow: 0 0 0 .14em #3b3438, 0 2em 4em rgba(0, 0, 0, .65); animation: phoneIn .55s var(--ease-pop) both; transform: rotate(-1deg) }
.pp-screen { height: 100%; border-radius: 1.9em; overflow: hidden; background: radial-gradient(circle at 30% 20%, #6d3a63, #2a1830 55%, #120c18); color: #fff; display: flex; flex-direction: column; font-size: .95em }
.pp-lock { text-align: center; padding: .6em 0 .9em } .pp-lock b { display: block; font-size: 3.4em; font-weight: 300; font-stretch: 85%; line-height: 1 } .pp-lock span { font-size: .85em; opacity: .8 }
.notifs { display: grid; gap: .5em; padding: 0 .6em .8em; align-content: start; overflow: hidden; flex: 1 }
.notif { display: grid; grid-template-columns: 2.2em 1fr; gap: .1em .6em; align-items: center; background: rgba(255, 252, 248, .93); color: var(--clipt-ink); border-radius: 1em; padding: .55em .7em; animation: notifIn .5s var(--ease-pop) both; box-shadow: 0 .3em .8em rgba(0, 0, 0, .3) }
@keyframes notifIn { from { opacity: 0; transform: translateY(-2.5em) scale(.9) } }
.notif .ic { width: 2.2em; height: 2.2em; border-radius: .6em; background: var(--pink); color: #fff; display: grid; place-items: center; grid-row: span 2 } .notif .ic svg { width: 1.5em; height: 1.5em }
.notif .ic.gr { background: #34a866 } .notif .ic.am { background: var(--amber); color: #2a2008 } .notif .ic.rd { background: #e0483b } .notif .ic.tl { background: #2f9e97 }
.notif b { font-size: .84em; line-height: 1.15 } .notif span { font-size: .8em; color: #6e5a62; line-height: 1.2 }
.pp-mid { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.3em; padding: 1.2em 1.3em; display: grid; gap: .8em; align-content: start; overflow: auto; box-shadow: 0 .4em 0 rgba(0, 0, 0, .35); animation: rise .5s .1s both }
.pp-when { color: #cdbfb0; font-weight: 700 }
.pp-views { display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; position: relative } .pp-views b { font-size: 5.2em; font-weight: 900; font-stretch: 62%; line-height: .9; font-variant-numeric: tabular-nums; color: var(--cream) } .pp-views span { font-size: 1.3em; font-weight: 700; color: #cdbfb0 }
.viral-stamp { position: absolute; right: 0; top: -.2em; font-size: 2.4em; font-weight: 900; font-stretch: 62%; text-transform: uppercase; color: #ff4d3d; border: .08em solid currentColor; border-radius: .2em; padding: 0 .25em; transform: rotate(8deg); animation: stampIn .5s .4s both cubic-bezier(.3, 1.9, .5, 1); background: rgba(255, 77, 61, .12); text-shadow: 0 0 .5em rgba(255, 77, 61, .6) }
.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em }
.pp-grid > div { background: rgba(255, 255, 255, .06); border-radius: .9em; padding: .55em .8em; display: grid; gap: .1em } .pp-grid i { font-style: normal; font-size: .8em; color: #b9aca0 } .pp-grid b { font-size: 1.55em; font-weight: 850; font-stretch: 74%; font-variant-numeric: tabular-nums }
.trustline { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; border-top: .1em solid rgba(255, 255, 255, .12); padding-top: .6em } .trustline b { font-family: var(--mono); font-size: 1em } .trustline .ok { color: #7fd39a } .trustline .bad { color: #ff9c82 }
#pf-notes { margin: 0; padding-left: 1.2em; display: grid; gap: .3em; color: #cfc3b6; font-size: .88em }
.pp-feed { background: var(--clipt-bg); color: var(--clipt-ink); border-radius: 1.3em; padding: 1em 1em .9em; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .6em; box-shadow: 0 .4em 0 #d9c4b6; animation: rise .5s .2s both; min-height: 0 }
.pp-feed h3 { margin: 0; font-size: 1.4em; font-weight: 900; font-stretch: 66%; color: var(--pink) }
.comments { display: grid; gap: .55em; overflow-y: auto; align-content: start; padding-right: .3em }
.cmt { display: grid; grid-template-columns: 2.3em 1fr; gap: .1em .65em; background: #fff; border-radius: 1em; padding: .55em .7em; font-size: .9em; box-shadow: 0 .1em 0 var(--clipt-line); animation: notifIn .45s var(--ease-pop) both }
.cmt .ava { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; grid-row: span 3 }
.cmt .who { display: flex; gap: .5em; align-items: center; flex-wrap: wrap } .cmt .who b { font-size: .88em; color: #5c4a52 }
.cmt .badge { font-size: .7em; font-weight: 850; padding: .1em .6em; border-radius: 1em; background: #d2f1ee; color: #17685f } .cmt .badge.q { background: #e6e0fa; color: #4b3a99 } .cmt .badge.h { background: #ffe1d8; color: #a43a1c } .cmt .badge.pin { background: var(--amber); color: #2a2008 }
.cmt .tx { line-height: 1.3 } .cmt small { color: var(--clipt-mut); font-weight: 700 }
.cmt.vet { box-shadow: 0 0 0 .12em #8fd8d1, 0 .1em 0 var(--clipt-line) }
.cmt.pinned { box-shadow: 0 0 0 .14em var(--amber) }
.cact { display: flex; gap: .35em; flex-wrap: wrap; margin-top: .15em }
.cact button { font: inherit; font-size: .84em; font-weight: 750; padding: .25em .75em; border-radius: 1em; border: .1em solid #ead6cc; background: #fff; color: var(--clipt-ink); cursor: pointer; transition: transform .08s, background .12s }
.cact button:hover:not(:disabled) { background: #fdeef4; border-color: var(--pink); transform: translateY(-.08em) }
.cact button:disabled { opacity: .35; cursor: not-allowed } .cact button.chosen { background: var(--pink); color: #fff; border-color: var(--pink); opacity: 1 }
.cresult { font-size: .88em; font-weight: 650; color: #5c4a52; min-height: 1.2em } .cresult.done { color: #1e6b3a }
.pp-foot { display: flex; justify-content: flex-end }

/* ================= SUMMARY (truck at night) ================= */
#screen-summary { position: relative; overflow: hidden; background: #070a14 }
.night-bg { position: absolute; inset: -2%; background: url(img/truck-cab.jpg) center/cover; filter: brightness(.5) saturate(.55) hue-rotate(175deg) contrast(1.1) }
.night-shade { position: absolute; inset: 0; background:
  radial-gradient(.14em .14em at 12% 8%, #fff, transparent), radial-gradient(.1em .1em at 22% 14%, #cfe, transparent), radial-gradient(.14em .14em at 31% 6%, #fff, transparent), radial-gradient(.1em .1em at 44% 12%, #fff, transparent),
  radial-gradient(.14em .14em at 52% 5%, #cfe, transparent), radial-gradient(.1em .1em at 63% 10%, #fff, transparent), radial-gradient(.14em .14em at 71% 4%, #fff, transparent), radial-gradient(.1em .1em at 38% 3%, #fff, transparent),
  radial-gradient(.5em .5em at 82% 12%, rgba(255, 244, 200, .9), rgba(255, 244, 200, .15) 55%, transparent 70%),
  linear-gradient(rgba(10, 16, 44, .55), rgba(6, 8, 20, .5)) }
.sum-card { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(50em, 62%); max-height: 94%; overflow-y: auto; overscroll-behavior: contain; background: rgba(20, 16, 26, .9); backdrop-filter: blur(10px); border: 1px solid rgba(180, 190, 255, .18); border-radius: 1.5em; padding: 1.2em 1.5em 1.3em; display: grid; gap: .8em; box-shadow: 0 .5em 0 rgba(0, 0, 0, .4), 0 2em 4em rgba(0, 0, 0, .55); animation: cardInS .55s var(--ease-pop) both }
@keyframes cardInS { from { opacity: 0; transform: translateY(-46%) scale(.94) } }
.sum-card h2 { margin: 0; font-size: 2.4em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.burnout { margin-top: .5em; background: rgba(255, 122, 90, .16); color: #ffb09a; border-radius: .8em; padding: .45em .9em; font-weight: 700; font-size: .92em }
.tbl { border-collapse: collapse; width: 100%; font-size: .92em }
.tbl th, .tbl td { text-align: left; padding: .4em .6em; border-bottom: 1px solid rgba(255, 255, 255, .09) }
.tbl th { font-size: .8em; color: #a49bb0; font-weight: 700 } .tbl td:nth-child(3) { color: var(--amber) }
.tbl tbody tr { animation: rowIn .4s calc(var(--i) * .1s + .3s) both }
.num { text-align: right !important; font-variant-numeric: tabular-nums }
.sum-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em }
.sum-stats > div { background: rgba(255, 255, 255, .06); border-radius: .9em; padding: .5em .8em; display: grid; gap: .1em } .sum-stats i { font-style: normal; font-size: .8em; color: #b1a8bd } .sum-stats b { font-size: 1.55em; font-weight: 850; font-stretch: 72%; font-variant-numeric: tabular-nums; line-height: 1.15 }
.sum-stats b.sm { font-size: 1.05em; font-stretch: 85% }
#s-earned { color: #9ee0b1 } #s-subs { color: #ff8fb8 }
.sum-evening { display: grid; gap: .4em; background: rgba(255, 255, 255, .04); border-radius: .9em; padding: .6em .8em }
.sum-evening .energy { display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: center } .sum-evening .energy i { font-style: normal; font-weight: 700; font-size: .9em } .sum-evening .meter { margin: 0; height: .7em }
.sum-evening p { margin: 0; font-size: .86em; color: #cfc6da; line-height: 1.4 }
.sum-say { display: grid; grid-template-columns: 4em 1fr; gap: .9em; align-items: center }
.sum-say img { width: 4em; height: 4em; border-radius: 50%; object-fit: cover; border: .16em solid var(--cream) }
.sum-say p { margin: 0; background: #fff8f1; color: var(--clipt-ink); padding: .65em 1em; border-radius: 1em 1em 1em .2em; font-size: .98em; position: relative }
.sum-foot { display: flex; justify-content: flex-end }

/* ================= OVERLAYS ================= */
.ovl { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1em; background: radial-gradient(ellipse at 50% 40%, rgba(40, 20, 30, .6), rgba(6, 4, 5, .82)); backdrop-filter: blur(4px); animation: fade .2s }
.sheet { background: linear-gradient(#2a201c, #1b1411); border-radius: 1.5em; border: .1em solid rgba(246, 236, 220, .2); padding: 1.5em 1.8em 1.4em; width: min(31em, 94vw); display: grid; gap: .9em; animation: pop .35s var(--ease-pop); box-shadow: 0 .5em 0 #0b0706, 0 2em 4em rgba(0, 0, 0, .6); max-height: 94vh; overflow: auto }
.sheet.wide { width: min(54em, 95vw) }
.sheet h3 { margin: 0; font-size: 2.2em; font-weight: 900; font-stretch: 62%; line-height: 1 }
.sheet-sub { margin: -.4em 0 0; color: #bfb2a4 }
.sheet-foot { display: flex; justify-content: flex-end; gap: .8em }
.set-row { display: grid; grid-template-columns: 1fr 12em; gap: 1em; align-items: center; font-weight: 650 } .set-row input[type=range] { accent-color: var(--pink); width: 100%; height: 1.4em }
.set-row.chk { grid-template-columns: 1fr auto } .set-row input[type=checkbox] { width: 1.5em; height: 1.5em; accent-color: var(--pink) }
.set-danger { border-top: .1em solid rgba(255, 255, 255, .1); padding-top: .9em }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: .7em }
.cases button { text-align: left; display: grid; gap: .25em; padding: .8em 1em; background: linear-gradient(#3a2d28, #2a201c); border: 0; border-radius: 1em; box-shadow: inset 0 .08em 0 rgba(255, 255, 255, .12), 0 .25em 0 #0f0a09; cursor: pointer; transition: transform .08s }
.cases button:hover { background: linear-gradient(#4a3a33, #33261f); transform: translateY(-.08em) } .cases button:active { transform: translateY(.2em); box-shadow: 0 .04em 0 #0f0a09 }
.cases button b { font-size: 1.1em; font-stretch: 85% } .cases button span { color: #b7aa9c; font-size: .86em; line-height: 1.3 }
.how ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: .6em .9em; font-size: .9em }
.how li { counter-increment: step; position: relative; padding: .5em .6em .5em 2.6em; background: rgba(255, 255, 255, .05); border-radius: .9em; line-height: 1.35; color: #d8cdc0 }
.how li::before { content: counter(step); position: absolute; left: .6em; top: .55em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--pink); color: #2a0c1a; font-weight: 900; display: grid; place-items: center; font-size: .95em }
.how li b { color: var(--cream) }

.callphone { width: min(22em, 92vw); height: min(40em, 92vh); background: #0b0a0c; border-radius: 2.4em; padding: .5em; box-shadow: 0 0 0 .14em #3b3438, 0 2.4em 5em rgba(0, 0, 0, .7); animation: pop .45s var(--ease-pop); position: relative; overflow: hidden }
.callphone > div { height: 100%; border-radius: 1.9em; overflow: hidden }
.cp-ring { background: radial-gradient(circle at 50% 30%, #3a2f63, #17122b 60%, #0b0a14); color: #fff; display: grid; place-items: center; align-content: center; gap: .8em; text-align: center }
.cp-ring .avatar-r { width: 6.6em; height: 6.6em; font-size: 2.6em; position: relative }
.cp-ring .avatar-r::before, .cp-ring .avatar-r::after { content: ""; position: absolute; inset: -.12em; border-radius: 50%; border: .06em solid rgba(255, 255, 255, .5); animation: ringpulse 1.8s ease-out infinite } .cp-ring .avatar-r::after { animation-delay: .9s }
@keyframes ringpulse { from { transform: scale(1); opacity: .8 } to { transform: scale(1.8); opacity: 0 } }
.cp-calling { font-size: 1.7em; font-weight: 850; font-stretch: 75% } .cp-sub { color: #b9b2d6; font-size: .95em; margin-top: -.5em }
.cp-ring .btn { margin-top: 1.2em; background: linear-gradient(#4fd27e, #34b862); color: #08301a; box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .4), 0 .3em 0 #1c7a3d; animation: wobble 1.2s ease-in-out infinite }
@keyframes wobble { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-3deg) } 40% { transform: rotate(3deg) } 60% { transform: rotate(0) } }
.cp-chat { background: var(--clipt-bg); color: var(--clipt-ink); display: flex; flex-direction: column; padding: 0 0 .8em }
.cp-chat[hidden] { display: none }
.cp-head { display: flex; gap: .7em; align-items: center; padding: 1.1em 1em .7em; border-bottom: 1px solid var(--clipt-line); background: #fff }
.cp-head b { display: block; font-size: 1em } .cp-head span { font-size: .8em; color: var(--clipt-mut) }
.cp-thread { flex: 1; min-height: 0; overflow-y: auto; padding: .8em .8em; display: grid; gap: .6em; align-content: start }
.bubble { max-width: 90%; padding: .6em .85em; border-radius: 1.1em; font-size: .92em; line-height: 1.35; animation: pop .35s var(--ease-pop) }
.bubble.in { background: #fff; border-bottom-left-radius: .3em; box-shadow: 0 .1em 0 var(--clipt-line); display: grid; gap: .3em } .bubble.in b { color: #3a3a7a }
.bubble.out { background: var(--pink); color: #fff; justify-self: end; border-bottom-right-radius: .3em; font-weight: 650 } .bubble.out:empty { display: none }
.reply-choices { display: grid; gap: .45em; padding: 0 .8em }
.reply-choices button { text-align: left; display: grid; gap: .1em; border: .13em solid var(--pink); background: #fff; color: var(--clipt-ink); border-radius: 1.1em; padding: .5em .8em; cursor: pointer; font-size: .9em; transition: transform .08s, background .12s }
.reply-choices button:hover { background: #fdeef4; transform: translateY(-.08em) } .reply-choices button b { font-size: .98em } .reply-choices button span { color: #6e5a62; font-size: .86em; line-height: 1.25 }
.cp-chat > .btn { margin: .6em .8em 0; align-self: stretch }

.cer { position: relative; width: min(38em, 94vw); display: grid; justify-items: center; gap: .6em; text-align: center; padding: 1.5em 1.5em 1.2em }
.cer-rays { position: absolute; width: 70em; height: 70em; left: 50%; top: 50%; margin: -35em 0 0 -35em; background: repeating-conic-gradient(rgba(242, 193, 78, .22) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 0, transparent 62%); -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); animation: spin 50s linear infinite; pointer-events: none }
@keyframes spin { to { transform: rotate(360deg) } }
.cer > *:not(.cer-rays) { position: relative }
.cer-plaque { width: 13em; height: 13em; display: grid; place-items: center; animation: plaqueIn .9s .1s var(--ease-pop) both; filter: drop-shadow(0 1em 1.5em rgba(0, 0, 0, .6)) }
@keyframes plaqueIn { from { opacity: 0; transform: scale(.2) rotate(-35deg) } }
.cer-plaque img { width: 100%; height: 100%; object-fit: contain }
.cer-plaque.gold img { filter: sepia(1) saturate(3.4) hue-rotate(-14deg) brightness(1.2) contrast(1.05) }
.cer-plaque.bronze img { filter: sepia(1) saturate(2.2) hue-rotate(-32deg) brightness(.82) }
.cer-plaque.badge svg { width: 9em; height: 9em; color: var(--pink); filter: drop-shadow(0 0 1.2em rgba(233, 91, 147, .7)) }
.cer-kind { font-weight: 800; color: var(--amber); font-size: 1.05em }
.cer-num b { font-size: 5em; font-weight: 900; font-stretch: 62%; line-height: .95; font-variant-numeric: tabular-nums; color: var(--cream); text-shadow: 0 .05em 0 #8a6a45, 0 .12em .3em rgba(0, 0, 0, .6) }
.cer h3 { margin: 0; font-size: 1.7em; font-weight: 850; font-stretch: 72%; text-transform: capitalize }
.cer p { margin: 0; max-width: 30em; color: #dccfc0; line-height: 1.4 }
.cer ul { list-style: none; margin: .2em 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; justify-content: center }
.cer li { background: rgba(255, 255, 255, .1); border: .1em solid rgba(246, 236, 220, .25); border-radius: 2em; padding: .3em .9em; font-size: .88em; font-weight: 650; animation: pop .4s var(--ease-pop) both }
.cer li::before { content: "\2713"; color: #7fd39a; margin-right: .4em }

/* ================= small screens: stacks, still a game ================= */
@media (max-width: 1000px) {
  .title-wrap { width: 88%; left: 6% } .logo .l1 { font-size: 4.4em } .logo .l2 { font-size: 3.4em } .logo .l3 { font-size: 1.6em }
  .dash { display: none } .phone { right: 50%; transform: translateX(50%) } @keyframes bob { from { transform: translateX(50%) } to { transform: translateX(50%) translateY(-.3em) } }
  .phone { animation: phoneIn .6s var(--ease-pop) both }
  .hud-chip.views { display: none } .hud { flex-wrap: wrap }
  .cow-card { display: none } .vn { grid-template-columns: auto 1fr } #b-go { grid-column: 1 / -1 }
  .vc-body, .st-main, .st-insp { grid-template-columns: 1fr }
  .sum-card { right: 3%; width: 94% }
  .post-perf { grid-template-columns: 1fr }
  .pp-phone { display: none }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } .kb img, .cab-bg, .farm-bg { transform: none !important } }

/* first hub visit: the side systems wait until the first video is up (main.js hub, .fresh) */
#screen-hub.fresh :is(#h-world, #c-energy, #h-weather, .hud-chip.trust, .ms-chip, .st-pbtn, .hd-hbtn) { display: none }