:root {
  --bg: #c9a66f;
  --paper: #f4ecdc;
  --ink: #171310;
  --mute: #5f5040;
  --faint: #8a7658;
  --line: rgba(23, 19, 16, .18);
  --edge: rgba(23, 19, 16, .55);
  --signal: #b23a12;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --col: 860px;
  --radius: 0; /* square by design; bump for rounded bubbles */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); color-scheme: light; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }

#halftone { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none; }

/* ---- one scene ---------------------------------------------------------------- */
.app { position: relative; z-index: 1; height: 100dvh; display: flex; flex-direction: column; }

.hdr {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px 0; font-family: var(--mono); font-size: 12.5px; color: var(--mute);
}
.mark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.mark .logo { width: 26px; height: 26px; display: block; object-fit: contain; }
/* ---- boxes, drawn like his: a face, a top and a right side extruded up-right ------- */
.box { position: relative; background: var(--paper); border: 1px solid var(--ink); }
.box::before, .box::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.box::before { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.box::after { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }

.cubes { flex: 0 0 auto; display: flex; gap: 22px; padding: 14px 0 4px; }
.cube {
  --d: 9px; position: relative; background: var(--paper); border: 1px solid var(--ink); color: var(--ink);
  display: inline-flex; flex-direction: column; gap: 3px; padding: 10px 16px 9px; min-width: 128px; margin: var(--d) var(--d) 0 0;
  font-family: var(--mono); cursor: pointer; text-decoration: none; text-align: left;
  transition: transform .12s ease, background .12s ease;
}
.cube::before, .cube::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; transition: inherit; }
.cube::before { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.cube::after { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }
.cube .k { font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.cube .v { font-size: 11px; color: var(--mute); white-space: nowrap; }
.cube:hover { background: #ebe1cc; }
.cube:active, .cube.pressed { transform: translate(2px, 2px); }
.cube:active::before, .cube.pressed::before { width: 7px; right: -8px; }
.cube:active::after, .cube.pressed::after { height: 7px; top: -8px; }
.cube:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.cube.active { background: #d7c5a1; color: var(--ink); transform: translate(1px, 1px); }
.cube.active:hover { background: #d7c5a1; }
.cube.active::before { width: 8px; right: -9px; background: #b7a482; }
.cube.active::after { height: 8px; top: -9px; background: #e4d4b4; }
.cube.copied { background: var(--signal); color: #fff; }
.cube.copied .v { color: #fff; }
.cube.soon { color: var(--faint); cursor: default; }
.cube.soon .k { color: var(--faint); }

.scene {
  flex: 1; min-height: 0; width: 100%; max-width: var(--col); margin: 0 auto; padding: 0 20px 14px;
  display: flex; flex-direction: column;
}

/* him */
.him { flex: 0 0 auto; display: grid; grid-template-columns: 340px 1fr; align-items: end; column-gap: 26px; padding: 10px 0 6px; }
.g-rig { position: relative; height: 340px; }
.g-body { position: absolute; inset: 0; animation: bob 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
/* JEVIE is one inline SVG (brand/jevie.svg, measured from the drawing). Parts are groups
   with pivots; everything below moves those groups. Lengths inside the SVG are viewBox
   units (1000 = his full height), so numbers here are larger than screen pixels. */
.g-body > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-body #arm-l, .g-body #arm-r, .g-body #foot-l, .g-body #foot-r, .g-body #body, .g-body #shadow { transform-box: view-box; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.g-body .eye, .g-body #mouth, .g-body #smile, .g-body .eyearc, .g-body #grin, .g-body #mouthDots, .g-body #mouthO, .g-body .antenna { transform-box: fill-box; transform-origin: center; transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .18s ease; }
.g-body .gauge-cell { transition: fill .3s ease; }
.g-rig { cursor: pointer; }
.g-rig.blink .eye { transform: scaleY(.08) !important; transition-duration: .06s; }

/* moods: face (rects, arcs, dots, all from the measured eyes and mouth) */
.g-rig[data-mood='think'] .eye { animation: look 1.3s ease-in-out infinite alternate; }
.g-rig[data-mood='think'] #mouth { opacity: 0; }
.g-rig[data-mood='think'] #mouthDots { opacity: 1; }
.g-rig[data-mood='think'] #mouthDots rect { animation: dotwave 1.1s ease-in-out infinite; }
.g-rig[data-mood='think'] #mouthDots rect:nth-child(2) { animation-delay: .18s; }
.g-rig[data-mood='think'] #mouthDots rect:nth-child(3) { animation-delay: .36s; }
.g-rig[data-mood='think'] .antenna { animation: blinkred .8s steps(1) infinite; }
.g-rig[data-mood='laugh'] .eye, .g-rig[data-mood='dance'] .eye { opacity: 0; }
.g-rig[data-mood='laugh'] .eyearc, .g-rig[data-mood='dance'] .eyearc { opacity: 1; }
.g-rig[data-mood='laugh'] #mouth, .g-rig[data-mood='dance'] #mouth { opacity: 0; }
.g-rig[data-mood='laugh'] #grin, .g-rig[data-mood='dance'] #grin { opacity: 1; }
.g-rig[data-mood='wow'] #mouth { opacity: 0; }
.g-rig[data-mood='wow'] #mouthO { opacity: 1; }
@keyframes dotwave { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.g-rig[data-mood='no'] .eye { transform: scaleY(.45); }
.g-rig[data-mood='no'] #mouth { transform: scaleX(1.3); }
.g-rig[data-mood='meh'] .eye { transform: scaleY(.7); }
.g-rig[data-mood='hmm'] #eyeL { transform: scale(1.15, 1.35) translateY(-6px); }
.g-rig[data-mood='hmm'] #mouth { transform: scaleX(.6) translateX(-30px); }
.g-rig[data-mood='squint'] #eyeL { transform: scaleY(.4) rotate(-16deg); }
.g-rig[data-mood='squint'] #eyeR { transform: scaleY(.4) rotate(16deg); }
.g-rig[data-mood='squint'] #mouth { transform: scaleX(.7); }
.g-rig[data-mood='wow'] .eye { transform: scale(1.3); }
.g-rig[data-mood='sleepy'] .eye { transform: scaleY(.12); }
.g-rig[data-mood='sleepy'] #mouth { transform: scaleX(.45); }
.g-rig[data-mood='yes'] #mouth, .g-rig[data-mood='hop'] #mouth { opacity: 0; }
.g-rig[data-mood='yes'] #smile, .g-rig[data-mood='hop'] #smile { opacity: 1; }
.g-rig[data-mood='yes'] .eye, .g-rig[data-mood='hop'] .eye { transform: scale(1.2); }
.g-rig[data-mood='yes'] .antenna, .g-rig[data-mood='hop'] .antenna { fill: #ff4a26; }
.g-rig[data-mood='dance'] .antenna { animation: blinkred .5s steps(1) infinite; }
/* the light blinks: the square's centre goes bright red, the outline stays */
@keyframes blinkred { 0%, 100% { fill: #c15441; } 50% { fill: #ff4a26; } }

/* pokes */
.g-rig[data-mood='ouch-l'] #arm-l { animation: flinchL .8s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='ouch-r'] #arm-r { animation: flinchR .8s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='ouch-l'] .eye, .g-rig[data-mood='ouch-r'] .eye, .g-rig[data-mood='kick-l'] .eye, .g-rig[data-mood='kick-r'] .eye { transform: scale(1.25); }
.g-rig[data-mood='ouch-l'] #mouth, .g-rig[data-mood='ouch-r'] #mouth, .g-rig[data-mood='kick-l'] #mouth, .g-rig[data-mood='kick-r'] #mouth { opacity: 0; }
.g-rig[data-mood='ouch-l'] #mouthO, .g-rig[data-mood='ouch-r'] #mouthO, .g-rig[data-mood='kick-l'] #mouthO, .g-rig[data-mood='kick-r'] #mouthO { opacity: 1; }
.g-rig[data-mood='kick-l'] #foot-l { animation: kickL .8s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='kick-r'] #foot-r { animation: kickR .8s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='kick-l'] #body, .g-rig[data-mood='kick-r'] #body { animation: hobble .8s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='tap'] .antenna { animation: blinkred .18s steps(1) infinite; }
.g-rig[data-mood='tap'] .eye { transform: translateY(-10px) scale(1.1); }
.g-rig[data-mood='angry'] #eyeL { transform: scaleY(.45) rotate(-22deg); }
.g-rig[data-mood='angry'] #eyeR { transform: scaleY(.45) rotate(22deg); }
.g-rig[data-mood='angry'] #mouth { transform: scaleX(.55) translateY(8px); }
.g-rig[data-mood='angry'] .antenna { fill: #ff2a0e; }
.g-rig[data-mood='angry'] #body { animation: shake .45s ease-in-out 2; }
.g-rig[data-mood='angry'] #arm-l { transform: rotate(30deg); }
.g-rig[data-mood='angry'] #arm-r { transform: rotate(-30deg); }
@keyframes flinchL { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(48deg); } 60% { transform: rotate(38deg); } }
@keyframes flinchR { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-48deg); } 60% { transform: rotate(-38deg); } }
/* a foot swings out to the side and up, so it stays in view instead of hiding behind the body */
@keyframes kickL { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-30px, -30px) rotate(14deg); } 65% { transform: translate(-18px, -18px) rotate(-6deg); } }
@keyframes kickR { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(30px, -30px) rotate(-14deg); } 65% { transform: translate(18px, -18px) rotate(6deg); } }
@keyframes hobble { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-12px) rotate(2deg); } 70% { transform: translateY(0) rotate(-1deg); } }

/* moods: body language (groups turn around their pivots) */
.g-rig[data-mood='yes'] #arm-r { animation: wave 1.4s ease-in-out 1; }
.g-rig[data-mood='laugh'] #arm-l { transform: rotate(70deg); }
.g-rig[data-mood='laugh'] #arm-r { transform: rotate(-70deg); }
.g-rig[data-mood='laugh'] #body { animation: giggle .5s ease-in-out infinite; }
.g-rig[data-mood='shrug'] #arm-l { transform: rotate(38deg); }
.g-rig[data-mood='shrug'] #arm-r { transform: rotate(-38deg); }
.g-rig[data-mood='wow'] #body { animation: startle .45s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='squint'] #body { animation: shake .45s ease-in-out 1; }
.g-rig[data-mood='sleepy'] #body { animation: doze 4s ease-in-out infinite; }
.g-rig[data-mood='hop'] #body, .g-rig[data-mood='hop'] #arm-l, .g-rig[data-mood='hop'] #arm-r { animation: hop .9s cubic-bezier(.2, .7, .2, 1) 1; }
.g-rig[data-mood='hop'] #foot-l, .g-rig[data-mood='hop'] #foot-r { animation: tuck .9s cubic-bezier(.2, .7, .2, 1) 1; }
/* the dance: two seconds, four beats. body sways and bounces on the beat, arms alternate,
   feet stomp opposite the arms, shadow breathes with the bounce */
.g-rig[data-mood='dance'] #body { animation: sway 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.g-rig[data-mood='dance'] #arm-l { animation: armL 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.g-rig[data-mood='dance'] #arm-r { animation: armR 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.g-rig[data-mood='dance'] #foot-l { animation: footL 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.g-rig[data-mood='dance'] #foot-r { animation: footR 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.g-rig[data-mood='dance'] #shadow { animation: breathe 1s ease-in-out infinite; }
@keyframes look { from { transform: translate(-16px, -4px); } to { transform: translate(16px, -4px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-85deg); } 45% { transform: rotate(-60deg); } 65% { transform: rotate(-85deg); } }
@keyframes giggle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes startle { 0% { transform: translateY(0); } 40% { transform: translateY(-28px); } 100% { transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px) rotate(-1.5deg); } 40% { transform: translateX(16px) rotate(1.5deg); } 60% { transform: translateX(-9px); } 80% { transform: translateX(9px); } }
@keyframes doze { 0%, 100% { transform: translateY(6px) rotate(0); } 50% { transform: translateY(16px) rotate(-1.5deg); } }
@keyframes hop { 0% { transform: translateY(0); } 30% { transform: translateY(-60px) scale(1.02, .98); } 60% { transform: translateY(0) scale(.98, 1.02); } 100% { transform: translateY(0); } }
@keyframes tuck { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-75px) scaleY(.7); } 60% { transform: translateY(0); } }
@keyframes sway {
  0%   { transform: rotate(-6deg) translateY(0); }
  12%  { transform: rotate(-3deg) translateY(-26px); }
  25%  { transform: rotate(0deg) translateY(0); }
  37%  { transform: rotate(3deg) translateY(-26px); }
  50%  { transform: rotate(6deg) translateY(0); }
  62%  { transform: rotate(3deg) translateY(-26px); }
  75%  { transform: rotate(0deg) translateY(0); }
  87%  { transform: rotate(-3deg) translateY(-26px); }
  100% { transform: rotate(-6deg) translateY(0); }
}
@keyframes armL { 0%, 100% { transform: rotate(58deg); } 22% { transform: rotate(70deg); } 50% { transform: rotate(6deg); } 72% { transform: rotate(-4deg); } }
@keyframes armR { 0%, 100% { transform: rotate(-6deg); } 22% { transform: rotate(4deg); } 50% { transform: rotate(-58deg); } 72% { transform: rotate(-70deg); } }
@keyframes footL { 0%, 40%, 60%, 100% { transform: translateY(0); } 50% { transform: translateY(-46px); } }
@keyframes footR { 0%, 100% { transform: translateY(-46px); } 10%, 90% { transform: translateY(0); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); opacity: .22; } 50% { transform: scale(.92, .9); opacity: .16; } }

/* his line */
/* his line: a box like the others, with a tail toward him */
.speech { --d: 9px; position: relative; align-self: center; margin: var(--d) var(--d) 92px 0; background: var(--paper); border: 1px solid var(--ink); padding: 16px 20px; min-width: 180px; max-width: 420px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.speech::before, .speech::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.speech::after { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.speech .tail { position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.speech.pop { animation: pop .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { transform: translateX(-8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
.speech::before { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }
.speech .line { font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; min-height: 1.3em; }
.speech .line + .line { margin-top: 4px; }
.speech .meta { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.speech .meta b { font-weight: 500; color: var(--ink); }
.speech .meta b.hit { color: var(--signal); }
.speech .meta .act { color: var(--signal); font-weight: 600; }
.speech .meta .act a { text-decoration: underline; text-underline-offset: 3px; }
.dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.dots i { width: 7px; height: 7px; background: var(--ink); display: block; animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cur::after { content: '▌'; color: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* what was said: a box with a scrollable window, between him and the bar */
.window {
  --d: 10px; flex: 1; min-height: 150px; position: relative; display: flex; flex-direction: column;
  margin: 12px var(--d) 16px 0; background: var(--paper); border: 1px solid var(--ink);
}
.window::before, .window::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.window::before { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.window::after { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }
.win-bar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: #efe5d2; }
.win-bar #winTitle { color: var(--ink); }
.win-bar #winWho { text-transform: none; letter-spacing: 0; }
.pane { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(23, 19, 16, .3) transparent; }
.pane:not([hidden]) { animation: fadein .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes fadein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.pane.doc { padding: 18px 18px 26px; }
.transcript {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.transcript:empty::before { content: 'nothing said yet. he is listening.'; font-family: var(--mono); font-size: 12px; color: var(--faint); align-self: center; margin: auto; }
.row { display: flex; align-items: flex-end; gap: 10px; max-width: 78%; animation: rise .32s cubic-bezier(.2, .7, .2, 1) both; }
.row .bubble { padding: 9px 13px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius); }
.row.you { align-self: flex-end; }
.row.you .bubble { background: var(--ink); color: var(--paper); }
.row.bot .bubble { --d: 5px; position: relative; background: #fbf6ec; border: 1px solid var(--ink); color: var(--ink); font-weight: 600; margin: var(--d) var(--d) 0 0; }
.row.bot .bubble::before, .row.bot .bubble::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.row.bot .bubble::before { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.row.bot .bubble::after { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }
.row.bot .m { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--mute); font-weight: 400; margin-top: 4px; }
.row.bot .m b { font-weight: 500; color: var(--ink); }
.row.bot .m b.hit { color: var(--signal); }
.row.act { align-self: center; max-width: 92%; }
.row.act .bubble { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--signal); border: 1px solid var(--signal); padding: 6px 11px; }
.row.act a { text-decoration: underline; text-underline-offset: 3px; }
.row.sys { align-self: center; max-width: 92%; }
.row.sys .bubble { font-family: var(--mono); font-size: 12px; color: var(--mute); text-align: center; padding: 2px 6px; }
.row .avatar { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; margin-bottom: 2px; }
.ident { width: 20px; height: 20px; fill: var(--ink); flex: 0 0 auto; }

/* say it */
.composer { --d: 8px; flex: 0 0 auto; position: relative; display: grid; grid-template-columns: 25ch 1fr auto auto; border: 1px solid var(--ink); background: var(--paper); margin-right: var(--d); }
.composer::before, .composer::after { content: ''; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.composer::before { top: -1px; right: calc(-1 * var(--d) - 1px); width: var(--d); height: 100%; background: #dfd0b4; transform: skewY(-45deg); transform-origin: top left; }
.composer::after { left: -1px; top: calc(-1 * var(--d) - 1px); height: var(--d); width: 100%; background: #fbf6ec; transform: skewX(-45deg); transform-origin: bottom left; }
.composer .count { align-self: center; padding: 0 12px; font-family: var(--mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.composer .count.near { color: var(--signal); }
.composer input, .composer textarea {
  background: transparent; border: 0; outline: 0; color: var(--ink); padding: 15px 16px;
  font-family: var(--mono); font-size: 14px; line-height: 1.5; resize: none; min-width: 0;
}
.composer input::placeholder, .composer textarea::placeholder { color: var(--faint); }
.composer input { border-right: 1px solid var(--ink); }
.composer input.bad { color: var(--signal); }
.composer textarea { max-height: 140px; overflow-y: auto; }
.composer :is(input, textarea):focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.send { background: var(--ink); color: var(--paper); border: 0; padding: 0 26px; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; cursor: pointer; min-width: 100px; transition: background .12s; }
.send:hover { background: var(--signal); }
.send:disabled { background: rgba(23, 19, 16, .35); cursor: default; }
.send:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; }

.foot { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 2px 0; font-family: var(--mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.foot > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.foot #holds { flex: 0 0 auto; }
.foot .fine { color: var(--faint); text-align: right; flex: 0 1 auto; }
.foot .live { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; }
.foot .live .ident { width: 12px; height: 12px; margin: 0; }
.foot .live b { font-weight: 500; color: var(--ink); }
.foot .live b.hit { color: var(--signal); }
.foot .live.flash { animation: flash .8s ease-out; }
@keyframes flash { from { color: var(--ink); } to { color: var(--mute); } }

/* ---- rules and ledger, inside the window ------------------------------------------- */
h2 { margin: 26px 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
h2:first-child { margin-top: 0; }
h2 .h2-note { text-transform: none; letter-spacing: 0; margin-left: 10px; color: var(--faint); }
/* rules: the text he is judged against, one row per action */
.rules { max-width: 66ch; }
.rule-p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.rule-rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink); margin: 4px 0 18px; }
.rule { display: grid; grid-template-columns: 7ch 1fr; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rule-k { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; padding-top: 1px; }
.rule-t { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.rule-t b { font-weight: 600; }
.rule-c { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.rule-none { display: grid; grid-template-columns: 7ch 1fr; column-gap: 14px; align-items: start; padding: 12px 0 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.rule-none .rule-k { color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips i { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--ink); border: 1px solid var(--line); padding: 3px 8px; }
.rule-fine { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ledger: one timeline; a row that made him act is marked */
.led-head { font-family: var(--mono); font-size: 12px; color: var(--mute); padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.led-head b { font-weight: 500; color: var(--ink); }
.led { display: flex; flex-direction: column; }
.led .empty { padding: 12px 0; color: var(--faint); font-family: var(--mono); font-size: 12.5px; }
.led-row { display: grid; grid-template-columns: 5ch 13ch 1fr; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.led-row.acted { background: rgba(178, 58, 18, .06); margin: 0 -18px; padding: 10px 18px; }
.led-t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding-top: 3px; }
.led-who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--mute); padding-top: 2px; }
.led-who .ident { width: 14px; height: 14px; }
.led-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.led-msg { font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.led-msg i { font-style: normal; color: var(--faint); }
.led-res { font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
.led-res b { font-weight: 500; color: var(--ink); }
.led-res b.hit { color: var(--signal); }
.badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--signal); color: var(--signal); font-weight: 600; }
.badge a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- responsive --------------------------------------------------------------------- */
@media (max-height: 820px) {
  .him { grid-template-columns: 240px 1fr; }
  .g-rig { height: 240px; }
  .speech { margin-bottom: 70px; }
}
@media (max-width: 720px) {
  .hdr { padding: 14px 16px 0; }
  .scene { padding: 0 12px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .him { grid-template-columns: 1fr; justify-items: center; row-gap: 12px; padding: 6px 0 4px; }
  .g-rig { height: 180px; width: 180px; }
  .speech { margin: var(--d) var(--d) 0 0; align-self: auto; max-width: 100%; }
  .speech .tail { left: 50%; top: -7px; transform: translateX(-50%) rotate(135deg); }
  .speech .line { font-size: 17px; }
  .cubes { gap: 6px; flex-wrap: wrap; padding: 10px 0 2px; }
  .cube { --d: 7px; min-width: 0; padding: 9px 9px 8px; }
  .cube .k { font-size: 12px; letter-spacing: .06em; }
  .cube .v { display: none; }
  .window { margin: 10px var(--d) 12px 0; }
  .composer { grid-template-columns: 1fr auto auto; }
  .composer input { grid-column: 1 / 4; border-right: 0; border-bottom: 1px solid var(--ink); padding: 11px 14px; font-size: 13px; }
  .send { padding: 0 18px; min-width: 84px; }
  .foot .fine { display: none; }
  .transcript { padding: 10px; margin-bottom: 10px; }
  .row { max-width: 88%; }
  .pane.doc { padding: 14px 12px 22px; }
  .rule, .rule-none { grid-template-columns: 1fr; row-gap: 4px; }
  .led-row { grid-template-columns: 5ch 1fr; }
  .led-who { grid-column: 2; }
  .led-body { grid-column: 2; }
  .led-row.acted { margin: 0 -12px; padding: 10px 12px; }
}

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.him, .cubes, .window, .composer, .foot { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.cubes { animation-delay: .05s; } .window { animation-delay: .1s; } .composer { animation-delay: .15s; } .foot { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .him, .transcript, .composer, .foot, .g-body, .g-rig, .part { animation: none !important; }
  .cur::after { animation: none; }
}