/* An evening with your agent (js/story.js): three screens with your agent behind them. What you do
   rises to your agent's bar as a dot, and its answer comes back down to the page, which then changes.
   The screen you are on is large, the others wait small beside it, showing what they hold. */
@font-palette-values --pix-ink { font-family: "It Pixel"; override-colors: 0 #0b0b0c, 1 #0b0b0c, 2 #0b0b0c; }
@font-palette-values --pix-paper { font-family: "It Pixel"; override-colors: 0 #ecebe4, 1 #ecebe4, 2 #ecebe4; }

.evening { --ev-green: var(--live); overflow-x: clip; }
.ev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; }
.ev-clock { font: 400 clamp(38px, 4.2vw, 64px)/1 var(--pix); letter-spacing: -.01em; color: var(--ink); font-palette: --pix-ink; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .ev-clock { font-palette: --pix-paper; }
.ev-stage { margin-top: clamp(20px, 3vh, 34px); }

.ev-agents { display: flex; gap: 3px; }
.ev-agents button { width: 26px; height: 26px; padding: 3px; border-radius: 8px; opacity: .45; transition: opacity .2s, background .2s, transform .2s var(--ease); }
.ev-agents button:hover { opacity: .9; transform: translateY(-1px); }
.ev-agents button.on { opacity: 1; background: #fff; box-shadow: 0 0 0 1.5px var(--live); }
.ev-agents img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }

/* the screens */
.ev-screens { -webkit-user-select: none; user-select: none; container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 520px; }
.ev-dev { scroll-margin-top: 78px; --h: min(108px, 11cqw); display: grid; justify-items: center; gap: 12px; flex: none; transition: opacity .5s; }
.ev-dev.tv.on, .ev-dev.laptop.on { --h: min(430px, 34cqw); }
.ev-dev.phone.on { --h: 500px; }
.ev-dev:not(.on) { opacity: .55; }
.ev-dev:not(.on) .ev-view { pointer-events: none; }
.ev-frame { position: relative; padding: 9px; border-radius: 14px; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(11,11,12,.2), 0 40px 80px -36px rgba(30,25,15,.5); transition: padding .6s var(--ease), border-radius .6s var(--ease); }
[data-theme="dark"] .ev-frame { box-shadow: 0 0 0 1px rgba(236,235,228,.14), 0 40px 80px -36px rgba(0,0,0,.8); }
.ev-screen { position: relative; height: var(--h); aspect-ratio: 8 / 5; overflow: hidden; border-radius: 4px; background: #fbfaf6; transition: height .7s var(--ease); }
.ev-view { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform: scale(var(--k, 1)); transform-origin: 0 0; }
.ev-dev.tv .ev-frame::after { content: ""; position: absolute; left: 42%; right: 42%; top: 100%; height: 10px; border-radius: 0 0 6px 6px; background: #1d1d21; }
.ev-dev.laptop .ev-frame { border-radius: 14px 14px 4px 4px; }
.ev-dev.laptop .ev-frame::after { content: ""; position: absolute; left: -7%; right: -7%; top: 100%; height: 12px; border-radius: 0 0 12px 12px; background: linear-gradient(#3a3a40, #121215); }
.ev-dev.phone .ev-frame { border-radius: 30px; padding: 8px; }
.ev-dev.phone .ev-screen { aspect-ratio: 390 / 844; border-radius: 23px; }
.ev-dev.phone .ev-view { width: 390px; height: 844px; }
.ev-dev:not(.on) .ev-frame { border-radius: 9px; padding: 5px; }
.ev-dev.phone:not(.on) .ev-frame { border-radius: 12px; padding: 4px; }
.ev-dev.phone:not(.on) .ev-screen { border-radius: 8px; }
.ev-lab { font: 400 12.5px var(--mono); color: var(--ink-2); white-space: nowrap; }
.ev-dev.laptop .ev-lab, .ev-dev.tv .ev-lab { margin-top: 6px; }

/* a page on a screen: light, as every page an agent made is */
.pg { position: absolute; inset: 0; color: #141414; background: #fbfaf6; font: 400 15px/1.4 var(--text); animation: pgin .6s var(--ease); }
@keyframes pgin { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.pg-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 26px; border-bottom: 1px solid rgba(12,12,12,.08); }
.pg-bar b { font: 700 20px/1 var(--disp); letter-spacing: -.02em; }
.pg-meta { display: flex; gap: 18px; font: 500 14px var(--mono); color: #5b5a55; font-variant-numeric: tabular-nums; }
.pg-hint { position: absolute; left: 26px; bottom: 18px; font: 400 12.5px var(--mono); color: #8a887f; }
.pg-over { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 0 70px; background: rgba(11,11,12,.86); color: #fff; opacity: 0; pointer-events: none; transition: opacity .5s; backdrop-filter: blur(4px); }
.pg.over .pg-over { opacity: 1; pointer-events: auto; }
.ov-who { display: flex; align-items: center; gap: 9px; font: 500 15px var(--mono); color: rgba(255,255,255,.85); }
.ov-who img { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: #fff; object-fit: contain; }
.ov-who i { width: 12px; height: 12px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 5px rgba(52,211,153,.2); }
.ov-big { font: 700 40px/1.08 var(--disp); letter-spacing: -.03em; max-width: 16ch; }
.ov-say { font: 400 19px/1.4 var(--mono); color: rgba(255,255,255,.8); }

/* the cube's page */
.pg-cube .c-host { position: absolute; left: 50px; top: 76px; width: 420px; height: 380px; display: grid; place-items: center; }
.pg-cube .c-host::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 18px; height: 26px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.22), transparent 70%); filter: blur(4px); z-index: -1; }
.tape { position: absolute; right: 26px; top: 82px; width: 230px; list-style: none; display: grid; gap: 6px; font: 500 16px var(--mono); font-variant-numeric: tabular-nums; }
.tape li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: rgba(12,12,12,.05); animation: tapein .35s var(--ease); }
.tape li:first-child { background: #141414; color: #fff; }
.tape li:nth-child(n+6) { opacity: .55; } .tape li:nth-child(n+8) { opacity: .3; }
.tape li span { font-size: 13px; color: inherit; opacity: .6; }
@keyframes tapein { from { opacity: 0; transform: translateY(-8px); } }

/* the cube itself */
.cube-scene { position: relative; width: calc(var(--s) * 4.6); height: calc(var(--s) * 4.6); perspective: calc(var(--s) * 15); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.cube-scene:active { cursor: grabbing; }
.cube-root { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.cb { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.cf { position: absolute; display: block; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 9%; background: #111; backface-visibility: hidden; }
.st { position: absolute; inset: 5.5%; display: block; border-radius: 15%; background-image: linear-gradient(150deg, rgba(255,255,255,.38), rgba(255,255,255,0) 42%, rgba(0,0,0,.1)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); cursor: pointer; }

/* narrower */
@media (max-width: 760px) {
  .ev-screens { flex-wrap: wrap; align-items: flex-end; min-height: 0; gap: 10px 14px; }
  .ev-dev { --h: 44px; order: 1; }
  .ev-dev.on { order: 2; flex-basis: 100%; }
  .ev-dev.tv.on, .ev-dev.laptop.on { --h: calc((100cqw - 18px) * .625); }
  .ev-dev.phone.on { --h: min(560px, calc((100cqw - 16px) * 2.164)); }
  .ev-dev:not(.on) .ev-lab { font-size: 10.5px; }
  .ev-dev:not(.on) .ev-frame::after { display: none; }
}

/* algebra on a balance (js/story/balance.js) */
.pg-bal .b-ask { position: absolute; left: 26px; top: 74px; font: 400 16px var(--mono); color: #5b5a55; }
.bal-post { position: absolute; left: 396px; top: 206px; width: 8px; height: 194px; border-radius: 4px; background: #141414; }
.bal-foot { position: absolute; left: 330px; top: 396px; width: 140px; height: 12px; border-radius: 6px; background: #141414; }
.bal-beam { position: absolute; left: 140px; top: 196px; width: 520px; height: 10px; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
.bal-bar { position: absolute; inset: 0; border-radius: 5px; background: #141414; }
.bal-eq { position: absolute; left: 376px; top: 177px; width: 48px; height: 48px; border-radius: 50%; background: #fbfaf6; box-shadow: inset 0 0 0 2.5px #141414; font: 700 28px/1 var(--text); color: #141414; z-index: 2; transition: background .2s, color .2s, transform .2s; }
.bal-eq.over, .picking .bal-eq:hover { background: #141414; color: #fff; transform: scale(1.12); }
.bal-pan { position: absolute; top: 236px; width: 200px; min-height: 92px; display: grid; place-items: center; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1.5px rgba(20,20,20,.14), 0 18px 30px -18px rgba(30,25,15,.35); transition: transform .8s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s, background .2s; }
.bal-pan::before { content: ""; position: absolute; left: calc(50% - 1px); bottom: 100%; width: 2px; height: 36px; background: #141414; }
.bal-pan[data-pan="L"] { left: 50px; } .bal-pan[data-pan="R"] { left: 550px; }
.bal-pan.over, .picking .bal-pan:hover { background: #f1efe8; box-shadow: 0 0 0 2.5px #141414, 0 18px 30px -18px rgba(30,25,15,.35); }
.bal-pan span { font: 700 38px/1 var(--disp); letter-spacing: -.02em; transition: opacity .18s, transform .18s; white-space: nowrap; }
.bal-pan span.out { opacity: 0; transform: translateY(-8px); }
.bal-pan span.new { animation: bnew .5s var(--ease); }
@keyframes bnew { 40% { transform: scale(1.12); } }
.b-ops { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 12px; transition: opacity .4s; }
.b-op { height: 52px; padding: 0 22px; border-radius: 14px; background: #141414; color: #fff; font: 600 21px/1 var(--mono); cursor: grab; touch-action: none; user-select: none; transition: transform .2s var(--ease), box-shadow .2s; }
.b-op:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -12px rgba(0,0,0,.5); }
.b-op.picked { transform: translateY(-5px); box-shadow: 0 0 0 3px #fbfaf6, 0 0 0 5px #141414; }
.b-op.hint { animation: bhint 1.4s ease-in-out infinite; }
@keyframes bhint { 50% { box-shadow: 0 0 0 4px #fbfaf6, 0 0 0 7px rgba(20,20,20,.5); transform: translateY(-3px); } }
.b-op.no { animation: bno .45s; }
@keyframes bno { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.b-ghost { position: fixed; z-index: 90; margin: 0; padding: 0; display: grid; place-items: center; pointer-events: none; transform: scale(1.06) rotate(-3deg); box-shadow: 0 24px 40px -16px rgba(0,0,0,.55); cursor: grabbing; }
.b-ghost.drop { transition: opacity .25s, transform .25s; opacity: 0; transform: scale(.6); }
.b-check { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font: 500 24px var(--mono); color: #141414; opacity: 0; transform: translateY(8px); transition: opacity .5s .3s, transform .5s .3s; }
.b-check i { font-style: normal; color: #047857; font-weight: 700; }
.pg-bal.solved .b-ops { opacity: 0; pointer-events: none; }
.pg-bal.solved .b-check { opacity: 1; transform: none; }
.pg-bal.solved .bal-pan[data-pan="L"] { box-shadow: 0 0 0 2.5px #047857, 0 18px 30px -18px rgba(30,25,15,.35); }

/* your threads (js/story/threads.js) */
.th-t3 { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 4px; }
.th-list { position: absolute; left: 22px; right: 22px; top: 70px; list-style: none; display: grid; gap: 10px; }
.th { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; padding: 10px 14px 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.1); transition: opacity .3s, box-shadow .3s; overflow: hidden; }
.th:not(.on):not(.done) { opacity: .5; }
.th-tick { width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 2px #141414; transition: background .2s, transform .15s; }
.th-tick:active { transform: scale(.88); }
.th.on .th-tick { background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.th-main { display: grid; gap: 6px; min-width: 0; }
.th-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.th-head img { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.th-head b { font: 600 15px var(--text); white-space: nowrap; }
.th-got { color: #6b6a64; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.th-took { margin-left: auto; flex: none; font: 500 12.5px var(--mono); color: #6b6a64; }
.th-next { display: flex; align-items: center; gap: 8px; }
.th-next span { flex: none; font: 500 12px var(--mono); color: #8a887f; }
.th-next input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: #f3f1ea; font: 400 14px var(--mono); color: #141414; outline: 0; transition: background .2s, box-shadow .2s; }
.th-next input:hover { box-shadow: inset 0 0 0 1px rgba(20,20,20,.2); }
.th-next input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px #141414; }
.th.edited .th-next input { box-shadow: inset 0 0 0 1.5px #141414; background: #fff; }
.th.edited .th-next span::after { content: " · yours"; color: #141414; }
.th-foot { position: absolute; right: 22px; bottom: 20px; }
.th-send { height: 48px; padding: 0 24px; border-radius: 14px; background: #141414; color: #fff; font: 600 17px var(--text); transition: transform .2s var(--ease), opacity .2s; }
.th-send b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; border-radius: 99px; background: #fff; color: #141414; font: 700 13px var(--mono); }
.th-send:hover { transform: translateY(-2px); }
.th-send:disabled { opacity: .35; }
.th-send.hint { animation: bhint 1.4s ease-in-out infinite; }
.pg-th.sent .th-send { opacity: 0; pointer-events: none; }
.pg-th.sent .th-tick { pointer-events: none; }
.th.running .th-took { color: #047857; }
.th.running .th-took::after { content: ""; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; animation: dkdots 1s steps(4) infinite; }
.th.running::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: var(--live); animation: thrun 1.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes thrun { from { transform: translateX(-100%); } to { transform: translateX(380%); } }
.th.done { box-shadow: 0 0 0 1.5px #047857; }
.th.done .th-got, .th.done .th-took { color: #047857; }
.th.later { opacity: .45; }

/* the night, and the morning */
.pg-meta span { white-space: nowrap; }
.ev-screens { border-radius: 28px; transition: background .9s; }
.evening.ev-night .ev-screens { background: #0b0b0c; }
.evening.ev-night .ev-lab { color: rgba(236,235,228,.55); }
.evening.ev-night .ev-dev:not(.on) { opacity: .35; }
.pg-still .c-host { left: 0; right: 0; top: 50px; width: auto; height: 400px; }
.pg-night .n-say { position: absolute; left: 22px; right: 22px; top: 76px; font: 500 16px/1.4 var(--mono); color: #5b5a55; transition: color .4s; }
.pg-night.woke .n-say { color: #047857; }
.pg-night .c-host { left: 0; right: 0; top: 150px; width: auto; height: 440px; }
.pg-sum .c-host { left: 20px; top: 74px; width: 330px; height: 380px; }
.sum { position: absolute; left: 360px; right: 26px; top: 84px; list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; }
.sum li { display: grid; align-content: start; gap: 6px; min-height: 0; padding: 16px 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.1); animation: sumin .6s var(--ease) backwards; }
.sum li:nth-child(2) { animation-delay: .12s; } .sum li:nth-child(3) { animation-delay: .24s; }
@keyframes sumin { from { opacity: 0; transform: translateY(10px); } }
.sum span { font: 500 12.5px var(--mono); color: #8a887f; }
.sum b { font: 600 18px/1.35 var(--text); letter-spacing: -.01em; }
.evening.ev-night .ev-frame { box-shadow: 0 0 0 1px rgba(236,235,228,.2), 0 40px 80px -30px rgba(0,0,0,.9); }

/* on a phone: the TV's and the laptop's pages laid out for 480 by 420 */
.evening.compact .ev-dev.tv .ev-screen, .evening.compact .ev-dev.laptop .ev-screen { aspect-ratio: 480 / 420; }
.evening.compact .ev-dev.tv .ev-view, .evening.compact .ev-dev.laptop .ev-view { width: 480px; height: 420px; }
@media (max-width: 760px) {
  .ev-agents button { width: 24px; height: 24px; }
  .ev-dev.tv.on, .ev-dev.laptop.on { --h: calc((100cqw - 18px) * .875); }
  .ev-clock { font-size: 34px; }
}
.compact .pg-bar { height: 46px; padding: 0 16px; }
.compact .pg-bar b { font-size: 18px; }
.compact .pg-meta { gap: 12px; font-size: 12.5px; }
.compact .pg-hint { left: 16px; bottom: 12px; font-size: 11.5px; }
.compact .pg-cube .c-host { left: 0; top: 46px; width: 310px; height: 320px; }
.compact .tape { right: 14px; top: 58px; width: 150px; gap: 5px; font-size: 15px; }
.compact .tape li { padding: 6px 10px; }
.compact .tape li:nth-child(n+7) { display: none; }
.compact .pg-over { padding: 0 30px; gap: 10px; }
.compact .ov-big { font-size: 30px; }
.compact .ov-say { font-size: 16px; }
.compact .pg-bal .b-ask { left: 16px; top: 58px; font-size: 14px; }
.compact .bal-beam { left: 50px; top: 150px; width: 380px; }
.compact .bal-post { left: 236px; top: 160px; height: 150px; }
.compact .bal-foot { left: 185px; top: 306px; width: 110px; }
.compact .bal-eq { left: 216px; top: 131px; }
.compact .bal-pan { top: 190px; width: 150px; min-height: 76px; padding: 10px; }
.compact .bal-pan[data-pan="L"] { left: 15px; } .compact .bal-pan[data-pan="R"] { left: 315px; }
.compact .bal-pan span { font-size: 30px; }
.compact .b-ops { bottom: 18px; gap: 8px; }
.compact .b-op { height: 48px; padding: 0 14px; font-size: 18px; }
.compact .b-check { bottom: 30px; font-size: 19px; }
.compact .th-list { left: 12px; right: 12px; top: 56px; gap: 7px; }
.compact .th { grid-template-columns: 30px minmax(0, 1fr); padding: 8px 10px; }
.compact .th-got { display: none; }
.compact .th-head b { font-size: 14px; }
.compact .th-next span { display: none; }
.compact .th-next input { height: 30px; font-size: 13px; }
.compact .th-foot { right: 12px; bottom: 12px; }
.compact .th-send { height: 44px; padding: 0 18px; font-size: 16px; }
.compact .pg-still .c-host { left: 0; right: 0; width: auto; top: 30px; height: 340px; }
.compact .pg-night .c-host { left: 0; right: 0; width: auto; top: 150px; height: 440px; } /* the phone's page is the phone's size on any screen */
.compact .pg-sum .c-host { left: 0; top: 56px; width: 150px; height: 160px; }
.compact .sum { left: 150px; right: 12px; top: 58px; gap: 8px; }
.compact .sum li { min-height: 0; padding: 10px 11px 12px; gap: 4px; }
.compact .sum span { font-size: 11px; }
.compact .sum b { font-size: 13.5px; }

/* the finger that shows what to do, and the line under the heading */
.ev-stage { position: relative; }
.ev-lede { margin-top: 10px; }
.coach { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .3s; }
.coach.on { opacity: 1; }
.coach i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: rgba(11,11,12,.4); box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.35); }
.coach span { position: absolute; left: 30px; top: -48px; padding: 8px 13px; border-radius: 99px; background: #0b0b0c; color: #fff; font: 600 14px/1.2 var(--mono); white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 22px -8px rgba(0,0,0,.5); }
.coach.left span { left: auto; right: 30px; }
.coach.doing span { display: none; }
.coach.doing i { background: rgba(11,11,12,.55); }
.b-op.lifted { opacity: .3; }
.pg-bal .b-op { height: 58px; padding: 0 30px; font-size: 24px; }

/* the six parts, under the heading */
.ev-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; list-style: none; font: 500 12.5px/1 var(--mono); }
.ev-acts li { padding: 6px 11px; border-radius: 99px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule); transition: background .3s, color .3s, box-shadow .3s; }
.ev-acts li.done { color: var(--ink-2); }
.ev-acts li.done::before { content: "✓ "; }
.ev-acts li.now { background: var(--ink); color: var(--paper); box-shadow: none; }


/* a page being drawn in by your agent: revealed top to bottom behind a line of its green */
.pg.build { animation: pgbuild .9s cubic-bezier(.6, .05, .3, 1) backwards; }
@keyframes pgbuild { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.pg.build::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2px; background: rgba(11,11,12,.55); transform: translateY(-100%); opacity: 0; pointer-events: none; z-index: 40; animation: pgline .9s cubic-bezier(.6, .05, .3, 1); }
@keyframes pgline { from { top: 0; opacity: 1; } 92% { opacity: 1; } to { top: 100%; opacity: 0; } }

/* two screens at once, when they work together */
.ev-screens.pair .ev-dev.tv.on { --h: min(400px, 32cqw); }
.ev-screens.pair .ev-dev.phone.on { --h: min(480px, 38cqw); }
.ev-screens.pair .ev-dev:not(.on) { --h: min(64px, 7cqw); }
.ev-screens.pair .ev-dev.laptop { order: -1; }
@media (max-width: 760px) {
  .ev-screens.pair .ev-dev.tv.on { --h: calc((100cqw - 18px) * .875); }
  .ev-screens.pair .ev-dev.phone.on { --h: 360px; order: 3; }
  .ev-screens.pair .ev-dev:not(.on) { --h: 44px; }
}



/* the morning: the evening played back, part by part */
.pg-sum .sum { gap: 8px; top: 74px; }
.pg-sum .sum li, .pg-sum .sum li:nth-child(n) { padding: 10px 14px 11px; gap: 3px; animation-delay: 0s; }
.pg-sum .sum span { font-size: 12px; }
.pg-sum .sum b { font-size: 16px; }
.sum-turn { position: absolute; left: 20px; top: 446px; width: 330px; text-align: center; font: 600 16px var(--mono); color: #5b5a55; }
.compact .pg-sum .sum { gap: 5px; top: 56px; }
.compact .pg-sum .sum li, .compact .pg-sum .sum li:nth-child(n) { padding: 6px 9px 7px; }
.compact .pg-sum .sum span { font-size: 10.5px; }
.compact .pg-sum .sum b { font-size: 12.5px; }
.compact .sum-turn { left: 0; top: 222px; width: 150px; font-size: 12px; }

/* your agent's bar: who it is, what it is doing now, and which agent it is */
.ev-agent { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 18px; padding: 10px 12px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); transition: filter .4s; }
.ev-who { display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 13.5px var(--mono); }
.ev-who img { width: 28px; height: 28px; flex: none; padding: 3px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1.5px var(--live); object-fit: contain; }
.ev-who b { font: 600 15px var(--text); white-space: nowrap; }
.ev-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--live-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: dkpulse 1.4s ease-in-out infinite; }
.ev-agent.tick .ev-state { animation: stin .4s var(--ease); }
@keyframes stin { from { opacity: 0; transform: translateX(-6px); } }
.ev-agent.closed { filter: grayscale(1); }
.ev-agent.closed .ev-state { color: var(--ink-3); }
.ev-agent.closed .ev-state::before { background: var(--ink-3); animation: none; }
.ev-agent.closed .ev-who img { box-shadow: 0 0 0 1.5px var(--rule); }

.compact .ev-who { flex-wrap: wrap; row-gap: 4px; }
.compact .ev-state { flex-basis: 100%; white-space: normal; }

/* what your agent puts on a page appears where it puts it, and what it saw lights up */
.pg.blank { clip-path: inset(0 0 100% 0); }
.pg .pre:not(.in) { visibility: hidden; }
.pg .pre.in { animation: agput .4s var(--ease); }
@keyframes agput { from { opacity: 0; scale: .9; } }
.st.seen { box-shadow: inset 0 0 0 3px var(--live), 0 0 16px 3px rgba(52,211,153,.85); }
.th-next input.typing { background: #fff; box-shadow: inset 0 0 0 1.5px #141414; }

/* the card your agent puts on the laptop to ask you something */
.ag-card { position: absolute; right: 22px; top: 66px; z-index: 5; width: 330px; padding: 14px 16px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.12), 0 24px 40px -18px rgba(0,0,0,.45); transition: opacity .3s, transform .3s; }
.ag-card-who { display: flex; align-items: center; gap: 7px; font: 500 12.5px var(--mono); color: #5b5a55; }
.ag-card-who img { width: 18px; height: 18px; object-fit: contain; }
.ag-card-q { margin-top: 8px; font: 700 19px/1.25 var(--disp); letter-spacing: -.01em; color: #141414; }
.ag-card-sub { margin-top: 4px; font: 400 13.5px var(--mono); color: #5b5a55; }
.ag-yes { margin-top: 12px; height: 42px; padding: 0 18px; border-radius: 12px; background: #141414; color: #fff; font: 600 16px var(--text); transition: transform .2s var(--ease); }
.ag-yes:hover { transform: translateY(-2px); }
.ag-card.gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.compact .ag-card { left: 12px; right: 12px; top: 56px; width: auto; }

/* the morning's way back to the start */
.pg-again { position: absolute; right: 26px; bottom: 20px; height: 40px; padding: 0 18px; border-radius: 99px; background: #141414; color: #fff; font: 600 15px var(--text); transition: transform .2s var(--ease); }
.pg-again:hover { transform: translateY(-2px); }
.compact .pg-again { right: 12px; bottom: 12px; height: 36px; font-size: 14px; }

/* the way to your agent and back (js/story/backend.js): what you did rises to its bar as a dot, and its
   answer comes back down as its mark, to where the page then changes */
.ev-hop { position: absolute; left: 0; top: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; }
.ev-hop.out { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #0b0b0c; box-shadow: 0 0 0 2.5px #fff, 0 4px 10px rgba(0,0,0,.3); }
.ev-hop.back { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,12,.15), 0 6px 14px -4px rgba(0,0,0,.4); }
.ev-hop.back img { width: 18px; height: 18px; object-fit: contain; }
.ev-agent.got .ev-who img { animation: agot .6s var(--ease); }
@keyframes agot { 40% { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(52,211,153,.3); } }

/* a note your agent pins in its page, beside what you did */
.pg-note { position: absolute; z-index: 20; pointer-events: none; width: max-content; max-width: 280px; padding: 9px 13px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.1), 0 16px 34px -14px rgba(0,0,0,.35); animation: agput .35s var(--ease); transition: opacity .25s; }
.pg-note.out { opacity: 0; }
.pg-note-who { display: flex; align-items: center; gap: 6px; font: 500 12px var(--mono); color: #6b6a64; }
.pg-note-who img { width: 16px; height: 16px; object-fit: contain; }
.pg-note-t { margin-top: 4px; font: 450 16px/1.4 var(--text); color: #141414; letter-spacing: -.005em; }
.compact .pg-note { max-width: 240px; }
.compact .pg-note-t { font-size: 17px; }
.compact .pg-note-who { font-size: 13px; }

/* what your agent changes on its pages */
.bal-pan.wanted { box-shadow: 0 0 0 2.5px #141414, 0 0 0 7px rgba(20,20,20,.08), 0 18px 30px -18px rgba(30,25,15,.35); }
.n-done { position: absolute; left: 22px; right: 22px; top: 606px; }
.n-done p { font: 500 13px var(--mono); color: #6b6a64; }
.n-done ul { display: grid; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.n-done li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.1); font: 500 15px var(--text); color: #141414; }
.n-done li b { color: #047857; }
.ev-heard { padding: 3px 9px; border-radius: 99px; background: #0b0b0c; color: #fff; font: 500 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--ease); }
.ev-heard.on { opacity: 1; transform: none; }
[data-theme="dark"] .ev-heard { background: #ecebe4; color: #0b0b0c; }
.compact .ev-heard { max-width: 100%; }

/* the launch film (js/story/film.js), drawn at any size from its frame */
.rv-film { position: absolute; inset: 0; overflow: hidden; }
.fm { position: absolute; inset: 0; overflow: hidden; container-type: size; transform-origin: 55% 55%; background: linear-gradient(var(--sky-a), var(--sky-b)); }
.fm[data-grade="cool"] { --sky-a: #8ea7bc; --sky-b: #dce4ea; --sun: #fbfaf4; --glow: rgba(251,250,244,.55); --hill: #74889a; --table: #2e3742; --cup: #f3f5f7; --steam: rgba(243,245,247,.85); --ink: #0f151b; --tint: rgba(70,110,170,.16); }
.fm[data-grade="warm"] { --sky-a: #ee9f5c; --sky-b: #fde2bb; --sun: #fff3d2; --glow: rgba(255,226,170,.7); --hill: #c47b4b; --table: #4b2d1d; --cup: #fff7ec; --steam: rgba(255,247,236,.85); --ink: #2a150a; --tint: rgba(255,140,50,.08); }
.fm-sun { position: absolute; width: 15cqh; height: 15cqh; translate: -50% -50%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 7cqh 2.5cqh var(--glow); }
.fm-hill { position: absolute; left: -10%; right: -10%; top: 57%; height: 30%; border-radius: 50% 50% 0 0 / 45% 45% 0 0; background: var(--hill); opacity: .8; }
.fm-table { position: absolute; left: 0; right: 0; top: 71%; bottom: 0; background: var(--table); }
.fm-cup { position: absolute; left: 30%; top: 62%; width: 12cqw; height: 17cqh; translate: -50% -50%; border-radius: .6cqh .6cqh 4.5cqh 4.5cqh; background: var(--cup); transform-origin: 50% 100%; box-shadow: inset -1.4cqw 0 0 rgba(0,0,0,.06); }
.fm-handle { position: absolute; right: -3.4cqw; top: 16%; width: 4.4cqw; height: 48%; border: 1.6cqh solid var(--cup); border-left: 0; border-radius: 0 45% 45% 0; }
.fm-steam { position: absolute; bottom: 100%; width: 1.3cqh; height: 10cqh; border-radius: 99px; background: linear-gradient(transparent, var(--steam)); }
.fm-steam:nth-child(1) { left: 26%; } .fm-steam:nth-child(2) { left: 47%; } .fm-steam:nth-child(3) { left: 68%; }
.fm-logo { position: absolute; left: 67%; top: 48%; translate: -50% -50%; margin: 0; font: 700 9cqw/1 var(--disp); letter-spacing: -.045em; color: var(--ink); white-space: nowrap; }
.fm-logo b { color: inherit; }
.fm-grade { position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; pointer-events: none; }

/* reviewing the film (js/story/review.js): the player, its timeline, and what you said and drew */
.rv-player { position: absolute; left: 22px; top: 70px; width: 512px; height: 288px; overflow: hidden; border-radius: 10px; background: #111; box-shadow: 0 0 0 1px rgba(20,20,20,.12); }
.rv-two { visibility: hidden; }
.pg-rv.is-two .rv-two { visibility: visible; }
.rv-ink { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.rv-ink path { fill: none; stroke: #ff3b30; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pg-rv.is-drawn .rv-ink { cursor: default; }
.pg-rv.is-two .rv-ink { pointer-events: none; }
.rv-aim { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.rv-aim[data-aim="0"] { left: 54%; top: 36%; } .rv-aim[data-aim="1"] { left: 80%; top: 60%; } .rv-aim[data-aim="2"] { left: 22%; top: 50%; }
.rv-split { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 4; display: none; width: 0; }
.pg-rv.is-two .rv-split { display: block; }
.rv-split i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.rv-split b { position: absolute; top: 50%; left: 0; translate: -50% -50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #141414; font: 700 14px var(--mono); box-shadow: 0 6px 16px rgba(0,0,0,.35); cursor: ew-resize; touch-action: none; }
.rv-lab { position: absolute; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font: 600 12px var(--mono); }
.rv-lab.l { right: 12px; } .rv-lab.r { left: 12px; }
.rv-render { position: absolute; inset: 0; z-index: 5; display: grid; align-content: center; gap: 12px; padding: 0 30px; background: rgba(12,12,14,.92); color: #e9e8e3; opacity: 0; pointer-events: none; transition: opacity .3s; }
.rv-render.on { opacity: 1; }
.rv-file { font: 600 13px var(--mono); color: #9a988f; }
.rv-diff p { font: 500 14px/1.65 var(--mono); white-space: pre; }
.rv-diff i { display: inline-block; width: 18px; font-style: normal; }
.rv-diff .del { color: #ff9b91; } .rv-diff .add { color: #8de4b6; }
.rv-prog { height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.14); }
.rv-prog i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.rv-rl { font: 500 13px var(--mono); color: #c9c7bf; }
.rv-line { position: absolute; left: 22px; top: 374px; width: 512px; height: 6px; border-radius: 3px; background: rgba(20,20,20,.1); }
.rv-head { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: #141414; }
.rv-pin { position: absolute; top: -5px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px #fbfaf6; animation: agput .35s var(--ease); }
.rv-side { position: absolute; left: 552px; right: 22px; top: 70px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.rv-h { font: 500 12px var(--mono); color: #8a887f; }
.rv-notes { display: grid; gap: 6px; padding: 0; list-style: none; }
.rv-notes li { display: grid; gap: 4px; padding: 9px 11px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.1); font: 500 13.5px var(--text); color: #141414; animation: agput .35s var(--ease); }
.rv-notes li b { font: 600 12px var(--mono); color: #ff3b30; }
.rv-notes li em { display: flex; align-items: center; gap: 6px; font-style: normal; color: #3b3a36; }
.rv-notes svg, .rv-chip svg { width: 14px; height: 14px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.4; }
.rv-notes .rv-empty { padding: 0; background: none; box-shadow: none; color: #a3a198; font-weight: 400; animation: none; }
.rv-say { display: grid; gap: 6px; visibility: hidden; }
.pg-rv.is-drawn .rv-say { visibility: visible; animation: agput .4s var(--ease); }
.rv-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: #141414; color: #fff; font: 500 13.5px var(--text); text-align: left; transition: transform .2s var(--ease), opacity .2s, background .2s; }
.rv-chip:hover { transform: translateY(-1px); }
.pg-rv.is-said .rv-chip:not(.rec):not(.done) { opacity: .28; pointer-events: none; }
.rv-chip.rec { background: #2b2b2e; }
.rv-chip.done { background: #fff; color: #141414; box-shadow: inset 0 0 0 1.5px #141414; }
.rv-wave { display: none; align-items: center; gap: 2px; height: 16px; margin-left: auto; }
.rv-chip.rec .rv-wave { display: inline-flex; }
.rv-wave b { width: 3px; height: 30%; border-radius: 2px; background: #ff3b30; animation: rvwave .45s ease-in-out infinite alternate; }
.rv-wave b:nth-child(2) { animation-delay: .12s; } .rv-wave b:nth-child(3) { animation-delay: .24s; } .rv-wave b:nth-child(4) { animation-delay: .06s; } .rv-wave b:nth-child(5) { animation-delay: .18s; }
@keyframes rvwave { to { height: 100%; } }
.rv-files { display: grid; gap: 4px; padding: 0; list-style: none; font: 500 12.5px var(--mono); color: #3b3a36; }
.rv-files li { padding: 5px 8px; border-radius: 7px; background: rgba(20,20,20,.04); }
.rv-files li.new { background: #141414; color: #fff; animation: agput .35s var(--ease); }
.rv-files em { margin-left: 6px; font-style: normal; opacity: .6; }
.rv-vers { display: inline-flex; gap: 4px; }
.rv-vers i { padding: 2px 7px; border-radius: 6px; font-style: normal; box-shadow: inset 0 0 0 1px rgba(20,20,20,.18); }
.rv-vers i.on { background: #141414; color: #fff; box-shadow: none; }
.compact .rv-player { left: 12px; top: 54px; width: 456px; height: 256px; }
.compact .rv-line { left: 12px; top: 322px; width: 456px; }
.compact .rv-side { left: 12px; right: 12px; top: 340px; bottom: 8px; }
.compact .rv-side > .rv-h, .compact .rv-notes, .compact .rv-files, .compact .rv-say .rv-h { display: none; }
.compact .rv-say { grid-template-columns: repeat(3, 1fr); }
.compact .rv-chip { flex-direction: column; justify-content: center; gap: 4px; height: 68px; padding: 6px; font-size: 13px; text-align: center; }
.compact .rv-wave { margin-left: 0; }

/* the film on the TV, following the laptop: what you draw shows on it as you draw */
.pg-fm { background: #0b0b0c; }
.tvf { position: absolute; left: 0; right: 0; top: 0; height: 450px; }
.pg-fm .rv-ink { pointer-events: none; cursor: default; }
.tvf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; display: flex; align-items: center; gap: 16px; padding: 0 22px; color: #c9c7bf; font: 500 14px var(--mono); }
.tvf-bar b { font: 700 18px var(--disp); color: #fff; letter-spacing: -.02em; }
.compact .tvf { height: 270px; }
.ev-screens.pair .ev-dev.laptop.on { --h: min(360px, 28cqw); order: 0; }
.ev-screens.pair:has(.laptop.on) .ev-dev.tv.on { --h: min(360px, 28cqw); }