@font-face {
font-family: "Satoshi";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff2") format("woff2");
}
@font-face {
font-family: "Newsreader";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/assets/fonts/newsreader.10fc876f9f21.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/geist-mono.8af39dc3c10c.woff2") format("woff2");
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/fraunces.2adfd15279c8.woff2") format("woff2");
}
@font-face {
font-family: "Kalam";
font-style: normal;
font-weight: 700;
font-display: block;
src: url("/assets/fonts/kalam.6cfc4057ce99.woff2") format("woff2");
}
@font-face {
font-family: "Kalam Line";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/kalam-line.ab71a6b343ca.woff2") format("woff2");
}
.video-update { padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--line-2); background: var(--paper-2); display: flex; gap: 20px; justify-content: space-between; align-items: center; font: 13px/1.5 var(--sans); }
.video-update[hidden] { display: none; }
.video-update p { margin: 0; }
@media (max-width: 760px) {
.video-update { align-items: flex-start; }
}
:root {
color-scheme: light dark;
--paper: #f6f2ea;
--paper-2: #ece6da;
--ink: #1c1a17;
--ink-2: #5b5750;
--ink-3: #6f6a60;
--ink-4: #9a9488;
--line: #ddd6c8;
--line-2: #c6bdab;
--film: #141210;
--cream: #efe8da;
--cream-2: #b8b0a2;
--oxide: #9a3b2c;
--selection: rgba(28, 26, 23, 0.12);
--scrim: rgba(20, 18, 16, 0.14);
--frame-edge: rgba(28, 26, 23, 0.1);
--sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px rgba(0, 0, 0, 0.16);
--chip-bg: rgba(20, 18, 16, 0.72);
--overlay-bg: rgba(20, 18, 16, 0.82);
--serif: var(--sans);
--sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
--mono: var(--sans);
--reading: "Newsreader", Georgia, "Times New Roman", serif;
--data: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
--ease-in: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.4, 0, 1, 1);
--gutter: clamp(20px, 6vw, 120px);
--col-max: 1200px;
--bar-h: 52px;
--script-w: 320px;
--spread-gap: 48px;
--frame-chrome: 300px;
--video-aspect: 16 / 9;
--sheet-history-w: 360px;
--sheet-inspect-w: 520px;
--t-fast: 150ms;
--t-chip: 200ms;
--t-arrive: 320ms;
--t-fade: 400ms;
--t-sheet: 480ms;
--t-spread: 600ms;
}
@supports (color: light-dark(#000, #fff)) {
:root {
--paper: light-dark(#f6f2ea, #161412);
--paper-2: light-dark(#ece6da, #1e1b18);
--ink: light-dark(#1c1a17, #ede7db);
--ink-2: light-dark(#5b5750, #b3ac9f);
--ink-3: light-dark(#6f6a60, #948d80);
--ink-4: light-dark(#9a9488, #6b655b);
--line: light-dark(#ddd6c8, #2c2823);
--line-2: light-dark(#c6bdab, #3d3830);
--film: light-dark(#141210, #0b0a09);
--oxide: light-dark(#9a3b2c, #d9806c);
--selection: light-dark(rgba(28, 26, 23, 0.12), rgba(237, 231, 219, 0.16));
--frame-edge: light-dark(rgba(28, 26, 23, 0.1), #2c2823);
--sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5));
}
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (min-width: 1800px) {
:root { --col-max: 1320px; }
}
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
margin: 0;
min-height: 100%;
background: var(--paper);
color: var(--ink);
}
body {
font-family: var(--sans);
font-size: 14px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt";
overflow-x: hidden;
}
::selection { background: var(--selection); }
button,
input,
select,
textarea {
font: inherit;
color: inherit;
background: none;
border: 0;
margin: 0;
padding: 0;
border-radius: 0;
}
button { cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 4px;
}
.frame :focus-visible {
outline-color: var(--cream);
outline-offset: -3px;
}
kbd { font-family: var(--data); font-weight: 400; }
[hidden] { display: none !important; }
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mono,
.elapsed,
.time,
.frame-count,
.count,
.scene-number,
.json,
.gantt-num,
.call-num,
.overview dd,
.rail-tip-num,
.rail-tip-time {
font-family: var(--mono);
font-size: 12px;
line-height: 16px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.chip,
.engine,
.status-word,
.row-meta {
font-family: var(--sans);
font-size: 12px;
line-height: 16px;
font-weight: 450;
letter-spacing: -.008em;
}
.text-link {
font: 500 13px/18px var(--sans);
color: var(--ink-2);
transition: color var(--t-fast) var(--ease-in);
}
.text-link:hover {
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--line-2);
text-underline-offset: 0.16em;
}
.text-button {
font: 500 14px/20px var(--sans);
color: var(--ink);
height: 32px;
padding: 0 12px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--line-2);
transition: background-color var(--t-fast) var(--ease-in);
}
.text-button:hover { background: var(--paper-2); }
.text-button:active { opacity: 0.8; }
.text-button:disabled { color: var(--ink-4); }
.text-button.is-primary {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px 0 14px;
background: var(--ink);
color: var(--paper);
box-shadow: none;
}
.text-button.is-primary:hover { background: var(--ink); opacity: 0.9; }
.text-button.is-primary:disabled { background: var(--ink-4); color: var(--paper); opacity: 1; }
.text-button.is-primary svg { width: 16px; height: 16px; flex: none; }
.run-actions { align-items: center; }
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page.is-docked { --gutter: 24px; }
.page.is-docked .bar,
.page.is-docked .main { padding-right: calc(var(--sheet-inspect-w) + var(--gutter)); }
.bar {
position: sticky;
top: 0;
z-index: 5;
height: var(--bar-h);
display: flex;
align-items: center;
padding: 0 var(--gutter);
background: var(--paper);
transition: box-shadow var(--t-fast) var(--ease-in);
}
.bar-inner {
flex: 1;
max-width: var(--col-max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.bar.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.wordmark {
font: 600 20px/24px var(--serif);
font-optical-sizing: auto;
letter-spacing: -0.015em;
color: var(--ink);
text-decoration: none;
}
.bar-links {
display: flex;
gap: 24px;
}
.bar-link {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 13px/18px var(--sans);
color: var(--ink-2);
padding: 4px 0;
transition: color var(--t-fast) var(--ease-in);
}
.bar-link svg { flex: none; opacity: .85; }
.bar-link:hover svg { opacity: 1; }
.bar-link:hover { color: var(--ink); }
.main {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 var(--gutter);
}
.composer,
.run {
width: min(var(--col-max), 100%);
margin: 0 auto;
}
.composer {
padding-top: calc(38vh - var(--bar-h));
padding-bottom: 96px;
transition: opacity 240ms var(--ease-out);
}
.composer-form {
width: min(680px, 100%);
}
.field-row {
display: flex;
align-items: flex-start;
gap: 16px;
}
.field {
flex: 1;
min-width: 0;
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 24px;
line-height: 32px;
font-weight: 400;
font-feature-settings: "kern", "liga";
color: var(--ink);
caret-color: var(--ink);
padding: 6px 0 8px;
resize: none;
overflow: hidden;
min-height: 46px;
max-height: 270px;
box-shadow: inset 0 -1px 0 var(--line-2);
transition: box-shadow var(--t-fast) var(--ease-in);
field-sizing: content;
}
.field.is-tall { overflow-y: auto; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:focus { box-shadow: inset 0 -1px 0 var(--ink); }
.field:focus-visible { outline: none; }
.dictate {
flex: none;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-top: 1px;
border-radius: 4px;
color: var(--ink-2);
transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}
.dictate:hover { color: var(--ink); }
.dictate:active { background: var(--line-2); }
.dictate:disabled { color: var(--ink-4); }
.dictate.is-busy { color: var(--ink-3); }
.dictate.is-recording { color: var(--ink); }
.dictate-dot {
position: absolute;
top: 9px;
right: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--oxide);
opacity: 0;
transform: scale(0.6);
transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in);
}
.dictate.is-recording .dictate-dot {
opacity: 1;
transform: none;
animation: dictate-pulse 1.4s ease-in-out infinite;
}
@keyframes dictate-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.explain {
flex: none;
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 14px 0 16px;
margin-top: 1px;
border-radius: 4px;
background: var(--ink);
color: var(--paper);
font: 500 14px/20px var(--sans);
transition: opacity var(--t-fast) var(--ease-in);
}
.explain kbd {
font-size: 12px;
line-height: 16px;
color: var(--paper);
opacity: 0.6;
}
.explain:hover { opacity: 0.9; }
.explain:active { opacity: 0.8; }
.explain:disabled { background: var(--ink-4); opacity: 1; }
.explain.is-busy { opacity: 0.7; }
.composer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
min-height: 28px;
}
.composer-left,
.composer-right {
display: flex;
align-items: center;
gap: 28px;
min-width: 0;
}
.try {
font: 400 13px/18px var(--sans);
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--t-fast) var(--ease-in);
}
.try:hover { color: var(--ink); }
.count { color: var(--ink-3); }
.count.is-over { color: var(--oxide); }
.segmented {
display: inline-flex;
align-items: center;
border: 0;
padding: 0;
margin: 0;
}
.segmented label {
position: relative;
display: inline-flex;
align-items: center;
}
.segmented label + label::before {
content: "·";
color: var(--ink-4);
padding: 0 6px;
font: 400 13px/18px var(--sans);
}
.segmented input {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.segmented span {
display: inline-block;
padding: 5px 2px;
font: 400 13px/18px var(--sans);
color: var(--ink-3);
transition: color var(--t-fast) var(--ease-in);
}
.segmented label:hover span { color: var(--ink-2); }
.segmented input:checked + span { color: var(--ink); }
.segmented input:focus-visible + span {
outline: 2px solid var(--ink);
outline-offset: 2px;
border-radius: 4px;
}
.engine {
margin: 16px 0 0;
color: var(--ink-3);
min-height: 16px;
}
.engine.is-missing { color: var(--oxide); font-family: var(--sans); font-size: 13px; line-height: 18px; }
.composer-error {
margin: 8px 0 0;
font: 400 13px/18px var(--sans);
color: var(--oxide);
min-height: 0;
}
.composer-error:empty { display: none; }
.recently { margin-top: 64px; max-width: 680px; }
.recently-label {
margin: 0 0 4px;
font: 500 13px/18px var(--sans);
color: var(--ink-3);
}
.row-list {
list-style: none;
margin: 0;
padding: 0;
}
.recently .row-list {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
}
.recently .row-list > li,
.recently .row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
.row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
column-gap: 0;
width: 100%;
min-height: 44px;
padding: 10px 0;
box-shadow: inset 0 -1px 0 var(--line);
color: var(--ink);
transition: background-color var(--t-fast) var(--ease-in);
}
.row:hover { background: var(--paper-2); }
.row.is-current { background: var(--paper-2); }
.row-question {
font: 500 14px/20px var(--sans);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-meta { color: var(--ink-3); white-space: nowrap; margin-left: 16px; }
.status-word { color: var(--ink-3); white-space: nowrap; }
.status-word.is-failed { color: var(--oxide); }
.status-word:empty { display: none; }
.row .status-word:empty { display: block; }
.row .status-word:not(:empty) { margin-left: 16px; }
.all-runs { margin-top: 12px; }
.run {
padding-bottom: 16px;
container-type: inline-size;
container-name: column;
}
.title-block { padding-top: 64px; }
.question {
margin: 0;
font-family: var(--serif);
font-optical-sizing: auto;
font-feature-settings: "kern", "liga";
color: var(--ink);
overflow-wrap: anywhere;
hanging-punctuation: first allow-end;
transform-origin: 0 0;
will-change: transform;
}
.question.q-40 { font-size: 40px; line-height: 46px; font-weight: 400; letter-spacing: -0.006em; text-wrap: balance; }
.question.q-28 { font-size: 28px; line-height: 34px; font-weight: 450; letter-spacing: 0; text-wrap: balance; }
.question.q-19 {
font-size: 19px;
line-height: 26px;
font-weight: 450;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.question.q-19.is-expanded { display: block; -webkit-line-clamp: none; overflow: visible; }
.read-all { margin-top: 4px; }
.running-row {
display: flex;
align-items: baseline;
gap: 16px;
margin-top: 8px;
padding-bottom: 12px;
box-shadow: inset 0 -1px 0 var(--line);
transition: opacity var(--t-arrive) var(--ease-in);
}
.running {
flex: 1;
min-width: 0;
margin: 0;
font: 500 14px/20px var(--sans);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
display: flex;
align-items: baseline;
gap: 8px;
}
.running.is-failed { color: var(--ink); }
.dot {
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--oxide);
align-self: center;
}
.dot.is-ink { background: var(--ink); }
.reconnecting {
font: 400 13px/18px var(--sans);
color: var(--ink-2);
}
.elapsed {
flex: none;
font-size: 13px;
line-height: 18px;
font-weight: 500;
color: var(--ink-2);
min-width: 4ch;
text-align: right;
}
.failure { margin-top: 12px; }
.raw-error {
margin: 0;
font-family: var(--mono);
font-size: 12px;
line-height: 18px;
color: var(--ink-2);
white-space: pre-wrap;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 36px;
}
.raw-error.is-expanded {
display: block;
-webkit-line-clamp: none;
max-height: none;
overflow: visible;
}
.failure-actions {
display: flex;
gap: 16px;
margin-top: 4px;
}
.run-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.spread {
margin-top: 12px;
display: grid;
grid-template-columns: min(100% - var(--script-w) - var(--spread-gap), max(320px, (100vh - var(--frame-chrome)) * var(--video-aspect))) var(--spread-gap) var(--script-w);
align-items: stretch;
transition: opacity var(--t-spread) var(--ease-in), transform var(--t-spread) var(--ease-in);
}
.film {
min-width: 0;
display: flex;
flex-direction: column;
}
.frame {
position: relative;
container-type: inline-size;
aspect-ratio: var(--video-aspect);
background: var(--film);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--frame-edge);
color: var(--cream);
}
.layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity var(--t-fade) var(--ease-in);
pointer-events: none;
}
.layer.is-visible { opacity: 1; }
.video { object-fit: contain; background: var(--film); }
.frame-hold { object-fit: contain; background: var(--film); transition: none; }
.frame.is-cut .video { transition: none; }
.status-layer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: clamp(52px, 15cqi, 84px) clamp(18px, 6cqi, 44px);
text-align: center;
}
.stage-rail {
position: absolute;
top: clamp(14px, 4.6cqi, 30px);
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: min(430px, 84%);
margin: 0;
padding: 0;
list-style: none;
}
.stage-rail > li {
position: relative;
display: grid;
justify-items: center;
gap: 9px;
}
.stage-rail > li::before {
content: "";
position: absolute;
top: 3px;
left: -50%;
right: 50%;
height: 1px;
background: color-mix(in srgb, var(--cream) 16%, transparent);
}
.stage-rail > li:first-child::before { content: none; }
.stage-rail > li.is-done::before,
.stage-rail > li.is-active::before { background: color-mix(in srgb, var(--cream) 34%, transparent); }
.stage-dot {
position: relative;
z-index: 1;
width: 7px;
height: 7px;
border-radius: 50%;
background: color-mix(in srgb, var(--cream) 20%, transparent);
transition: background-color var(--t-fade) var(--polish-ease), box-shadow var(--t-fade) var(--polish-ease);
}
.stage-name {
font-family: var(--sans);
font-size: 12px;
line-height: 14px;
font-weight: 500;
letter-spacing: -.008em;
color: color-mix(in srgb, var(--cream) 38%, transparent);
transition: color var(--t-fade) var(--polish-ease);
}
.stage-rail > li.is-done .stage-dot { background: color-mix(in srgb, var(--cream) 52%, transparent); }
.stage-rail > li.is-done .stage-name { color: color-mix(in srgb, var(--cream) 52%, transparent); }
.stage-rail > li.is-active .stage-dot { background: var(--cream); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cream) 11%, transparent); }
.stage-rail > li.is-active .stage-name { color: var(--cream); }
.frame-title {
margin: 0;
font-family: var(--serif);
font-optical-sizing: auto;
font-size: clamp(19px, 4.6cqi, 32px);
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.012em;
color: var(--cream);
text-wrap: balance;
}
.frame-line {
margin: 0;
max-width: 46ch;
font-family: var(--sans);
font-size: clamp(12px, 1.9cqi, 14px);
line-height: 1.5;
color: color-mix(in srgb, var(--cream) 58%, transparent);
text-wrap: pretty;
}
.frame-line:empty { display: none; }
.frame-count {
position: absolute;
left: 0;
right: 0;
bottom: clamp(14px, 4.6cqi, 30px);
margin: 0;
letter-spacing: 0.1em;
color: color-mix(in srgb, var(--cream) 40%, transparent);
}
.frame-count:empty { display: none; }
.chip-row {
position: absolute;
z-index: 1;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
pointer-events: none;
}
.chip {
margin: 0;
padding: 4px 8px;
border-radius: 4px;
background: var(--chip-bg);
color: var(--cream-2);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
pointer-events: none;
}
.chip.is-shown { opacity: 1; visibility: visible; }
.chip-action {
pointer-events: auto;
position: relative;
font: 600 12px/1 var(--sans);
padding: 6px 10px;
border-radius: 4px;
background: var(--chip-bg);
color: var(--cream);
border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
}
.chip-action::after { content: ""; position: absolute; inset: -8px; }
.chip-action:hover { background: color-mix(in srgb, var(--chip-bg) 82%, var(--cream)); }
.chip-action:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.chip-action:disabled { opacity: .6; }
.status-layer .frame-action {
position: relative;
z-index: 1;
margin-top: 14px;
pointer-events: auto;
}
.status-layer .frame-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.play-big {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--cream);
cursor: pointer;
}
.play-ring {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--chip-bg);
box-shadow: inset 0 0 0 1px var(--cream);
transition: background-color var(--t-fast) var(--ease-in);
}
.play-ring svg { margin-left: 3px; }
.play-big:hover .play-ring { background: var(--overlay-bg); }
.play-big-label {
padding: 3px 8px;
border-radius: 4px;
background: var(--overlay-bg);
font-family: var(--mono);
font-size: 12px;
line-height: 16px;
color: var(--cream);
}
.buffering {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.buffering-ring {
display: flex;
align-items: center;
justify-content: center;
width: clamp(44px, 12cqi, 64px);
height: clamp(44px, 12cqi, 64px);
border-radius: 50%;
background: var(--chip-bg);
}
.buffering-ring::before {
content: "";
width: 56%;
height: 56%;
border-radius: 50%;
border: clamp(2px, 0.9cqi, 3px) solid color-mix(in srgb, var(--cream) 24%, transparent);
border-top-color: var(--cream);
animation: buffering-spin 900ms linear infinite;
}
@keyframes buffering-spin { to { transform: rotate(360deg); } }
video::cue {
font-family: var(--sans);
font-size: 18px;
line-height: 1.35;
color: #f6f2ea;
background: rgba(22, 20, 18, 0.82);
}
.controls {
height: 40px;
display: flex;
align-items: center;
gap: 4px;
color: var(--ink-2);
}
.control {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 40px;
color: var(--ink-2);
transition: color var(--t-fast) var(--ease-in);
}
.control.play { width: 44px; margin-left: -12px; }
.controls.is-inert .control,
.controls.is-inert .time { color: var(--ink-4); }
.controls.is-inert .control { pointer-events: none; }
.control:hover { color: var(--ink); }
.control[aria-pressed="true"] { color: var(--ink); }
.control .icon { display: block; }
.control.play .icon-pause,
.control.play.is-playing .icon-play { display: none; }
.control.play.is-playing .icon-pause { display: block; }
.control.mute .icon-muted,
.control.mute[aria-pressed="true"] .icon-sound { display: none; }
.control.mute[aria-pressed="true"] .icon-muted { display: block; }
.time {
flex: none;
color: var(--ink-2);
padding: 0 8px 0 0;
white-space: nowrap;
}
.time-now { display: inline-block; min-width: 4ch; text-align: right; }
.time-total { display: inline-block; min-width: 4ch; }
.time-sep { color: var(--ink-4); }
.rail {
position: relative;
flex: 1;
min-width: 0;
height: 24px;
cursor: pointer;
touch-action: none;
}
.rail:focus-visible { outline-offset: 0; }
.rail-track {
position: absolute;
left: 0;
right: 0;
top: 11px;
height: 2px;
display: flex;
gap: 3px;
}
.chapter {
flex: 1 1 0;
height: 2px;
background: var(--line);
transition: background-color var(--t-chip) var(--ease-in), opacity var(--t-arrive) var(--ease-in);
border-radius: 1px;
}
.chapter.is-ready { background: var(--ink); }
.chapter.is-failed { background: var(--oxide); }
.chapter.is-arriving { opacity: 0; }
.chapter.stub {
background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 5px);
}
.playhead {
position: absolute;
top: 6px;
left: 0;
width: 1px;
height: 12px;
background: var(--ink);
opacity: 0;
transition: opacity var(--t-chip) var(--ease-in);
will-change: transform;
}
.playhead.is-visible { opacity: 1; }
.rail-tip {
position: absolute;
bottom: 26px;
left: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 9px;
max-width: min(300px, 60vw);
padding: 7px 11px;
border-radius: 6px;
background: var(--ink);
color: var(--paper);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
pointer-events: none;
z-index: 3;
transform: translateX(-50%);
}
.rail-tip-num,
.rail-tip-time { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.rail-tip-text {
font-family: var(--sans);
font-size: 12px;
line-height: 17px;
font-weight: 450;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.under-frame {
min-height: 0;
display: flex;
justify-content: flex-end;
gap: 20px;
}
.under-frame .text-link { padding: 4px 0; }
.film:fullscreen {
background: var(--film);
display: block;
}
.film:fullscreen .frame {
position: absolute;
inset: 0;
aspect-ratio: auto;
border-radius: 0;
box-shadow: none;
}
:root[data-format="portrait"] {
--video-aspect: 9 / 16;
--portrait-frame-h: min(70vh, calc(100dvh - var(--bar-h) - 240px));
--portrait-frame-w: min(100%, calc(var(--portrait-frame-h) * var(--video-aspect)));
}
:root[data-format="portrait"] .frame {
width: var(--portrait-frame-w);
margin-inline: auto;
}
:root[data-format="portrait"] .controls,
:root[data-format="portrait"] .under-frame {
width: min(100%, max(var(--portrait-frame-w), 420px));
margin-inline: auto;
}
:root[data-format="portrait"] .under-frame { margin-top: 0; }
:root[data-format="portrait"] .film:fullscreen .frame,
:root[data-format="portrait"] .film:fullscreen .controls { width: auto; }
.film:fullscreen .controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 16px;
background: rgba(20, 18, 16, 0.82);
color: var(--cream);
transition: opacity var(--t-chip) var(--ease-in);
}
.film:fullscreen .control,
.film:fullscreen .time { color: var(--cream); }
.film:fullscreen .chapter { background: rgba(239, 232, 218, 0.3); }
.film:fullscreen .chapter.is-ready { background: var(--cream); }
.film:fullscreen .playhead { background: var(--cream); }
.film:fullscreen.is-idle .controls { opacity: 0; }
.film:fullscreen .under-frame { display: none; }
.script {
grid-column: 3;
position: relative;
min-width: 0;
min-height: 0;
}
.script-scroll {
position: absolute;
inset: 0;
overflow-y: auto;
padding: 24px 0;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.script-scroll:focus-visible { outline-offset: -2px; }
.script-list {
list-style: none;
margin: 0;
padding: 0;
padding-inline-start: 16px;
position: relative;
}
.gutter-bar {
position: absolute;
inset-inline-start: 0;
top: 0;
width: 2px;
height: 100px;
background: var(--ink);
transform-origin: 0 0;
opacity: 0;
transition: transform var(--t-chip) var(--ease-in), opacity var(--t-chip) var(--ease-in);
will-change: transform;
}
.gutter-bar.is-visible { opacity: 1; }
.scene { padding-bottom: 24px; }
.scene:last-child { padding-bottom: 0; }
.scene.is-arriving {
animation: arrive var(--t-arrive) var(--ease-in) both;
animation-delay: var(--stagger, 0ms);
}
@keyframes arrive {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.scene-heading {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 8px;
width: 100%;
color: var(--ink);
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 15px;
line-height: 20px;
font-weight: 500;
transition: color var(--t-fast) var(--ease-in);
}
.scene-heading:hover .scene-title { color: var(--ink-2); }
.scene-number { color: var(--ink-3); }
.scene-title { min-width: 0; overflow-wrap: anywhere; }
.scene-heading .status-word { color: var(--ink-3); }
.scene-heading .status-word.is-failed { color: var(--oxide); }
.beat {
margin: 8px 0 0;
font-family: var(--serif);
font-optical-sizing: auto;
font-size: 17px;
line-height: 26px;
font-weight: 400;
color: var(--ink);
overflow-wrap: anywhere;
text-wrap: pretty;
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 8 4 4;
transition: color var(--t-fast) var(--ease-in);
}
.script.is-tall .beat { line-height: 1.7; }
.script.is-playing .beat { color: var(--ink-2); }
.script.is-playing .beat.is-spoken { color: var(--ink); }
.follow {
position: absolute;
right: 0;
bottom: 8px;
padding: 4px 8px;
border-radius: 4px;
background: var(--ink);
color: var(--paper);
font: 500 12px/16px var(--mono);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
}
.follow.is-shown { opacity: 1; visibility: visible; pointer-events: auto; }
@container column (max-width: 799px) {
.spread {
grid-template-columns: minmax(0, 1fr);
row-gap: 16px;
}
.film { grid-column: 1; }
.script { grid-column: 1; height: 240px; }
}
.scrim {
position: fixed;
inset: 0;
z-index: 20;
background: var(--scrim);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-sheet) var(--ease-in), visibility var(--t-sheet);
}
.scrim.is-visible { opacity: 1; visibility: visible; }
.sheet {
position: fixed;
top: 0;
bottom: 0;
z-index: 30;
display: flex;
flex-direction: column;
background: var(--paper);
box-shadow: var(--sheet-shadow);
transition: transform var(--t-sheet) var(--ease-in);
will-change: transform;
}
.sheet.history {
left: 0;
width: var(--sheet-history-w);
transform: translateX(-100%);
}
.sheet.inspect {
right: 0;
width: var(--sheet-inspect-w);
transform: translateX(100%);
}
.sheet.is-open { transform: none; }
.sheet.inspect.is-docked {
z-index: 6;
top: 0;
box-shadow: -1px 0 0 var(--line);
transition: none;
}
.sheet-header {
flex: none;
height: var(--bar-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
box-shadow: inset 0 -1px 0 var(--line);
}
.sheet-title {
margin: 0;
font: 500 14px/20px var(--sans);
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sheet-title.mono { font: 400 12px/16px var(--mono); color: var(--ink-2); }
.sheet-close {
flex: none;
height: 24px;
padding: 0 6px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--line-2);
font: 400 12px/16px var(--mono);
color: var(--ink-3);
transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}
.sheet-close:hover { color: var(--ink); background: var(--paper-2); }
.sheet-close .back { display: none; }
.sheet-filter {
flex: none;
padding: 12px 20px;
box-shadow: inset 0 -1px 0 var(--line);
}
.filter {
width: 100%;
height: 28px;
font: 400 14px/20px var(--sans);
color: var(--ink);
-webkit-appearance: none;
appearance: none;
}
.filter::placeholder { color: var(--ink-3); opacity: 1; }
.filter::-webkit-search-cancel-button { -webkit-appearance: none; }
.history-list {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
padding: 0 20px;
}
.history-list .row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
row-gap: 2px;
padding: 12px 0;
}
.history-list .row-question {
grid-column: 1 / -1;
font-size: 15px;
line-height: 20px;
white-space: normal;
text-wrap: pretty;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.history-list .row-meta {
grid-column: 1;
min-width: 0;
margin-left: 0;
white-space: normal;
}
.history-list .status-word { grid-column: 2; grid-row: 2; }
.history-empty,
.calls-empty {
margin: 0;
padding: 16px 20px;
font: 400 13px/18px var(--sans);
color: var(--ink-3);
}
.sheet-footer {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 52px;
padding: 8px 20px;
box-shadow: inset 0 1px 0 var(--line);
}
.switch {
display: inline-flex;
align-items: center;
gap: 8px;
font: 400 13px/18px var(--sans);
color: var(--ink-2);
cursor: pointer;
}
.switch input {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--ink);
}
.sheet-scroll {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-2) transparent;
padding: 16px 20px 32px;
}
.gantt { position: relative; }
.gantt-rows {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.gantt-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 44px 56px 72px;
align-items: center;
column-gap: 12px;
width: 100%;
height: 24px;
color: var(--ink-2);
font: 400 13px/18px var(--sans);
font-variant-numeric: tabular-nums;
border-radius: 4px;
transition: background-color var(--t-fast) var(--ease-in);
}
.gantt-row:hover { background: var(--paper-2); }
.gantt-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.gantt-row.is-failed .gantt-word,
.gantt-row.is-failed .gantt-label { color: var(--oxide); }
.gantt-label { padding-left: 6px; }
.gantt-track {
position: relative;
height: 24px;
}
.gantt-bar {
position: absolute;
top: 9px;
height: 6px;
border-radius: 1px;
background: var(--ink);
min-width: 2px;
left: 0;
width: 0;
}
.gantt-bar.is-running { background: var(--ink-2); }
.gantt-bar.is-failed { background: var(--oxide); }
.gantt-bar.is-interrupted { background: var(--ink-4); }
.gantt-num { color: var(--ink-3); text-align: right; }
.gantt-word { color: var(--ink-3); font: 400 12px/16px var(--mono); text-align: right; padding-right: 6px; }
.narration-summary {
margin: 16px 0 0;
font: 400 13px/18px var(--sans);
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.narration-summary:empty { display: none; }
.calls { margin-top: 16px; }
.call-list {
list-style: none;
margin: 0;
padding: 0;
}
.call-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 56px 64px;
align-items: center;
column-gap: 12px;
width: 100%;
height: 32px;
padding: 0 6px;
border-radius: 4px;
box-shadow: inset 0 -1px 0 var(--line);
color: var(--ink-2);
font: 400 13px/18px var(--sans);
font-variant-numeric: tabular-nums;
transition: background-color var(--t-fast) var(--ease-in);
}
.call-row:hover { background: var(--paper-2); }
.call-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.call-row .call-num { color: var(--ink-3); text-align: right; }
.call-row.is-failed .call-label { color: var(--oxide); }
.call-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.detail { margin-top: 24px; }
.tabs {
display: flex;
gap: 20px;
box-shadow: inset 0 -1px 0 var(--line);
}
.tab {
font: 500 13px/18px var(--sans);
color: var(--ink-3);
padding: 6px 0 8px;
position: relative;
transition: color var(--t-fast) var(--ease-in);
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--ink);
}
.panel { padding-top: 12px; }
.panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.panel-title {
font: 500 13px/18px var(--sans);
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overview {
margin: 0;
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
column-gap: 12px;
row-gap: 0;
}
.overview:empty,
.json:empty,
.artifact-list:empty { display: none; }
.overview dt,
.overview dd {
margin: 0;
padding: 6px 0;
box-shadow: inset 0 -1px 0 var(--line);
font: 400 13px/18px var(--sans);
}
.overview dt { color: var(--ink-3); }
.overview dd { color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.overview dd.is-oxide { color: var(--oxide); }
.json {
margin: 0;
padding: 12px;
border-radius: 4px;
background: var(--paper-2);
color: var(--ink);
font-family: var(--mono);
font-size: 12px;
line-height: 18px;
white-space: pre-wrap;
overflow-wrap: anywhere;
tab-size: 2;
}
.artifact-list {
list-style: none;
margin: 0;
padding: 0;
}
.artifact {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
box-shadow: inset 0 -1px 0 var(--line);
color: var(--ink);
text-decoration: none;
font: 400 13px/18px var(--sans);
transition: color var(--t-fast) var(--ease-in);
}
.artifact:hover { color: var(--ink-2); }
.artifact .artifact-path { color: var(--ink-3); font: 400 12px/16px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact .artifact-label { flex: none; }
.shortcuts {
padding: 24px;
border: 0;
border-radius: 4px;
background: var(--paper);
color: var(--ink);
box-shadow: var(--sheet-shadow);
width: min(360px, calc(100vw - 32px));
}
.shortcuts::backdrop { background: var(--scrim); }
.key-list {
margin: 16px 0 0;
display: grid;
row-gap: 8px;
}
.key-list div {
display: grid;
grid-template-columns: 96px 1fr;
column-gap: 16px;
align-items: baseline;
}
.key-list dt { font: 400 12px/16px var(--mono); color: var(--ink-2); }
.key-list dd { margin: 0; font: 400 13px/18px var(--sans); color: var(--ink); }
.key-list kbd { padding: 1px 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.shortcuts form { margin-top: 20px; }
@media (max-width: 1279px) {
.page.is-docked .bar,
.page.is-docked .main { padding-right: var(--gutter); }
}
@media (max-width: 760px) {
:root { --bar-h: 48px; }
.composer { padding-top: calc(30vh - var(--bar-h)); }
.spread {
grid-template-columns: minmax(0, 1fr);
row-gap: 24px;
}
.film {
grid-column: 1;
position: sticky;
top: var(--bar-h);
z-index: 3;
background: var(--paper);
padding-bottom: 4px;
}
:root[data-format="portrait"] {
--portrait-frame-h: min(70vh, calc(100dvh - var(--bar-h) - 150px));
}
.script {
grid-column: 1;
height: auto;
max-width: 620px;
}
.script-scroll {
position: static;
padding: 0;
overflow: visible;
mask-image: none;
-webkit-mask-image: none;
}
.beat { font-size: 18px; line-height: 28px; }
.follow { position: fixed; bottom: 16px; right: 16px; }
.running-row {
flex-wrap: wrap;
align-items: flex-start;
}
.running { flex-basis: 100%; }
.elapsed { text-align: left; }
.rail { height: 44px; }
.rail-track { top: 21px; }
.playhead { top: 16px; }
.control { width: 44px; height: 44px; }
.controls { height: 44px; }
.segmented span { padding: 13px 2px; }
.bar-link,
.text-link,
.under-frame .text-link {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0;
}
.panel-head { align-items: center; }
.row { min-height: 44px; }
.run { padding-bottom: 32px; }
.recently .row-list { grid-template-columns: minmax(0, 1fr) auto; }
.recently .row {
grid-template-rows: auto auto;
row-gap: 2px;
padding: 12px 0;
}
.recently .row-question {
grid-column: 1 / -1;
font-size: 15px;
line-height: 20px;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.recently .row-meta {
grid-column: 1;
min-width: 0;
margin-left: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.recently .status-word { grid-column: 2; grid-row: 2; }
.sheet.history,
.sheet.inspect { width: 100vw; }
.sheet-close .esc { display: none; }
.sheet-close .back { display: inline; }
.sheet-close { box-shadow: none; font: 500 14px/20px var(--sans); color: var(--ink-2); }
.gantt-row { grid-template-columns: 56px minmax(0, 1fr) 40px 56px 64px; column-gap: 8px; }
}
@media (max-width: 480px) {
:root { --gutter: 16px; }
.field { font-size: 22px; line-height: 30px; }
.field-row { flex-wrap: wrap; }
.explain { width: 100%; justify-content: center; margin-top: 12px; }
.explain kbd { display: none; }
.composer-row { flex-wrap: wrap; }
.composer-right { width: 100%; justify-content: space-between; }
.question.q-40 { font-size: 26px; line-height: 32px; }
.question.q-28 { font-size: 21px; line-height: 28px; }
.question.q-19 { font-size: 17px; line-height: 24px; }
.beat { font-size: 16px; line-height: 24px; }
.control.mute,
.control.captions { display: none; }
.control.play { margin-left: -14px; }
.time { padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 120ms !important;
animation-duration: 120ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
}
.sheet { transition: opacity 120ms var(--ease-in) !important; transform: none; opacity: 0; }
.sheet.is-open { opacity: 1; }
.scene.is-arriving { animation-name: arrive-still; }
@keyframes arrive-still {
from { opacity: 0; }
to { opacity: 1; }
}
.buffering-ring::before {
animation: buffering-spin 1.6s linear infinite !important;
}
}
.sign-in-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px #0002; }
.sign-in-dialog::backdrop { background: #0006; }
.sign-in-dialog[open] { animation: create-dialog-enter 180ms var(--create-ease) both; }
.operator-auth { display: grid; padding: 28px; }
.operator-auth h2 { margin: 0; font: 600 22px/1.25 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.sign-in-lede { margin: 8px 0 0; font: 15px/1.5 var(--sans); color: var(--ink-2); }
.sign-in-label { margin-top: 22px; font: 500 13px/1.5 var(--sans); color: var(--ink-2); }
.sign-in-input { margin-top: 6px; width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); letter-spacing: .04em; }
.sign-in-input:focus { outline: none; border-color: var(--ink-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent); }
.sign-in-input[aria-invalid="true"] { border-color: var(--oxide); }
.sign-in-error { margin: 6px 0 0; font: 13px/20px var(--sans); color: var(--oxide); }
.sign-in-error:empty { display: none; }
.sign-in-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sign-in-cancel, .sign-in-submit { min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font: 600 15px/1 var(--sans); cursor: pointer; }
.sign-in-cancel { background: transparent; color: var(--ink-2); }
.sign-in-cancel:hover { background: var(--paper-2); color: var(--ink); }
.sign-in-submit { background: var(--ink); color: var(--paper); }
.sign-in-submit:hover { background: var(--ink); opacity: 0.9; }
.sign-in-cancel:disabled, .sign-in-submit:disabled { opacity: .6; cursor: progress; }
.sign-in-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: 13px/1.5 var(--sans); color: var(--ink-3); }
.sign-in-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sign-in-dialog :is(button, a):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 2px; }
@media (max-width: 560px) {
.sign-in-dialog { margin: max(16px, 10dvh) auto auto; }
.operator-auth { padding: 22px 20px 20px; }
.sign-in-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sign-in-dialog[open] { animation: none; }
}
.draining-banner { padding: 1rem; border: 1px solid var(--line-2); background: var(--paper-2); font: 14px/1.5 var(--sans); }
.degraded-chip { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; padding: 0.4rem 0.6rem; background: var(--paper); color: var(--ink); font-size: 0.8rem; }
:root { --bar-h: 78px; --gutter: clamp(22px, 3.9vw, 68px); --col-max: 1600px; --sheet-history-w: 600px; --scrim: rgba(0,0,0,.66); }
html[data-theme="dark"] { --paper: #0c0c0b; --paper-2: #171614; --ink: #eee9df; --ink-2: #b5b0a6; --ink-3: #928d83; --ink-4: #706b62; --line: #292723; --line-2: #4c453a; --film: #10100f; --frame-edge: #36332e; }
body { background: var(--paper); }
.bar { border-bottom: 1px solid var(--line); }
.bar-inner { max-width: none; width: 100%; }
.wordmark { font-size: 30px; line-height: 36px; }
.bar-links { align-items: center; gap: 38px; }
.bar-link { font-size: 16px; }
.composer { max-width: 1100px; padding: 46px 0 40px; }
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.home-intro h1 { margin: 0; font: 400 clamp(38px,3.4vw,52px)/1.04 var(--serif); letter-spacing: -.025em; }
.home-intro p { margin: 12px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.composer-form { width: 100%; }
.composer-box { border: 1px solid var(--line-2); border-radius: 11px; background: color-mix(in srgb, var(--paper-2) 45%, var(--paper)); box-shadow: inset 0 1px 0 #ffffff06; }
.field-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 28px; gap: 14px 22px; }
.field { grid-column: 1; grid-row: 1; font-size: 36px; line-height: 44px; box-shadow: none; min-height: 48px; padding: 0; margin-bottom: 8px; }
.field:focus { box-shadow: none; }
.dictate { grid-column: 2; grid-row: 1; align-self: start; margin: 2px 0 0; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--ink-2) 10%, transparent); }
.dictate:hover { background: color-mix(in srgb, var(--ink-2) 18%, transparent); }
.dictate.is-recording { background: color-mix(in srgb, var(--oxide) 16%, transparent); }
.dictate-dot { top: 8px; right: 8px; }
.upload { grid-column: 1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; cursor: pointer; color: var(--ink-2); font-size: 13px; height: 36px; }
.explain { grid-column: 2; grid-row: 2; justify-self: end; height: 50px; font-size: 17px; padding: 0 20px; border-radius: 6px; margin: 0; }
.home-lede { max-width: 640px; text-wrap: pretty; }
.new-question { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; }
.new-question svg { flex: none; }
.composer-row { margin: 0; border-top: 1px solid var(--line); padding: 15px 28px; justify-content: start; }
.composer-left { display: none; }
.composer-right { gap: 12px; flex-wrap: wrap; }
.setting-label { font: 400 12px/20px var(--sans); color: var(--ink-2); margin-left: 22px; }
.setting-label:first-child { margin-left: 0; }
.segmented { border: 1px solid var(--line); border-radius: 6px; }
.segmented label + label::before { display: none; }
.segmented span { padding: 6px 15px; font-size: 12px; min-width: 58px; text-align: center; }
.segmented input:checked + span { border-radius: 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 10px #bda57c0c; }
.engine { margin: 18px 28px 0; font-size: 12px; }
.recently { max-width: none; margin-top: 52px; position: relative; }
.recently-label { font: 400 21px/26px var(--serif); color: var(--ink-2); margin-bottom: 16px; }
.all-runs { position: absolute; right: 12px; top: 0; margin: 0; }
.recently .row-list { display: block; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.recently .row-list > li { display: block; }
.recently .row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto 74px; gap: 16px; padding: 12px 22px; min-height: 55px; }
.row::before { content: '▷'; width: 29px; height: 29px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--ink); font: 18px var(--sans); }
.row-question { text-align: left; font-size: 12px; font-weight: 450; }
.row-meta { font: 400 12px/20px var(--sans); color: var(--ink-3); }
.row .status-word { text-align: right; margin-left: 0; }
.row-list > li:last-child .row { box-shadow: none; }
.studio-footer { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 30px; padding: 22px var(--gutter); font: 400 11px/20px var(--sans); color: var(--ink-2); }
.footer-themes { display: flex; gap: 24px; }
.footer-themes button { font-size: 24px; }
.title-block { padding-top: 44px; }
.question.q-40, .question.q-28 { font: 400 clamp(32px,3.3vw,52px)/1.14 var(--serif); text-wrap: initial; letter-spacing: -.015em; }
.running-row { margin-top: 20px; padding-bottom: 8px; box-shadow: none; align-items: center; }
.running { font-size: 16px; font-weight: 400; }
.elapsed { display: none; }
.spread { display: grid; grid-template-columns: minmax(290px,28%) minmax(0,1fr); gap: 22px; margin-top: 20px; }
.film, .script { border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--paper-2) 45%,var(--paper)); box-shadow: inset 0 1px 2px #ffffff06; }
.film { grid-column: 2; grid-row: 1; padding: 16px; }
.frame { border-radius: 7px; }
.controls { padding: 14px 0; }
.under-frame { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 24px; min-height: 74px; }
#download-final { border: 1px solid var(--line); border-radius: 6px; padding: 11px 16px; font-size: 14px; color: var(--ink); transition: border-color 140ms ease, background-color 140ms ease; }
#download-final::before { content: '↓'; margin-right: 10px; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { #download-final:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink-2) 6%, transparent); } }
.script { grid-column: 1; grid-row: 1; min-height: 420px; }
.script-header { display: flex; justify-content: space-between; padding: 23px 24px 16px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
#scene-count { font-size: 12px; color: var(--ink-3); }
.script-scroll { inset: 64px 8px 14px 24px; padding: 0 14px 0 0; mask-image: none; -webkit-mask-image: none; }
.script-list { padding: 0; }
.scene, .scene:last-child { padding: 12px 0 15px; border-top: 1px solid var(--line); }
.scene-heading { position: relative; grid-template-columns: 36px minmax(0,1fr) auto; align-items: start; font: 400 13px/20px var(--sans); gap: 12px; text-align: left; }
.scene-number { display: grid; place-items: center; width: 36px; height: 35px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); font: 500 14px var(--sans); }
.scene-heading .status-word { font: 450 10px/17px var(--sans); letter-spacing: .015em; white-space: nowrap; border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; color: var(--ink-3); transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.scene-heading .status-word.is-working { color: var(--ink); border-color: var(--line-2); background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
.scene-duration { grid-column: 2; font: 400 11px/16px var(--mono); color: var(--ink-3); margin-top: -10px; }
.beat { margin: 4px 0 0 48px; font: 400 12px/20px var(--sans); color: var(--ink-3); }
.sheet.history { top: 28px; bottom: 24px; left: 28px; width: min(600px,calc(100vw - 56px)); border: 1px solid var(--line); border-radius: 12px; transform: translateX(calc(-100% - 32px)); background: var(--paper); }
.sheet.history.is-open { transform: none; }
.history .sheet-header { padding: 24px; height: 78px; box-shadow: none; }
.history .sheet-title { font: 400 30px/36px var(--serif); }
.history .sheet-close { height: 28px; font: 400 13px var(--sans); }
.history .sheet-filter { padding: 0 24px 20px; box-shadow: none; }
.history .filter { height: 46px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--paper-2); }
.history-list { padding: 0 14px; }
.history-list .row { grid-template-columns: 34px minmax(0,1fr) 68px; grid-template-rows: auto auto; gap: 4px 16px; padding: 16px 14px; }
.history-list .row::before { grid-column: 1; grid-row: 1/3; align-self: start; width: 32px; height: 32px; }
.history-list .row-question { grid-column: 2; grid-row: 1; font: 400 20px/23px var(--serif); }
.history-list .row-meta { grid-column: 2; grid-row: 2; font-size: 13px; }
.history-list .status-word { grid-column: 3; grid-row: 1/3; align-self: center; }
.history-list .row.is-current, .history-list .row:hover { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.history .sheet-footer { min-height: 60px; margin: 0 14px; padding: 8px 10px; }
@container column (max-width: 799px) {
.spread { grid-template-columns: minmax(0,1fr); }
.film { grid-column: 1; grid-row: 1; }
.script { grid-column: 1; grid-row: 2; height: 380px; min-height: 0; }
}
@media (max-width: 1050px) {
.composer { padding-top: 36px; }
.composer-right { gap: 8px; }
.setting-label { margin-left: 8px; }
.segmented span { padding: 6px 10px; min-width: 0; }
.recently .row { grid-template-columns: 30px minmax(0,1fr) 70px; }
.recently .row-meta { display: none; }
}
@media (max-width: 600px) {
:root { --bar-h: 64px; --gutter: 20px; }
.bar-links { gap: 20px; } .bar-link { font-size: 13px; }
.home-intro { display: block; margin-bottom: 24px; }
.home-intro h1 { font-size: 38px; }
.home-intro p { font-size: 14px; } .desktop-break { display: none; }
.field-row { padding: 20px 16px; gap: 12px; }
.field { font-size: 28px; line-height: 34px; }
.upload { font-size: 11px; padding: 0 8px; } .explain { height: 42px; font-size: 14px; padding: 0 12px; }
.dictate { width: 28px; }
.composer-row { padding: 16px; }
.composer-right { display: grid; grid-template-columns: auto 1fr; width: 100%; gap: 12px; }
.setting-label { margin: 0; } .segmented { justify-self: start; } .segmented span { padding: 6px 14px; }
.engine { margin-left: 2px; font-size: 10px; }
.recently { margin-top: 34px; } .recently .row { padding: 12px; gap: 10px; grid-template-columns: 28px minmax(0,1fr) 54px; }
.row-question { white-space: normal; } .row .status-word { font-size: 10px; }
.studio-footer { flex-wrap: wrap; gap: 16px; padding: 18px 20px; } .footer-themes { gap: 16px; }
.title-block { padding-top: 28px; } .running { font-size: 12px; line-height: 20px; } .running-row { gap: 12px; }
.film { padding: 10px; } .under-frame { min-height: 52px; padding-top: 10px; }
.sheet.history { inset: 10px; width: auto; } .history .sheet-header { padding: 18px; }
.history .sheet-filter { padding: 0 18px 14px; } .history-list { padding: 0 8px; }
.history-list .row { grid-template-columns: 28px minmax(0,1fr) 56px; gap: 5px 10px; padding: 14px 8px; }
.history-list .row-question { font-size: 18px; line-height: 22px; } .history-list .row-meta { font-size: 11px; }
.history-list .row::before { width: 28px; height: 28px; }
.history .sheet-footer { gap: 10px; } .history .segmented span { padding: 6px 10px; }
}
.profile { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink-2); font: 400 16px var(--sans); margin-left: 8px; }
.bar-link:disabled { opacity: .55; cursor: default; }
.row-list > li { position: relative; }
.recently .row { padding-right: 54px; grid-template-columns: 30px minmax(0,1fr) 330px 70px; }
.recently .row-meta { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; margin: 0; text-align: left; }
.row-menu { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1; }
.row-menu[open] { z-index: 3; }
.row-menu summary { display: grid; place-items: center; width: 24px; height: 32px; cursor: pointer; font: 21px var(--sans); color: var(--ink-2); list-style: none; border-radius: 4px; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover { background: var(--paper-2); }
.row-menu-actions { position: absolute; right: 0; top: 32px; min-width: 160px; padding: 6px; display: grid; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: 0 8px 24px #0006; }
.row-menu-actions button { text-align: left; padding: 9px; font: 12px var(--sans); }
.row-menu-actions button:hover { background: var(--paper); }
.row-menu-actions button.is-danger { color: var(--error-ink); }
.recently .row-list { overflow: visible; }
.history-list .row { padding-right: 44px; }
.script-empty { margin: 0; padding: 4px 0 0; max-width: 30ch; font: 400 13px/21px var(--sans); color: var(--ink-3); text-wrap: pretty; }
.script-footer { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; gap: 8px; }
.script-footer .text-button { height: 38px; }
.script-footer .text-button:first-child { flex: 1; }
.script-scroll { bottom: 66px; }
.scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; column-gap: 9px; }
.scene-duration { grid-column: 3; grid-row: 1; margin-top: 2px; }
.scene-heading .status-word { grid-column: 4; grid-row: 1; }
.beat { margin-top: -10px; margin-right: 4px; }
.beat + .beat { margin-top: 4px; }
.scene { min-height: 84px; }
@media (max-width: 1200px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 210px 64px; } .recently .row-meta { gap: 10px; } .scene-heading { grid-template-columns: 32px minmax(0,1fr) auto; } .scene-duration { display: none; } .scene-heading .status-word { grid-column: 3; } }
@media (max-width: 1050px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 64px; } .recently .row-meta { display: none; } }
@media (max-width: 600px) {
.bar-link { gap: 0; justify-content: center; min-width: 36px; min-height: 36px; }
.bar-link > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar-link svg { width: 19px; height: 19px; }
}
@media (max-width: 600px) { .bar-links { gap: 14px; } .profile { width: 30px; height: 30px; margin-left: 0; font-size: 12px; } .recently .row { padding-right: 36px; grid-template-columns: 28px minmax(0,1fr) 48px; } .row-menu { right: 4px; } .history-list .row { padding-right: 30px; } .scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; } .scene-duration { display: block; } .scene-heading .status-word { grid-column: 4; } }
.scene-heading { padding-left: 48px; grid-template-columns: minmax(0,1fr) auto auto; min-height: 22px; }
.scene-number { position: absolute; left: 0; top: 0; }
.scene-duration { grid-column: 2; }
.scene-heading .status-word { grid-column: 3; }
.beat { margin-top: 4px; }
@media (min-width: 601px) and (max-width: 1200px) { .scene-heading { grid-template-columns: minmax(0,1fr) auto; } .scene-heading .status-word { grid-column: 2; } }
.profile { display: grid; place-items: center; }
.recently .row-question { grid-column: 2; grid-row: 1; }
.recently .row-meta { grid-column: 3; grid-row: 1; }
.recently .status-word { grid-column: 4; grid-row: 1; }
@media (max-width: 1050px) { .recently .status-word { grid-column: 3; } }
@media (max-width: 600px) {
.recently .row { grid-template-rows: auto; }
.recently .row-question { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 18px; }
.recently .status-word { grid-column: 3; grid-row: 1; }
.control.mute, .control.captions { display: inline-flex; }
.controls { gap: 4px; } .control { width: 30px; min-width: 30px; } .control.play { margin-left: 0; }
}
.setting-label, .upload { display: inline-flex; align-items: center; gap: 10px; }
.setting-label svg { width: 22px; height: 22px; }
.upload svg { width: 16px; height: 16px; }
.script-scroll { position: absolute; overflow-y: auto; }
.script { max-width: none; }
.film { position: relative; top: auto; z-index: auto; }
.follow { position: absolute; bottom: 60px; right: 20px; }
:root {
--t-sheet: 320ms;
--t-spread: 360ms;
--t-fade: 240ms;
--polish-ease: cubic-bezier(.22, 1, .36, 1);
--motion-press: 90ms;
--motion-fast: 120ms;
--motion-menu: 140ms;
--motion-ease: cubic-bezier(.2, .8, .2, 1);
}
@keyframes surface-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-enter {
from { opacity: 0; transform: translateY(-4px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.composer:not([hidden]) .home-intro,
.composer:not([hidden]) .composer-form { animation: none; }
.composer:not([hidden]) .recently { animation: surface-enter 160ms var(--motion-ease) both; }
.sheet { transition-timing-function: var(--polish-ease); }
.composer-box { position: relative; isolation: isolate; }
.composer-box::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
border-radius: inherit;
border: 1px solid color-mix(in srgb, var(--ink-2) 60%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 7%, transparent);
opacity: 0;
transition: opacity 180ms ease;
}
.composer-box:focus-within::after { opacity: 1; }
.explain, .text-button, .profile, .control, .sheet-close {
transition: transform 160ms var(--polish-ease), color 140ms ease, background-color 140ms ease;
}
:is(.page, .example-dialog) :is(button, summary, a.result-action, a.download) {
-webkit-tap-highlight-color: transparent;
transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
opacity var(--motion-fast) ease, transform var(--motion-press) var(--motion-ease),
scale var(--motion-press) var(--motion-ease);
}
:is(.page, .example-dialog) :where(button, summary, a.result-action, a.download):active:not(:disabled):not([aria-disabled="true"]) { scale: .98; }
:is(.page, .example-dialog) :where(button, summary, a.result-action, a.download):focus-visible { outline: 2px solid var(--sage-strong, var(--ink)); outline-offset: 3px; }
:is(.page, .example-dialog) :where(button:disabled, [aria-disabled="true"]) { scale: 1; }
@keyframes control-menu-enter {
from { opacity: 0; translate: 0 var(--menu-enter-y, -3px); scale: .985; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
:is(.page, .example-dialog) :where(button, summary, a.result-action, a.download, .choice-panel, .choice-panel label, .choice-panel label::after, .choice-picker summary svg) {
transition: none !important;
animation: none !important;
scale: 1 !important;
translate: none !important;
}
}
.explain kbd, .upload svg, #status-retry svg {
display: inline-block;
transition: transform 180ms var(--polish-ease);
}
.segmented span { transition: color 140ms ease, background-color 140ms ease; }
.segmented label:active span { transform: scale(.97); }
.row::before { transition: transform 180ms var(--polish-ease), border-color 140ms ease; }
.row:active::before { transform: scale(.92); }
.row-menu[open] .row-menu-actions {
transform-origin: top right;
animation: menu-enter 180ms var(--polish-ease) both;
}
.scene { position: relative; isolation: isolate; }
.scene::before {
content: "";
position: absolute;
inset: 0 -8px;
border-radius: 6px;
background: color-mix(in srgb, var(--ink-2) 7%, transparent);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity 220ms ease;
}
.scene.is-current::before { opacity: 1; }
.scene.is-current .scene-number { border-color: var(--ink-3); }
.frame-progress {
position: relative;
width: min(180px, 46cqi);
height: 7px;
margin-top: 6px;
color: color-mix(in srgb, var(--cream) 46%, transparent);
}
.frame-progress span {
position: absolute;
inset: 3px 0 auto 0;
height: 1px;
background: currentColor;
transform-origin: left center;
animation: ink-draw 3400ms var(--polish-ease) infinite;
}
.frame-progress::after {
content: "";
position: absolute;
top: 1px;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--cream);
opacity: 0;
animation: ink-nib 3400ms var(--polish-ease) infinite;
}
@keyframes ink-draw {
0% { transform: scaleX(0); }
46% { transform: scaleX(1); }
76% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
}
@keyframes ink-nib {
0% { left: 0; opacity: 0; }
8% { opacity: 1; }
46% { left: calc(100% - 5px); opacity: 1; }
62% { left: calc(100% - 5px); opacity: 0; }
100% { left: calc(100% - 5px); opacity: 0; }
}
.controls.is-inert .control.mute { pointer-events: auto; color: var(--ink-2); }
.control, .row-menu summary { border-radius: 5px; }
.text-button.is-copied { color: #a4ba99; }
@media (hover: hover) and (pointer: fine) {
.explain:hover:not(:disabled) { transform: translateY(-1px); }
.explain:hover kbd { transform: translateX(2px); }
.upload:hover svg { transform: translateY(-1px); }
#status-retry:hover:not(:disabled) svg { transform: rotate(-40deg); }
.row:hover::before { transform: scale(1.06); border-color: var(--ink-3); }
.control:hover { background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.rail:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 2px; border-radius: 4px; }
.scene, .scene:last-child { min-height: 0; padding: 14px 0; }
.scene-heading { min-height: 35px; align-items: center; }
.scene-heading .status-word.is-ready { color: #31845c; border: 0; background: color-mix(in srgb, #31845c 12%, transparent); border-radius: 50%; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; font: 700 14px/1 var(--sans); }
.scene-heading .status-word.is-failed { color: var(--oxide); border-color: color-mix(in srgb, var(--oxide) 35%, transparent); }
.scene-failure { display: flex; align-items: center; gap: 12px; margin: 5px 0 0 48px; color: var(--oxide); font: 400 11px/17px var(--sans); }
.scene-failure-copy { flex: 1; }
.scene-retry { border: 1px solid color-mix(in srgb, var(--oxide) 40%, transparent); padding: 6px 10px; border-radius: 5px; color: var(--oxide); font-weight: 600; }
.scene-card :focus-visible, .scene-chips :focus-visible, .scene-retry:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }

html:root {
--signal: #f04420; --signal-text: #c13213;
--sage: var(--signal); --sage-strong: var(--signal-text);
--paper: #fff; --paper-2: #f7f7f4;
--ink: #171a19; --ink-2: #4f5351; --ink-3: #6e726f; --ink-4: #959b97;
--line: #e5e7e3; --line-2: #d1d5cf; --selection: #f0442033;
--error: #b8233a; --error-ink: #a01f33;
--frame-edge: #171a191a;
--landing-bar-glass: color-mix(in srgb, var(--paper) 90%, transparent);
--landing-shadow-soft: #171a190a; --landing-shadow-deep: #171a1924;
--glass-tint-edge: color-mix(in srgb, var(--paper) 14%, transparent); --glass-tint-core: color-mix(in srgb, var(--paper) 38%, transparent);
--glass-blur: 10px; --glass-bright: 1.05; --glass-sheen: #ffffffa6; --glass-spec: #ffffffe6;
--glass-rim-hi: #ffffff; --glass-rim-side: #ffffff6b; --glass-rim-lo: #ffffffd9; --glass-outline: #171a1929;
--glass-inner-hi: #ffffff; --glass-inner-lo: #171a191f; --glass-glow: #ffffffcc;
--glass-shadow-near: #171a191a; --glass-shadow-mid: #171a1921; --glass-shadow-far: #171a1942; --glass-night-light: .45;
--landing-select-arrow: url('/assets/landing/select-chevron.6824b87738cb.svg');
--landing-select-disclosure: url('/assets/landing/select-disclosure.30d1f281c019.svg');
--landing-art-filter: none; --landing-art-blend: normal;
--film-paper: #fbfbfb; --film-ink: #171a19; --film-ink-2: #4f5351; --film-line: #e3e4df;
--board-paper: #1e2429; --board-ink: #f3f1ea;
--pro-amber: #ffb23f;
--pro-unlit: #d1d5cf; --pro-unlit-on: #ffffff30;
--pro-ember: linear-gradient(160deg, #ffd27a 0%, #ffa033 38%, #f04420 100%);
--pro-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.6.8 2.7 9.2h4.6l-1 6 6.9-8.5H8.6L9.6.8Z'/%3E%3C/svg%3E");
--hand: "Kalam", "Comic Sans MS", "Chalkboard SE", cursive;
--sans: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
--serif: var(--sans);
--mono: var(--data);
}
html[data-theme="dark"] {
--paper: #171a19; --paper-2: #222725; --ink: #fafbf8; --ink-2: #c1c9c3;
--ink-3: #a5b0a8; --ink-4: #828f86; --line: #343e37; --line-2: #59665d;
--error: #ff7b8c; --error-ink: #ffa5b0;
--pro-unlit: #3f4843; --pro-unlit-on: #171a1933;
--landing-bar-glass: color-mix(in srgb, var(--paper) 90%, transparent);
--landing-shadow-soft: #00000014; --landing-shadow-deep: #00000040;
--glass-tint-edge: color-mix(in srgb, var(--paper) 26%, transparent); --glass-tint-core: color-mix(in srgb, var(--paper) 58%, transparent);
--glass-blur: 16px; --glass-bright: .88; --glass-sheen: #ffffff1f; --glass-spec: #ffffff4d;
--glass-rim-hi: #ffffff80; --glass-rim-side: #ffffff17; --glass-rim-lo: #ffffff3d; --glass-outline: #0000008c;
--glass-inner-hi: #ffffff47; --glass-inner-lo: #00000047; --glass-glow: #ffffff1f;
--glass-shadow-near: #0000004d; --glass-shadow-mid: #00000059; --glass-shadow-far: #0000008c; --glass-night-light: 1;
--landing-select-arrow: url('/assets/landing/select-chevron-dark.a520ed2a5004.svg');
--landing-select-disclosure: url('/assets/landing/select-disclosure-dark.ca8f653ec85e.svg');
--signal-text: #ff977d;
--oxide: #f1ab96;
--landing-art-filter: invert(1) hue-rotate(180deg); --landing-art-blend: screen;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--paper: #171a19; --paper-2: #222725; --ink: #fafbf8; --ink-2: #c1c9c3;
--ink-3: #a5b0a8; --ink-4: #828f86; --line: #343e37; --line-2: #59665d;
--error: #ff7b8c; --error-ink: #ffa5b0;
--pro-unlit: #3f4843; --pro-unlit-on: #171a1933;
--landing-bar-glass: color-mix(in srgb, var(--paper) 90%, transparent);
--landing-shadow-soft: #00000014; --landing-shadow-deep: #00000040;
--glass-tint-edge: color-mix(in srgb, var(--paper) 26%, transparent); --glass-tint-core: color-mix(in srgb, var(--paper) 58%, transparent);
--glass-blur: 16px; --glass-bright: .88; --glass-sheen: #ffffff1f; --glass-spec: #ffffff4d;
--glass-rim-hi: #ffffff80; --glass-rim-side: #ffffff17; --glass-rim-lo: #ffffff3d; --glass-outline: #0000008c;
--glass-inner-hi: #ffffff47; --glass-inner-lo: #00000047; --glass-glow: #ffffff1f;
--glass-shadow-near: #0000004d; --glass-shadow-mid: #00000059; --glass-shadow-far: #0000008c; --glass-night-light: 1;
--landing-select-arrow: url('/assets/landing/select-chevron-dark.a520ed2a5004.svg');
--landing-select-disclosure: url('/assets/landing/select-disclosure-dark.ca8f653ec85e.svg');
--signal-text: #ff977d;
--oxide: #f1ab96;
--landing-art-filter: invert(1) hue-rotate(180deg); --landing-art-blend: screen;
}
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(#home:not([hidden])) { scroll-padding-top: 96px; }
:root {
--sage: #829375;
--sage-strong: #576b4d;
--gutter: clamp(24px, 4.65vw, 76px);
--col-max: 1440px;
--bar-h: 118px;
}
html:not([data-theme="dark"]) { color-scheme: light; }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) { color-scheme: dark; }
html:not([data-theme]) .composer-box { background: var(--paper); }
}
.bar { position: relative; border-bottom: 0; }
.bar.is-scrolled { box-shadow: none; }
.bar-inner { max-width: var(--col-max); }
.wordmark {
display: inline-flex;
align-items: center;
padding: 5px 0;
color: var(--signal, var(--ink));
}
.wordmark-logo {
display: block;
width: 100px;
aspect-ratio: 2087 / 753;
background: currentColor;
mask-image: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp');
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
.bar-links { gap: 34px; }
.bar-link { font: 400 16px/1.4 var(--sans); color: var(--ink); }
.profile {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: var(--paper-2);
color: var(--ink);
font: 400 23px/1 var(--serif);
}
.page[data-view="composer"] { --bar-h: 88px; --col-max: 1280px; --gutter: clamp(22px, 4vw, 64px); }
.page[data-view="composer"] .wordmark { color: var(--signal); }
.page[data-view="composer"] .bar .wordmark-logo { width: 94px; }
.page[data-view="composer"] .bar-links { margin-left: 18px; gap: 14px; }
.page[data-view="composer"] .profile { width: 32px; height: 32px; font: 500 14px/1 var(--sans); }
.page[data-view="composer"] .bar-link { font-size: 12px; }
.page[data-view="home"] > .studio-footer { display: none; }
@media (max-width: 860px) {
.page[data-view="composer"] .bar-links { margin-left: 12px; }
}
@media (max-width: 640px) {
.page[data-view="composer"] { --bar-h: 106px; --gutter: 22px; }
.page[data-view="composer"] .bar-inner { flex-wrap: wrap; gap: 2px 12px; }
.page[data-view="composer"] .bar .wordmark-logo { width: 80px; }
.page[data-view="composer"] .bar-links { margin-left: 0; }
.page[data-view="composer"] .profile { width: 28px; height: 28px; }
.page[data-view="composer"] :is(#operator-lock, #operator-unlock) span { display: none; }
}
.create .recently .row-list { border: 0; border-radius: 0; }
.example-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); overflow: auto; }
.example-dialog::backdrop { background: #101312c9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.example-dialog { box-shadow: 0 2px 4px #0000001f, 0 40px 90px -24px #000000a6; }
::view-transition-group(ivan-film) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.2, .9, .1, 1); }
::view-transition-old(ivan-film), ::view-transition-new(ivan-film) { height: 100%; object-fit: cover; animation-duration: 340ms; }
@supports not (view-transition-name: none) {
.example-dialog[open] { animation: dialog-in 360ms cubic-bezier(.16, 1, .3, 1); }
@keyframes dialog-in { from { opacity: 0; scale: .97; } }
}
.example-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.example-dialog h2 { margin: 0; font: 700 23px/1.3 var(--sans); letter-spacing: -.025em; }
#example-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
#example-close:hover { background: var(--paper-2); }
#example-video { display: block; width: 100%; aspect-ratio: 16/9; background: #fff; }
.example-dialog-footer { padding: 16px 22px; }
.example-credit { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.example-credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.example-credit a:hover { color: var(--ink-2); }
#example-error { margin: 18px 22px; color: var(--oxide); }
.example-dialog .text-link { font-size: 14px; color: var(--sage-strong); }
:is(.choice-picker > summary, .example-card, .composer-box button, .wordmark, .profile, .example-dialog button, .landing-nav a, .landing-header-cta):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 4px; }
@media (max-width: 640px) {
.example-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 9px; }
.example-dialog-header { padding: 12px 14px; gap: 10px; }
.example-dialog h2 { font-size: 20px; }
.example-dialog-footer { padding: 14px 16px; }
}
.composer-form { width: 100%; position: relative; z-index: 2; grid-column: 1; min-width: 0; container: composer / inline-size; }
.composer-box {
display: flex; flex-direction: column; height: 208px; min-height: 0; padding: 0; gap: 0;
border: 1px solid var(--line-2); border-radius: 13px;
background: var(--paper); box-shadow: none;
}
.composer-box::after { border-color: var(--sage); box-shadow: 0 0 0 3px #82937512; }
.composer-box:focus-within::after { opacity: .65; }
.composer-content { position: relative; flex: 1; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.create .field { display: block; flex: 1; width: 100%; height: 0; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; resize: none; overflow-y: auto; field-sizing: fixed; font: 400 20px/1.4 var(--sans); letter-spacing: -.015em; box-shadow: none; background: transparent; caret-color: var(--ink); }
.create .field::placeholder { color: var(--ink-3); opacity: 1; }
.create .field:focus { box-shadow: none; }
.create .count { position: absolute; bottom: 2px; right: 20px; font: 11px var(--sans); }
.composer-toolbar, .composer-input-actions, .composer-settings { display: flex; align-items: center; }
.composer-toolbar { flex: none; min-height: 64px; padding: 9px 14px; border-top: 1px solid var(--line); gap: 12px; }
.composer-input-actions { gap: 4px; }
.create .upload, .create .dictate { display: flex; align-items: center; justify-content: center; padding: 0; width: 44px; height: 44px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); box-shadow: none; }
.create .upload:hover, .create .dictate:hover { background: var(--paper-2); }
.create .upload svg, .create .dictate svg { width: 21px; height: 21px; }
.composer-settings { gap: 4px; margin-left: auto; }
.choice-picker { position: relative; }
.choice-picker > summary {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
padding: 0 15px;
border: 1px solid var(--line-2);
border-radius: 10px;
font: 400 14px/1.4 var(--sans);
color: var(--ink);
cursor: pointer;
list-style: none;
white-space: nowrap;
transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, scale var(--motion-press) var(--motion-ease);
}
.choice-picker > summary::-webkit-details-marker { display: none; }
.choice-picker > summary svg { flex: none; }
.choice-picker > summary svg:last-child:not(:first-child) { width: 15px; height: 15px; transition: rotate var(--motion-menu) var(--motion-ease); }
.choice-picker[open] > summary svg:last-child:not(:first-child) { rotate: 180deg; }
.choice-picker[open] > summary, .choice-picker > summary:hover { background: var(--paper-2); border-color: var(--sage); }
.more-options > summary { width: 48px; padding: 0; }
.choice-panel {
position: absolute;
z-index: 10;
top: calc(100% + 10px);
right: 0;
min-width: 168px;
margin: 0;
padding: 6px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--paper);
box-shadow: 0 4px 10px #17221908, 0 16px 40px #17221914;
transform-origin: top right;
max-height: calc(100dvh - 32px);
overflow-y: auto;
}
.choice-picker.opens-up > .choice-panel { top: auto; bottom: calc(100% + 10px); transform-origin: bottom right; --menu-enter-y: 3px; }
.choice-panel > label {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
font: 400 14px/20px var(--sans);
color: var(--ink-2);
transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.choice-panel input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice-panel > label::after {
content: "";
flex: none;
width: 5px;
height: 9px;
margin-left: auto;
margin-right: 3px;
border: solid currentColor;
border-width: 0 1.7px 1.7px 0;
transform: rotate(45deg);
opacity: 0;
scale: .8;
transition: opacity var(--motion-fast) ease, scale var(--motion-fast) var(--motion-ease);
}
.choice-panel > label:has(input:checked) { background: color-mix(in srgb, var(--sage) 12%, transparent); color: var(--ink); font-weight: 500; }
.choice-panel label:has(input:checked)::after { opacity: 1; scale: 1; color: var(--sage-strong); }
.choice-panel label:has(input:focus-visible) { outline: 2px solid var(--sage-strong); outline-offset: -2px; }
.options-panel { width: 296px; padding: 16px; }
.language-choices {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 2px 6px;
width: min(420px, calc(100vw - 32px));
max-height: min(60dvh, 420px);
}
.language-choices > legend { grid-column: 1 / -1; }
.choice-filter {
position: sticky;
top: -6px;
z-index: 1;
grid-column: 1 / -1;
min-width: 0;
margin: -6px -6px 2px;
padding: 9px 12px;
border: 0;
border-bottom: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
font: 400 13px/20px var(--sans);
}
.choice-filter::placeholder { color: var(--ink-3); }
.choice-filter:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: -2px; }
.choice-note {
grid-column: 1 / -1;
margin: 6px 12px 2px;
color: var(--ink-3);
font: 400 11px/1.55 var(--sans);
}
.choice-caption {
grid-column: 1 / -1;
margin: 8px 12px 2px;
color: var(--ink-3);
font: 500 10px/1.4 var(--sans);
letter-spacing: .09em;
text-transform: uppercase;
}
.choice-caption:first-of-type { margin-top: 4px; }
.language-choices > label { min-height: 40px; padding: 8px 10px; gap: 8px; }
.choice-native { flex: none; }
.choice-english { color: var(--ink-3); font-size: 12px; }
.voice-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.voice-choices + .voice-choices { margin-top: 16px; }
.voice-choices legend { margin-bottom: 10px; padding: 0; font: 600 12px/18px var(--sans); letter-spacing: .01em; color: var(--ink-2); }
.voice-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.voice-segments label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--ink-2); font: 500 14px/20px var(--sans); cursor: pointer; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.voice-segments label:has(input:checked) { background: var(--paper); color: var(--ink); border-color: color-mix(in srgb, var(--line) 65%, transparent); box-shadow: 0 1px 3px #1722190d; }
.voice-segments label[hidden] { display: none; }
.voice-segments label[data-podcast-option] { grid-column: 1 / -1; }
.voice-note { margin: 8px 0 0; color: var(--ink-2); font: 400 12px/17px var(--sans); }
.voice-note[hidden] { display: none; }
@media (hover: hover) {
.choice-panel > label:hover { background: color-mix(in srgb, var(--sage) 8%, transparent); color: var(--ink); }
.voice-segments label:hover { color: var(--ink); }
}
.choice-picker[open] > .choice-panel { animation: control-menu-enter var(--motion-menu) var(--motion-ease) both; }
.create .explain { position: static; display: flex; align-items: center; justify-content: center; flex: none; min-width: 108px; width: auto; height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--sage-strong); color: white; font: 500 16px/1 var(--sans); box-shadow: none; }
.create .explain:disabled { opacity: .5; cursor: not-allowed; }
.composer-error:empty, .engine:empty { display: none; }
.composer-error, .engine { margin: 12px 2px 0; font: 13px/20px var(--sans); }
.create .choice-picker > summary { min-height: 44px; border-color: transparent; padding: 0 10px; gap: 7px; border-radius: 7px; }
.create .more-options > summary { width: 44px; padding: 0; }
.composer-notice { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 3px 2px 0; color: var(--ink-3); font: 12px/18px var(--sans); }
.composer-notice button { padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: underline; }
.source-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink); background: var(--paper); overflow: auto; }
.source-dialog::backdrop { background: #0006; }
.source-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.source-dialog h2 { margin: 0; font: 500 22px/1.3 var(--sans); overflow-wrap: anywhere; }
.source-dialog p { margin: 6px 0 0; color: var(--ink-3); font: 12px/1.5 var(--sans); }
.source-dialog button { min-height: 44px; border: 1px solid var(--line-2); border-radius: 7px; padding: 0 12px; background: var(--paper); color: var(--ink); font: 13px var(--sans); }
.source-dialog #source-close { min-width: 44px; font-size: 22px; }
.source-search { display: flex; gap: 8px; margin-bottom: 12px; }
.source-search input { min-width: 0; flex: 1; border: 1px solid var(--line-2); border-radius: 7px; padding: 10px; background: var(--paper); color: var(--ink); font: 14px var(--sans); }
#source-preview-text { width: 100%; height: min(360px, 42dvh); resize: none; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); color: var(--ink); font: 14px/1.6 var(--sans); }
#source-reader-status { min-height: 20px; }
.source-reader-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 12px var(--sans); }
#source-download { margin-left: auto; }
.source-dialog button:disabled { opacity: .45; }
.source-dialog button:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: -3px; }
@container composer (max-width: 570px) {
.composer-box { height: 264px; }
.composer-content { padding: 16px; }
.composer-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; gap: 6px; padding: 8px 10px; }
.composer-settings { display: contents; }
.create .choice-picker { grid-row: 1; }
.composer-input-actions { grid-row: 2; grid-column: 1 / 2; }
.create .explain { grid-row: 2; grid-column: 2 / 4; min-width: 0; width: 100%; }
.create .choice-picker > summary { padding: 0 5px; gap: 4px; font-size: 12px; }
.create .choice-picker > summary > svg:first-child { display: none; }
.create .more-options > summary > svg:first-child { display: block; }
.source-dialog { padding: 16px; }
.source-reader-footer { gap: 5px; }
#source-download { margin-left: 0; }
}
.composer-box { border-radius: 10px; }
.composer-content { padding: 18px; }
.composer-toolbar { gap: 6px; padding: 8px 10px; }
.composer-settings { gap: 0; }
.create .choice-picker > summary { padding-inline: 8px; font-size: 12px; }
.create .choice-picker > summary svg { width: 17px; height: 17px; }
.create .choice-picker > summary svg:last-child:not(:first-child) { width: 12px; height: 12px; }
.create .explain { gap: 10px; background: var(--signal); color: #171a19; font-size: 14px; font-weight: 700; }
.create .explain > span:last-child { font-size: 20px; font-weight: 400; }
.choice-picker > summary { justify-content: center; }
.choice-picker .choice-panel { left: 0; right: auto; }
.more-options .choice-panel { left: auto; right: 0; }
.composer-notice:has(#composer-notice-text:empty):has(#composer-notice-undo[hidden]) { min-height: 0; padding-top: 0; }
@container composer (max-width: 570px) {
.create .choice-picker > summary { font-size: 12px; padding-inline: 5px; }
.composer-toolbar { gap: 6px; }
.create .explain { min-width: 0; }
.source-dialog { padding: 16px; }
}
.page[data-view="home"] {
--bar-h: 68px; --col: 1280px; --col-max: 1280px; --gutter: max(clamp(22px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
--chapter: clamp(96px, 11.5vw, 168px); --ease: cubic-bezier(.16, 1, .3, 1); --scrub: cubic-bezier(.2, .7, .2, 1);
--edge: var(--frame-edge);
--sh-rest: 0 1px 1px var(--landing-shadow-soft), 0 12px 32px -14px var(--landing-shadow-deep);
--sh-lift: 0 2px 3px var(--landing-shadow-soft), 0 28px 56px -18px var(--landing-shadow-deep);
overflow-x: clip;
}
.page[data-view="home"] .main { padding: 0; }
.page:not([data-view="home"]) :is(.landing-nav, .landing-header-cta) { display: none; }
.page[data-view="home"] :is(#link-runs, #link-inspect, #link-new) { display: none; }
.page[data-view="home"] .bar { height: auto; padding: 0; flex: none; }
.page[data-view="home"] .bar-inner { width: min(var(--col), 100% - 2 * var(--gutter)); flex: none; justify-content: normal; }
#home {
--landing-art-blend: multiply;
--signal-hover: #f76342; --night: #171d1c; --night-2: #1b2220;
--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
position: relative; width: 100%; max-width: none; padding: 0; overflow-x: clip;
font: 400 16px/1.5 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
#home::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#home .wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }
#home :is(.example-card, .arrow, .copy) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#home .wm { display: inline-block; vertical-align: baseline; clip-path: inset(0); padding: .02em .07em .16em; margin: -.02em -.07em -.16em; }
#home .w { display: inline-block; }
#home .mark { position: relative; display: inline-block; white-space: nowrap; }
#home .stroke { position: absolute; left: -.02em; top: calc(50% + .49em); width: calc(100% + .04em); height: .16em; overflow: visible; color: var(--signal); pointer-events: none; }
#home .stroke path { fill: none; stroke: currentColor; stroke-width: .056em; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--pen, 1.2) calc(var(--pen, 1.2) + .3); }
#home .it { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-style: normal; font-weight: 500; font-optical-sizing: auto; font-variation-settings: "SOFT" 40; font-size: 1.06em; line-height: .9; letter-spacing: -.025em; }
#home .wm.it { padding-right: .04em; margin-right: -.04em; }
#home .mark:has(.it) .stroke { width: calc(100% + .06em); }
#home .it .w { color: var(--ink); }
.page[data-view="home"] .bar { position: sticky; top: 0; z-index: 40; background: var(--landing-bar-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.page[data-view="home"] .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; }
.page[data-view="home"] .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal); clip-path: inset(0 100% 0 0); }
.page[data-view="home"] .bar-inner { display: flex; align-items: center; gap: 6px; height: 68px; }
.page[data-view="home"] .wordmark { display: inline-flex; align-items: center; min-height: 44px; margin-right: 22px; padding: 0; color: var(--signal); }
.page[data-view="home"] .wordmark:hover { color: var(--signal); }
.page[data-view="home"] .wordmark-logo { display: block; width: 94px; aspect-ratio: 2087 / 753; background: currentColor; -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; }
.page[data-view="home"] .landing-nav { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto 0 0; }
.page[data-view="home"] .landing-nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; color: var(--ink-2); font: 500 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; transition: color 160ms ease; }
.page[data-view="home"] .landing-nav a:hover, .page[data-view="home"] .landing-nav a[aria-current] { color: var(--ink); }
.page[data-view="home"] .nav-pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 36px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; pointer-events: none; transition: transform 460ms var(--ease), width 460ms var(--ease), opacity 180ms ease; }
.page[data-view="home"] .landing-nav.has-active .nav-pill { opacity: 1; }
.page[data-view="home"] .bar-links { display: flex; align-items: center; gap: 6px; margin: 0; }
.page[data-view="home"] .bar-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; cursor: pointer; transition: color 160ms ease, background-color 160ms ease; }
.page[data-view="home"] .bar-link:hover { color: var(--ink); background: var(--paper-2); }
.page[data-view="home"] .bar-link svg { width: 16px; height: 16px; opacity: .85; }
.page[data-view="home"] .landing-header-cta { order: 1; display: inline-flex; align-items: center; gap: 12px; height: 40px; margin-left: 6px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--ink); --cta-ink: var(--paper); color: var(--cta-ink); font: 600 14px/1 var(--sans); letter-spacing: -.004em; text-decoration: none; box-shadow: 0 1px 2px #171a1933, 0 10px 22px -12px #171a198c, inset 0 1px 0 #ffffff1f; transition: background-color 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease; }
@property --cta-ink { syntax: "<color>"; inherits: true; initial-value: #fff; }
.page[data-view="home"] .landing-header-cta .cta-label { color: var(--cta-ink); transition: color 200ms ease, -webkit-text-fill-color 200ms ease; }
@media (forced-colors: none) { .page[data-view="home"] .landing-header-cta .cta-label { -webkit-text-fill-color: var(--cta-ink); } }
.page[data-view="home"] .landing-header-cta:hover { background: #242a28; transform: translateY(-1px); box-shadow: 0 2px 3px #171a192e, 0 14px 28px -12px #171a1999, inset 0 1px 0 #ffffff24; }
.page[data-view="home"] .landing-header-cta:active { transform: translateY(0) scale(.98); }
.page[data-view="home"] .arr { display: inline-block; transition: translate 350ms var(--ease), rotate 300ms var(--ease); }
.page[data-view="home"] .landing-header-cta .arr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 15px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; transition: translate 220ms var(--ease), background-color 160ms ease; }
.page[data-view="home"] .landing-header-cta:hover .arr { translate: 2px -1px; background: #f76342; }
.page[data-view="home"] .profile { order: 2; position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 14px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13px/1 var(--sans); transition: box-shadow 160ms ease, background-color 160ms ease; }
.page[data-view="home"] .profile::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.page[data-view="home"] .profile:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
#home .hero { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 660fr); align-items: center; padding-top: clamp(28px, 3.6vw, 52px); }
#home .hero-copy { position: relative; z-index: 2; min-width: 0; }
#home .hero-layer { margin: 0 0 clamp(14px, 1.5vw, 22px); font: 600 clamp(14px, 1.08vw, 15.5px)/1.4 var(--sans); letter-spacing: -.012em; }
#home .hero-layer a { display: inline-flex; align-items: center; gap: 11px; min-height: 32px; color: var(--ink-2); text-decoration: none; transition: color 160ms ease; }
#home .hero-layer a::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--signal); transform-origin: left; transition: width 320ms var(--ease); }
#home .hero-layer a:hover { color: var(--ink); }
#home .hero-layer a:hover::before { width: 30px; }
#home .hero-layer a:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 4px; border-radius: 4px; }
#home .h1 { margin: 0 0 0 -.04em; font: 800 clamp(44px, 6vw, 86px)/.98 var(--sans); letter-spacing: -.058em; }
#home .h1 .l1 { display: block; margin-bottom: .1em; }
#home .rot { position: relative; display: inline-block; color: var(--signal); white-space: nowrap; font-kerning: none; }
#home .rot-word { display: inline-block; white-space: pre; }
#home .rot-word.is-out { position: absolute; left: 0; top: 0; }
#home .rot-ch { display: inline-block; white-space: pre; }
#home .rot-tail { color: var(--ink); }
#home .hero-deck { margin: clamp(22px, 2.4vw, 32px) 0 0; color: var(--ink); font: 700 clamp(22px, 2.3vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; }
#home .hero-deck + .promise { margin-top: 14px; }
#home .promise { max-width: 470px; margin: 34px 0 0; color: var(--ink-2); font: 400 clamp(17px, 1.34vw, 19px)/1.55 var(--sans); }
#home .promise strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
#home .hero-start { position: relative; z-index: 2; width: 100%; max-width: none; min-width: 0; margin-top: 34px; }
#home .hero-start-box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper); box-shadow: var(--sh-rest), inset 0 1px 0 var(--paper); transition: border-color 160ms ease, box-shadow 320ms var(--ease), transform 320ms var(--ease); }
#home .hero-start-box:hover { box-shadow: var(--sh-lift), inset 0 1px 0 var(--paper); }
#home .hero-start-box:focus-within { border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f, var(--sh-lift); }
#home #hero-topic { flex: 1; box-sizing: border-box; min-width: 0; min-height: 48px; max-height: 190px; margin: 0; padding: 11.5px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 18px/25px var(--sans); letter-spacing: -.012em; field-sizing: content; }
#home #hero-topic::placeholder { color: var(--ink-3); }
#home .caret { position: absolute; left: 19px; top: 21px; width: 2px; height: 22px; border-radius: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
#home .hero-start-box:focus-within .caret, #home .hero-start-box:has(#hero-topic:not(:placeholder-shown)) .caret { display: none; }
#home .hero-attach { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; transition: color 160ms ease, background-color 160ms ease, transform 120ms var(--ease); }
#home .hero-attach svg { transition: rotate 320ms var(--ease); }
#home .hero-attach:hover { background: var(--paper-2); color: var(--ink); }
#home .hero-attach:hover svg { rotate: -14deg; }
#home .hero-attach:active { transform: scale(.94); }
#home :is(.hero-attach, .hero-start-go):focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
#home.is-dropping .hero-start-box { border-color: var(--signal); box-shadow: 0 0 0 4px #f044201f, var(--sh-lift); }
#home.is-dropping .hero-attach { background: var(--paper-2); color: var(--signal-text); }
#home .hero-start-go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--signal); color: #171a19; box-shadow: 0 1px 0 #171a192e, inset 0 1px 0 #ffffff47; transition: background-color 160ms ease, transform 120ms var(--ease), box-shadow 160ms ease; }
#home .hero-start-go svg { transition: translate 160ms ease; }
#home .hero-start-go:hover { background: var(--signal-hover); box-shadow: 0 4px 10px -4px #f0442099, inset 0 1px 0 #ffffff47; }
#home .hero-start-go:hover svg { translate: 1.5px -1.5px; }
#home .hero-start-go:active { transform: scale(.94); }
#home .hero-visitor, #home .hero-visitor [data-visitor-says] { display: none; }
html[data-visitor] #home .hero-visitor { display: block; position: absolute; top: calc(100% + 14px); left: 6px; right: 6px; margin: 0; color: var(--ink-3); font: 400 14px/1.5 var(--sans); animation: fade-up .7s var(--ease) both; }
html[data-visitor="guest"] #home .hero-visitor [data-visitor-says="guest"],
html[data-visitor="listed"] #home .hero-visitor [data-visitor-says="listed"] { display: flex; align-items: flex-start; gap: 9px; }
#home .hero-visitor svg { flex: none; margin-top: 2.5px; }
#home .hero-visitor b { color: var(--ink-2); font-weight: 600; }
#home .hero-visitor .visitor-tick { stroke: var(--signal); stroke-width: 3; }
#home .hero-art { position: relative; z-index: 1; min-width: 0; margin: 0 -28px 0 20px; perspective: 1600px; }
#home .hero-sheet { position: relative; transform-origin: 40% 60%; }
#home .hero-sheet::before { content: ""; position: absolute; inset: 3% -1% -2.5% 2%; z-index: 0; background: var(--paper); border: 1px solid var(--edge); border-radius: 3px; rotate: 1.9deg; box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 22px 40px -22px var(--landing-shadow-deep); }
#home .face { position: relative; z-index: 1; padding: 2.4% 2.8%; background: var(--paper); border: 1px solid var(--edge); border-radius: 3px; rotate: -1.3deg; box-shadow: var(--sh-rest); }
#home .clip { position: relative; }
#home .clip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
#home .nib { position: absolute; left: 0; top: 58%; z-index: 3; width: clamp(68px, 14%, 120px); aspect-ratio: 150 / 24; pointer-events: none; transform: translateY(-50%) rotate(35deg); transform-origin: 0 50%; }
#home .nib svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2.9px 4.1px 4px var(--landing-shadow-deep)); }
#home .nib .brush-handle { fill: var(--ink); }
#home .nib .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
#home .nib .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
#home .nib .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
#home .nib .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
#home .nib .brush-hairs { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: .5; }
#home .nib .brush-paint { fill: var(--signal); }
#home .landing-section { padding-top: var(--chapter); }
#home .head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 3.3vw, 48px); }
#home .h2 { margin: 0; font: 800 clamp(34px, 4.6vw, 66px)/1 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
#home .sub { max-width: 560px; margin: 18px 0 0; color: var(--ink-2); font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--sans); }
#home .films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
#home .example { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#home .example-card { display: block; width: 100%; min-width: 0; color: var(--ink); text-align: left; }
#home .print { display: block; perspective: 1400px; }
#home .poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border: 1px solid var(--edge); border-radius: 8px; background: #fff; box-shadow: var(--sh-rest); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: box-shadow 500ms var(--ease), transform 500ms var(--ease), border-color 200ms ease; will-change: transform; }
#home .poster-media { position: absolute; inset: 0; transition: transform 650ms var(--ease); }
#home .poster img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#home .play { position: absolute; left: 18px; bottom: 18px; display: grid; place-items: center; width: 56px; height: 56px; padding-left: 3px; border-radius: 50%; background: #171a19; color: #fff; box-shadow: 0 2px 4px #171a1933, 0 10px 20px -8px #171a1980, inset 0 1px 0 #ffffff29; transition: transform 400ms var(--ease), background-color 180ms ease; }
#home .play svg { width: 23px; height: 23px; }
#home .dur { position: absolute; right: 16px; bottom: 18px; padding: 4px 8px; border-radius: 4px; background: #171a19; color: #fff; font: 500 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#home .film-title { display: block; margin-top: 16px; font: 500 clamp(19px, 1.7vw, 24px)/1.3 var(--sans); letter-spacing: -.025em; text-wrap: balance; transition: color 180ms ease; }
#home .example-facts { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
#home .example-facts dt { color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .example-facts dd { margin: 4px 0 0; color: var(--ink); font: 700 clamp(20px, 1.85vw, 26px)/1.15 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
#home .example-card:hover .poster { border-color: var(--signal-text); box-shadow: var(--sh-lift); }
#home .example-card:hover .poster-media { transform: scale(1.03); }
#home .example-card:hover .play { transform: scale(1.1) rotate(-7deg); background: #bb3112; }
#home .example-card:hover .film-title { color: var(--signal-text); }
}
#home .poster-loop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; opacity: 0; pointer-events: none; transition: opacity 420ms ease; }
#home .poster-loop.is-live { opacity: 1; }
#rivals .rivals-head { margin-bottom: clamp(20px, 2.2vw, 32px); overflow-x: clip; overflow-y: visible; text-align: center; }
#rivals .rivals-h2 { margin: 0; color: var(--ink); font: 800 clamp(15px, 4.6vw, 62px)/1.04 var(--sans); letter-spacing: -.05em; white-space: nowrap; }
#rivals .rivals-ask { margin: 0 auto clamp(34px, 4.2vw, 62px); text-align: center; }
#rivals .rivals-q-label { margin: 0 0 12px; color: var(--ink-3); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-q { max-width: 24ch; margin: 0 auto; color: var(--ink); font: 600 clamp(22px, 2.3vw, 34px)/1.2 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
#rivals .rivals-quote { color: var(--signal-text); }
#rivals .rivals-lede { max-width: 42ch; margin: 16px auto 0; color: var(--ink-3); font: 400 clamp(15px, 1.1vw, 16.5px)/1.55 var(--sans); }
#rivals .rivals-brief { margin-top: 18px; }
#rivals .rivals-brief summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; list-style: none; cursor: pointer; transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
#rivals .rivals-brief summary::-webkit-details-marker { display: none; }
#rivals .rivals-brief summary:hover, #rivals .rivals-brief[open] summary { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); color: var(--ink); }
#rivals .rivals-chev { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 300ms var(--ease); }
#rivals .rivals-brief[open] .rivals-chev { rotate: -135deg; translate: 0 2px; }
#rivals .rivals-brief-card { max-width: 640px; margin: 14px auto 0; padding: 16px 22px 20px; border-radius: 18px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); text-align: left; }
#rivals .rivals-brief[open] .rivals-brief-card { animation: rivals-brief-in 520ms var(--ease) both; }
@keyframes rivals-brief-in { from { opacity: 0; transform: translateY(-6px) scale(.985); clip-path: inset(0 0 100% 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
#rivals .rivals-brief-to { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font: 500 13px/1.3 var(--sans); }
#rivals .rivals-stack { display: flex; }
#rivals .rivals-stack .rivals-mark { --mark: 26px; box-shadow: 0 0 0 2px var(--paper-2), inset 0 0 0 1px var(--frame-edge); background: var(--paper); }
#rivals .rivals-stack .rivals-mark + .rivals-mark { margin-left: -5px; }
#rivals .rivals-stack .rivals-mark-ivan { width: auto; padding-inline: 8px; box-shadow: 0 0 0 2px var(--paper-2); background: var(--signal); }
#rivals .rivals-stack .rivals-wordmark { width: 40px; background: #fff; }
#rivals .rivals-brief-text { margin: 0; color: var(--ink-2); font: 400 13px/1.85 var(--mono); white-space: pre-wrap; overflow-x: auto; }
#rivals .rivals-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#rivals .rivals-mark { --mark: 40px; display: inline-grid; flex: none; place-items: center; width: var(--mark); height: var(--mark); border-radius: calc(var(--mark) * .28); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--frame-edge); color: var(--ink); }
#rivals .rivals-mark svg { width: 48%; height: 48%; fill: currentColor; }
#rivals .rivals-mark-claude { color: #d97757; }
#rivals .rivals-wordmark { display: block; aspect-ratio: 2087 / 753; background: var(--signal); -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; }
@media (forced-colors: active) { #rivals :is(.rivals-wordmark, .rivals-stack .rivals-wordmark) { background: CanvasText; } }
#rivals .rivals-films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
#rivals .example-card { display: flex; flex-direction: column; height: 100%; }
#rivals .poster { container-type: inline-size; }
#rivals .rivals-cover { display: grid; place-items: center; color: #171a19; }
#rivals .rivals-cover svg { width: 21cqi; height: 21cqi; fill: currentColor; }
#rivals .rivals-cover-claude { color: #d97757; }
#rivals .rivals-cover .rivals-wordmark { width: 38cqi; }
#rivals .rivals-name { display: grid; flex: 1; grid-template-rows: auto auto 1fr; margin-top: 18px; }
#rivals .film-title { margin-top: 0; line-height: 1.2; }
#rivals .rivals-by { display: block; margin-top: 3px; color: var(--ink-3); font: 500 13px/1.45 var(--sans); letter-spacing: normal; }
#rivals .rivals-made { display: block; grid-column: 1 / -1; align-self: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
#rivals .rivals-made-label { display: block; color: var(--ink-3); font: 600 13px/1.4 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-made-val { display: block; margin-top: 8px; color: var(--ink-3); font: 500 clamp(14px, 1.1vw, 16px)/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
#rivals .rivals-made-val b { display: inline-block; color: var(--ink); font: 700 clamp(30px, 2.9vw, 44px)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin-right: .06em; }
#rivals .rivals-made-val b:not(:first-child) { margin-left: .14em; }
#rivals .rivals-ours :is(.film-title, .rivals-made-val b) { color: var(--signal-text); }
@media (min-width: 1101px) {
#rivals .play { left: 14px; bottom: 14px; width: 46px; height: 46px; }
#rivals .play svg { width: 17px; height: 17px; }
}
#rivals .rivals-sheet, #rivals .rivals-nib, #rivals .rivals-run { display: none; }
#rivals.is-racing .rivals-sheet { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--paper); }
#rivals.is-racing .rivals-dial { color: var(--ink); font: 500 clamp(17px, 13cqi, 58px)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#rivals.is-racing .rivals-run { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; height: 3px; background: var(--line); }
#rivals.is-racing .rivals-run i { display: block; height: 100%; background: var(--ink-4); transform: scaleX(var(--p, 0)); transform-origin: left; }
#rivals.is-racing .rivals-ours .rivals-run i { background: var(--signal); }
#rivals.is-racing .rivals-lane:not(.is-done) :is(.play, .rivals-made) { opacity: 0; }
#rivals.is-racing .rivals-lane.is-done .rivals-made-val b { animation: rivals-land 760ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-made-val b + b { animation-delay: 70ms; }
#rivals.is-racing .rivals-lane.is-done .rivals-made-label { animation: rivals-land-soft 520ms ease both; }
@keyframes rivals-land { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } }
@keyframes rivals-land-soft { from { opacity: 0; } }
#rivals .rivals-cost { margin-top: clamp(46px, 5.4vw, 74px); }
#rivals .rivals-cost-label { margin: 0 0 6px; color: var(--ink-3); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-bar { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) minmax(58px, auto); align-items: center; gap: clamp(14px, 2vw, 28px); padding-block: 18px; border-top: 1px solid var(--line); }
#rivals .rivals-bar-name { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#rivals .rivals-bar-name .rivals-mark { --mark: 28px; }
#rivals .rivals-bar-name .rivals-wordmark { width: 72px; }
#rivals .rivals-ours .rivals-bar-name { color: var(--ink); }
#rivals .rivals-track { position: relative; display: block; height: 11px; }
#rivals .rivals-fill { position: absolute; inset-block: 0; left: 0; border-radius: 2px; background: var(--ink-4); transform-origin: left; }
#rivals .rivals-ours .rivals-fill { background: var(--signal); }
#rivals .rivals-bar[data-multiple="1"] { --draw: 340ms; }
#rivals .rivals-bar[data-multiple="1"] .rivals-fill { width: 5%; }
#rivals .rivals-bar[data-multiple="17"] { --draw: 1200ms; }
#rivals .rivals-bar[data-multiple="17"] .rivals-fill { width: 85%; }
#rivals .rivals-bar[data-multiple="20"] { --draw: 1400ms; }
#rivals .rivals-bar[data-multiple="20"] .rivals-fill { width: 100%; }
#rivals .rivals-bar-val { margin: 0; color: var(--ink); font: 700 clamp(20px, 1.85vw, 26px)/1.15 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-align: right; }
#rivals .rivals-ours .rivals-bar-val { color: var(--signal-text); }
#rivals .rivals-basis { margin: 14px 0 0; color: var(--ink-4); font: 400 13px/1.5 var(--sans); }
#rivals .rivals-turn { margin-top: clamp(72px, 9vw, 132px); text-align: center; }
#rivals .rivals-turn-lede { max-width: 56ch; margin: 0 auto; color: var(--ink-2); font: 400 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); text-wrap: balance; }
#rivals .rivals-turn-line { margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--ink); font: 800 clamp(34px, 5.4vw, 78px)/1 var(--sans); letter-spacing: -.055em; }
#home .manifesto { max-width: 11.6em; margin: 0; font: 800 clamp(40px, 6.4vw, 92px)/.96 var(--sans); letter-spacing: -.055em; text-wrap: balance; }
#home .vision-sub { max-width: 520px; margin: 30px 0 0; color: var(--ink-2); font: 400 clamp(18px, 1.55vw, 22px)/1.5 var(--sans); }
#home .paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(44px, 5.2vw, 76px); }
#home .path { display: flex; flex-direction: column; min-width: 0; }
#home .path-art { position: relative; aspect-ratio: 1000 / 563; }
#home .path-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#home .path:nth-child(1) .path-art img { translate: 0 6%; }
#home .path:nth-child(3) .path-art img { translate: 0 4%; }
#home .path-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 28px 0; border-left: 1px solid var(--line); }
#home .path:first-child .path-copy { padding-left: 0; border-left: 0; }
#home .path:last-child .path-copy { padding-right: 0; }
#home .path-copy h3 { margin: 0; font: 750 clamp(21px, 2.15vw, 31px)/1.15 var(--sans); letter-spacing: -.035em; }
#home .path-copy p { max-width: 30ch; margin: 12px 0 8px; color: var(--ink-2); font: 400 17px/1.5 var(--sans); }
#home .arrow { display: inline-flex; align-items: center; width: 56px; min-height: 48px; margin-top: auto; padding-top: 8px; color: var(--signal-text); font: 400 34px/1 var(--sans); text-decoration: none; }
#home .arrow:hover { color: var(--ink); }
#home .arrow:hover .arr { translate: 7px 0; }
#home .caps { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); align-items: center; min-height: 104px; margin-top: clamp(48px, 5vw, 72px); padding: 16px 24px; border: 1px solid var(--edge); border-radius: 14px; background: var(--paper); box-shadow: var(--sh-rest); transition: border-color 220ms ease, box-shadow 400ms var(--ease), background-color 320ms var(--ease); }
#home .caps:hover { box-shadow: var(--sh-lift); }
#home .caps:has(select:focus-visible) { border-color: var(--signal-text); }
#home .caps h3 { margin: 0; padding-right: 16px; font: 750 clamp(17px, 1.6vw, 23px)/1.2 var(--sans); letter-spacing: -.03em; }
#home .cap { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 18px; border-left: 1px solid var(--line); cursor: pointer; }
#home .cap:last-child { padding-right: 0; }
#home .cap svg { flex: none; width: 24px; height: 24px; color: var(--ink-2); }
#home .cap-body { flex: 1; min-width: 0; }
#home .cap-label { display: block; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .cap select { display: block; width: 100%; height: 30px; padding: 0 18px 0 0; border: 0; border-radius: 3px; appearance: none; -webkit-appearance: none; background: transparent var(--landing-select-arrow) right center / 14px no-repeat; color: var(--ink); font: 500 16px/1.4 var(--sans); cursor: pointer; }
#home .cap-trigger, #home .caps-glide { display: none; }
@media (min-width: 641px) {
#home .caps.has-menus { position: relative; }
#home .caps.has-menus > :is(h3, .cap) { position: relative; z-index: 1; }
#home .caps.has-menus .cap { transition: border-color 200ms ease; }
#home .caps.has-menus .cap select { display: none; }
#home .caps.has-menus .cap.is-lit, #home .caps.has-menus .cap.is-lit + .cap { border-left-color: transparent; }
#home .caps[data-open] { background: var(--paper-2); }
#home .caps.has-menus .caps-glide { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: var(--glide-w, 0); height: var(--glide-h, 0); border-radius: 14px; background: var(--paper-2); opacity: 0; translate: var(--glide-x, 0) var(--glide-y, 0); pointer-events: none; transition: translate 480ms var(--ease), width 480ms var(--ease), height 480ms var(--ease), opacity 240ms ease, background-color 300ms ease, box-shadow 420ms var(--ease); }
#home .caps.has-menus .caps-glide.is-on { opacity: 1; }
#home .caps.has-menus .caps-glide.is-still { transition: none; }
#home .caps.has-menus .caps-glide.is-raised { background: var(--cap-raise, var(--paper)); box-shadow: 0 0 0 1px var(--frame-edge), 0 1px 2px var(--landing-shadow-soft), 0 12px 30px -12px var(--landing-shadow-deep); }
#home .caps.has-menus .cap-trigger { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 500 16px/1.4 var(--sans); letter-spacing: -.01em; text-align: left; cursor: pointer; }
#home .cap-trigger::after { content: ""; position: absolute; inset: -12px -10px; border-radius: 14px; }
#home .cap-trigger:focus-visible { outline: none; }
#home .cap-trigger:focus-visible:not([data-quiet])::after { outline: 1.5px solid var(--signal-text); outline-offset: 0; }
#home .cap-value { flex: 1; min-width: 0; margin-block: -3px; padding-block: 3px; overflow: hidden; }
#home .cap-value-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#home .caps.has-menus .cap-trigger .icon-caret { width: 16px; height: 16px; color: var(--ink-3); transition: rotate 460ms var(--ease), translate 260ms var(--ease), color 200ms ease; }
#home .caps.has-menus .cap:hover .cap-trigger .icon-caret { color: var(--ink); translate: 0 1.5px; }
#home .caps.has-menus .cap-trigger[aria-expanded="true"] .icon-caret { color: var(--signal-text); rotate: 180deg; translate: none; }
}
#home .cap-menu { position: fixed; inset: auto; display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; --sheet: var(--cap-sheet, var(--paper)); border: 1px solid var(--cap-sheet-edge, var(--frame-edge)); border-radius: 18px; background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 8px 20px -10px var(--landing-shadow-soft), 0 34px 70px -26px var(--landing-shadow-deep); font: 400 15px/1.4 var(--sans); }
#home .cap-menu:not(:popover-open) { display: none; }
#home .cap-menu [hidden] { display: none; }
#home .cap-search { display: flex; flex: none; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-4); cursor: text; transition: color 200ms ease; }
#home .cap-search:focus-within { color: var(--ink-2); }
#home .cap-search .icon-search { flex: none; }
#home .cap-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 15px/1 var(--sans); letter-spacing: -.01em; }
#home .cap-search input::placeholder { color: var(--ink-4); opacity: 1; }
#home .cap-scroll { position: relative; flex: 1 1 auto; min-height: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
#home .cap-list:focus { outline: 0; }
#home .cap-group { margin-top: 2px; }
#home .cap-caption { position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 14px 18px 6px; background: var(--sheet); color: var(--ink-4); font: 600 12px/1.3 var(--sans); letter-spacing: -.004em; }
#home .cap-option { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink); cursor: pointer; transition: background-color 140ms ease; }
#home .cap-option:has(.cap-option-hint) { gap: 14px; min-height: 58px; }
#home .cap-option.is-active { background: var(--paper-2); }
#home .cap-option.is-chosen { animation: cap-chosen 340ms ease-out; }
#home .cap-option-words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; }
#home .cap-option-name { overflow: hidden; font: 500 15px/1.35 var(--sans); letter-spacing: -.012em; white-space: nowrap; text-overflow: ellipsis; }
#home .cap-option[aria-selected="true"] .cap-option-name { font-weight: 650; }
#home .cap-option-hint { color: var(--ink-3); font: 400 13px/1.35 var(--sans); letter-spacing: -.004em; }
#home .cap-option-native { flex: 0 100 auto; min-width: 3em; overflow: hidden; color: var(--ink-3); font: 400 14px/1.35 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
#home .cap-option > :is(.icon-landscape, .icon-portrait) { flex: none; color: var(--ink-2); }
#home .cap-option .icon-check { flex: none; color: var(--signal-text); stroke-width: 2; }
#home .cap-option .icon-check path { stroke-dasharray: 21; stroke-dashoffset: 21; transition: stroke-dashoffset 380ms cubic-bezier(.6, 0, .25, 1); }
#home .cap-option:not([aria-selected="true"]) .icon-check path { transition-duration: 120ms; }
#home .cap-option[aria-selected="true"] .icon-check path { stroke-dashoffset: 0; }
#home .cap-empty { margin: 0; padding: 22px 12px 26px; color: var(--ink-3); font: 400 14px/1.45 var(--sans); text-align: center; }
@keyframes cap-chosen { 35% { background-color: color-mix(in srgb, var(--signal) 13%, var(--sheet)); } }
@media (prefers-reduced-motion: reduce) {
#home .caps-glide, #home .cap-trigger .icon-caret, #home .cap-option .icon-check path { transition: none; }
}
#home .pm { position: relative; flex: none; width: 18px; height: 18px; }
#home .pm::before, #home .pm::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8.25px; height: 1.5px; border-radius: 2px; background: currentColor; transition: rotate 300ms var(--ease); }
#home .pm::after { rotate: 90deg; }
#home details[open] > summary .pm::after { rotate: 0deg; }
#home .night { position: relative; margin-top: var(--chapter); background: var(--night); color: #fff; overflow: clip; }
#home .night::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 78% 40%, #f044201a, transparent 55%), radial-gradient(90% 70% at 10% 100%, #ffffff0d, transparent 60%); }
#home .night-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(36px, 5vw, 80px); padding-block: clamp(84px, 10vw, 148px); }
#home .night .h2 { color: #fff; }
#home .dev-p { max-width: 30em; margin: 20px 0 30px; color: #eff2f0; font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--sans); }
#home .dev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
#home .dev-btn { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 0 8px 0 24px; border-radius: 999px; background: #fff; color: #171a19; font: 600 15px/1 var(--sans); letter-spacing: -.006em; text-decoration: none; box-shadow: 0 1px 2px #0000004d, 0 16px 32px -16px #000000b3; transition: background-color 200ms ease, transform 200ms var(--ease); }
#home .dev-btn .arr { display: grid; place-items: center; width: 34px; height: 34px; overflow: clip; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 17px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; }
#home .dev-btn:hover { background: #ecece8; color: #171a19; transform: translateY(-1px); }
#home .dev-btn:hover .arr > i { --through: 130%; animation: arrow-e 560ms both; }
#home .dev-btn:active { transform: translateY(0) scale(.98); }
#home .dev-link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 500 16px/1.5 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: #ffffff66; transition: text-decoration-color 200ms ease; }
#home .dev-link:hover { color: #fff; text-decoration-color: #fff; }
#home :is(.dev-btn, .dev-link):focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
#home .dev-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(22px, 2.4vw, 34px); margin-top: clamp(38px, 4vw, 58px); padding-top: 24px; border-top: 1px solid #ffffff29; }
#home .dev-apps-lede { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #93a69c; font: 400 14.5px/1.4 var(--sans); white-space: nowrap; }
#home .dev-apps-lede::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--signal); border-radius: 50%; }
#home .dev-apps-list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(22px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
#home .dev-apps-list li { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 17px/1 var(--sans); letter-spacing: -.014em; }
#home .dev-apps-list svg { flex: none; width: 21px; height: 21px; fill: currentColor; }
#home .stage { position: relative; min-width: 0; perspective: 1600px; }
#home .code { position: relative; min-width: 0; border: 1px solid #4a5450; border-radius: 12px; background: linear-gradient(180deg, #1f2724, var(--night-2)); box-shadow: 0 1px 0 #ffffff0f inset, 0 40px 90px -20px #000000b3, 0 0 0 1px #0000004d; transform: rotateY(-6deg) rotateX(2deg); transform-origin: 30% 50%; transition: transform 1100ms var(--ease), box-shadow 700ms var(--ease); }
#home .code:hover { transform: rotateY(0deg) rotateX(0deg) translateY(-4px); box-shadow: 0 1px 0 #ffffff14 inset, 0 60px 110px -20px #000000cc, 0 0 0 1px #0000004d; }
#home .code-head { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px 0 20px; border-bottom: 1px solid #3c4842; font: 400 13px/1.4 var(--mono); }
#home .code-tab { display: flex; align-items: center; height: 100%; margin-bottom: -1px; border-bottom: 1px solid #f66a49; }
#home .copy { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 8px; color: #f7faf8; font: 400 13px/1.4 var(--sans); }
#home .copy:hover { color: #ff9b82; }
#home .code pre { margin: 0; padding: 22px 22px 26px; overflow: auto; color: #e0e9e4; font: 400 clamp(12px, 1vw, 14px)/1.85 var(--mono); }
#home .cl { display: block; padding-left: 6ch; text-indent: -6ch; white-space: pre-wrap; overflow-wrap: anywhere; }
#home .stage .code pre { padding-bottom: 62px; }
#home .code-run { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 0 0 11px 11px; pointer-events: none; }
#home .code-run i { display: block; height: 100%; background: var(--signal); opacity: 0; transform-origin: left; }
#home .reply { position: relative; z-index: 2; width: 54%; margin: -74px clamp(-26px, -1.5vw, -8px) 0 auto; rotate: 2.2deg; }
#home .reply-print { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border: 1px solid #ffffff38; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px #0000004d, 0 34px 70px -20px #000000cc; }
#home .reply-print img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#home .reply .dur { right: 10px; bottom: 10px; }
#home .reply figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; color: #93a69c; font: 400 12.5px/1.5 var(--mono); }
#home .reply-ok { display: inline-flex; align-items: center; gap: 8px; color: #e0e9e4; }
#home .reply-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
#home .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 48px; }
#home .faq-intro { align-self: start; position: sticky; top: 112px; }
#home .faq-title { margin: 0; font: 800 clamp(30px, 3.3vw, 48px)/1.05 var(--sans); letter-spacing: -.045em; }
#home .faq-kicker { display: block; margin-top: 14px; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
#home .qa { border-top: 1px solid var(--line); }
#home .qa:last-child { border-bottom: 1px solid var(--line); }
#home .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 14px 0; list-style: none; cursor: pointer; font: 500 clamp(17px, 1.45vw, 20px)/1.4 var(--sans); letter-spacing: -.015em; transition: color 160ms ease; }
#home .qa summary::-webkit-details-marker { display: none; }
#home .qa summary:hover { color: var(--signal-text); }
#home .qa .pm { width: 20px; height: 20px; }
#home .qa .pm::before, #home .qa .pm::after { top: 9.25px; }
#home .qa p { max-width: 640px; margin: -2px 0 28px; color: var(--ink-2); font: 400 16px/1.7 var(--sans); }
#home :is(.qa p, .final-also) a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); transition: color 160ms ease, text-decoration-color 200ms ease; }
#home :is(.qa p, .final-also) a:hover { color: var(--signal-text); text-decoration-color: currentColor; }
#home .final { padding-block: clamp(128px, 15vw, 224px) clamp(104px, 11vw, 168px); text-align: center; }
#home .h-final { position: relative; margin: 0; font: 700 clamp(50px, 7.95vw, 116px)/1.26 "Kalam Line", "Comic Sans MS", "Chalkboard SE", cursive; letter-spacing: 0; }
#home .h-final .br-phone { display: none; }
#home .h-final .keep { white-space: nowrap; }
#home .h-final .hand-word { display: inline-block; overflow: visible; }
#home .h-final .hand-ink { fill: currentColor; }
#home .h-final .hand-pen { position: absolute; left: 0; top: 0; width: 2.3em; aspect-ratio: 200 / 24; opacity: 0; pointer-events: none; }
#home .h-final .hand-pen svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 50%; will-change: transform; }
#home .h-final .hand-shadow { filter: blur(3px); }
#home .h-final .hand-shadow path { fill: var(--landing-shadow-deep); }
#home .h-final .pen-body, #home .h-final .pen-ink { fill: var(--ink); }
#home .h-final .pen-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
#home .h-final :is(.pen-collar, .pen-nib) { stroke: var(--ink); stroke-width: 1; }
#home .h-final .pen-collar { fill: var(--ink-4); }
#home .h-final .pen-nib { fill: var(--paper-2); }
#home .h-final .pen-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
#home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 58px; margin-top: clamp(34px, 3.4vw, 50px); padding: 0 30px 0 32px; border-radius: 99px; background: var(--signal); color: #171a19; font: 700 16px/1 var(--sans); text-decoration: none; box-shadow: 0 1px 0 #171a192e, 0 12px 28px -12px #f04420b3, inset 0 1px 0 #ffffff4d; transition: background-color 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease; }
#home .btn:hover { background: var(--signal-hover); color: #171a19; transform: translateY(-1px); box-shadow: 0 2px 0 #171a191f, 0 20px 36px -12px #f04420cc, inset 0 1px 0 #ffffff4d; }
#home .btn:active { transform: translateY(0) scale(.98); }
#home .btn .arr { font: 400 24px/1 var(--sans); }
#home .btn:hover .arr { translate: 4px 0; }
#home .final-also { margin: 22px 0 0; color: var(--ink-3); font: 400 15px/1.5 var(--sans); }
#home .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 36px; min-height: 96px; border-top: 1px solid var(--line); }
#home .foot-line { margin: 0 auto 0 -14px; color: var(--ink-3); font: 500 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
#home .foot nav { display: flex; gap: 28px; }
#home .foot a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 400 14px/1.4 var(--sans); text-decoration: none; }
#home .foot a:not(.wordmark):hover { color: var(--signal-text); }
@media (max-width: 1100px) {
#home .foot > a:last-child { margin-left: auto; }
#home .foot-line { flex-basis: 100%; order: 4; margin: -14px 0 22px; }
#rivals .rivals-films { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(36px, 4.4vw, 48px); }
.page[data-view="home"] .wordmark { margin-right: 10px; }
#home .caps { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); padding-inline: 16px; }
#home .cap { gap: 10px; padding-inline: 12px; }
#home .cap svg { width: 20px; height: 20px; }
#home .cap select, #home .caps.has-menus .cap-trigger { font-size: 14px; }
#home .path-copy { padding-inline: 18px; }
}
@media (max-width: 860px) {
#home .hero { grid-template-columns: minmax(0, 1fr); }
html[data-visitor] #home .hero-visitor { position: static; margin: 12px 6px 0; }
#home .h1 { font-size: clamp(44px, 10.2vw, 84px); }
#home .hero-art { margin: 36px 0 0; }
#home .example { gap: 16px; }
#home .play { left: 14px; bottom: 14px; width: 48px; height: 48px; }
#home .play svg { width: 20px; height: 20px; }
#home .dur { right: 12px; bottom: 14px; font-size: 11px; }
#home .film-title { font-size: 18px; }
#home .example-facts { padding-top: 14px; }
#home .example-facts dd { font-size: 19px; }
#rivals .rivals-films { column-gap: 18px; }
#home .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
#home .caps h3 { grid-column: 1 / -1; padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
#home .caps .cap:nth-of-type(odd) { padding-left: 0; border-left: 0; }
#home .night-inner { grid-template-columns: minmax(0, 1fr); }
#home .code, #home .code:hover { transform: none; }
#home .reply { width: min(54%, 380px); }
#home .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
#home .faq-intro { position: static; }
#home .head { flex-direction: column; align-items: start; gap: 18px; }
}
@media (max-width: 640px) {
html:has(#home:not([hidden])) { scroll-padding-top: 72px; }
.page[data-view="home"] { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --chapter: 84px; -webkit-tap-highlight-color: transparent; }
.page[data-view="home"] .bar { padding-top: env(safe-area-inset-top); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.page[data-view="home"] .bar-inner { height: 56px; gap: 4px; }
.page[data-view="home"] .wordmark { flex-shrink: 0; margin-right: 0; }
.page[data-view="home"] .bar .wordmark-logo { width: 74px; }
.page[data-view="home"] .landing-nav { display: none; }
.page[data-view="home"] .bar-links { flex: 0 1 auto; min-width: 0; margin-left: auto; gap: 2px; }
.page[data-view="home"] .bar-link { width: 36px; padding: 0; justify-content: center; }
.page[data-view="home"] .bar-link span { display: none; }
.page[data-view="home"] #account-button { display: block; flex: 1 1 0; width: auto; min-width: 0; max-width: 96px; padding: 0 10px; overflow: hidden; font-size: 12.5px; line-height: 36px; white-space: nowrap; text-overflow: ellipsis; }
.page[data-view="home"] .landing-header-cta { flex-shrink: 0; height: 38px; margin-left: 4px; padding: 0 5px 0 14px; gap: 10px; font-size: 14px; white-space: nowrap; }
.page[data-view="home"] .landing-header-cta .arr { width: 26px; height: 26px; font-size: 14px; }
.page[data-view="home"] .profile { width: 34px; height: 34px; margin-left: 10px; }
.page[data-view="home"] .profile::before { left: -10px; }
#home .hero { padding-top: 20px; }
#home .h1 { font-size: clamp(34px, 11.8vw, 54px); line-height: .98; letter-spacing: -.055em; }
#home .hero-deck { font-size: 23px; }
#home .promise { margin-top: 16px; font-size: 17px; }
html:has(#home:not([hidden])) :is(input, select, textarea) { font-size: 16px; }
html:has(#home:not([hidden])) #home .cap select { font-size: 17px; }
html:has(#home:not([hidden])) #home #hero-topic { font-size: 16px; }
#home .hero-start { margin-top: 24px; }
#home .hero-start-box { padding-left: 16px; }
#home .caret { left: 15px; }
#home .hero-art { margin: 34px 0 0; }
#home .head { margin-bottom: 20px; }
#home .h2 { font-size: clamp(31px, 8.6vw, 38px); line-height: 1.04; letter-spacing: -.045em; }
#home .films { display: flex; align-items: stretch; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
#home .films::-webkit-scrollbar { display: none; }
#home .example { flex: 0 0 86%; gap: 14px; scroll-snap-align: start; }
#home .poster { border-color: var(--line); border-radius: 16px; }
#home .play { left: 12px; bottom: 12px; width: 44px; height: 44px; }
#home .play svg { width: 19px; height: 19px; }
#home .dur { right: 12px; bottom: 14px; padding: 3px 7px; border-radius: 6px; font-size: 11px; }
#home .film-title { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
#home .example-facts { padding-top: 12px; }
#home .example-facts dd { font-size: 17px; }
#rivals .rivals-films { grid-template-columns: minmax(0, 1fr); gap: 0; }
#rivals .example { padding-block: 16px; border-top: 1px solid var(--line); }
#rivals .example:first-child { border-top: 0; padding-top: 0; }
#rivals .example-card { display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; column-gap: 14px; height: auto; }
#rivals .rivals-name { margin-top: 0; }
#rivals .film-title { margin-top: 0; }
#rivals .rivals-made { margin-top: 10px; padding-top: 0; border-top: 0; }
#rivals .play { left: 10px; bottom: 10px; width: 36px; height: 36px; }
#rivals .play svg { width: 16px; height: 16px; }
#rivals .rivals-made-label { font-size: 12.5px; }
#rivals .rivals-made-val { margin-top: 4px; font-size: 13px; }
#rivals .rivals-made-val b { font-size: 24px; }
#rivals .rivals-brief-text { font-size: 12px; }
#rivals .rivals-brief-card { padding: 14px 16px 16px; }
#rivals .rivals-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; padding-block: 14px; }
#rivals .rivals-track { grid-column: 1 / -1; order: 3; }
#home .manifesto { font-size: clamp(38px, 10.8vw, 50px); line-height: 1; }
#home .vision-sub { margin-top: 16px; font-size: 17px; }
#home .paths { display: flex; gap: 12px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
#home .paths::-webkit-scrollbar { display: none; }
#home .path { flex: 0 0 82%; overflow: clip; border-radius: 22px; background: var(--paper-2); scroll-snap-align: start; }
#home .path-art { margin: 8px 8px 0; }
#home .path .path-copy, #home .path:first-child .path-copy, #home .path:last-child .path-copy { padding: 6px 20px 18px; border-left: 0; }
#home .path-copy h3 { font-size: 22px; }
#home .path-copy p { margin: 6px 0 14px; font-size: 16px; }
#home .arrow { align-self: flex-end; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--paper); font-size: 22px; }
#home .caps { display: block; min-height: 0; margin-top: 52px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#home .caps h3 { margin-bottom: 12px; padding: 0; border: 0; font-size: 22px; }
#home .caps .cap, #home .caps .cap:nth-of-type(n) { position: relative; gap: 14px; min-height: 54px; padding: 0 16px; border-left: 0; background: var(--paper-2); }
#home .caps .cap:nth-of-type(1) { border-radius: 18px 18px 0 0; }
#home .caps .cap:last-child { border-radius: 0 0 18px 18px; }
#home .caps .cap + .cap::before { content: ""; position: absolute; left: 52px; right: 0; top: 0; height: 1px; background: var(--line); }
#home .cap svg { width: 22px; height: 22px; color: var(--ink); }
#home .cap-body { display: flex; align-items: center; gap: 12px; }
#home .cap-label { flex: none; color: var(--ink); font: 400 17px/1.4 var(--sans); letter-spacing: 0; }
#home .cap select { flex: 1; min-width: 0; height: 54px; padding-right: 22px; text-align: right; text-align-last: right; color: var(--ink-3); font-size: 17px; font-weight: 400; background-image: var(--landing-select-disclosure); background-size: 16px; }
#home .hero-layer { margin-bottom: 12px; font-size: 14px; }
#home .hero-attach { width: 44px; }
#rivals .rivals-turn { margin-top: 64px; }
#rivals .rivals-turn-lede { font-size: 17px; }
#rivals .rivals-turn-line { font-size: clamp(34px, 10.4vw, 46px); }
#home .night-inner { gap: 40px; padding-block: 72px; }
#home .night .h2 { font-size: clamp(32px, 9.2vw, 42px); }
#home .dev-p { margin: 16px 0 22px; font-size: 17px; }
#home .dev-acts { gap: 6px 22px; }
#home .dev-btn { height: 52px; font-size: 16px; }
#home .code { border-radius: 16px; }
#home .code pre { padding: 16px 14px 20px; font-size: clamp(10.5px, 3vw, 12px); }
#home .stage .code pre { padding-bottom: 54px; }
#home .code .cl { width: auto; }
#home .reply { width: 68%; margin: -58px -4px 0 auto; }
#home .reply figcaption { font-size: 11.5px; }
#home .final-also { margin-top: 18px; }
#home .foot-line { margin: 0; }
#home .faq { gap: 16px; }
#home .faq-title { font-size: 31px; }
#home .qa summary { min-height: 60px; font-size: 17px; }
#home .qa p { font-size: 16px; }
#home .final { padding-block: 104px 72px; }
#home .h-final { font-size: clamp(46px, 13.4vw, 61px); }
#home .h-final .br-phone { display: inline; }
#home .btn { display: flex; width: 100%; min-height: 56px; margin-top: 32px; font-size: 17px; }
#home .foot { flex-wrap: wrap; column-gap: 20px; row-gap: 0; padding-block: 16px calc(16px + env(safe-area-inset-bottom)); }
#home .foot nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 0 20px; }
}
@media (hover: none) {
#home .cap select { font-size: 16px; }
.page[data-view="home"] .landing-header-cta, #home .btn, #home .example-card, #home .arrow { transition: scale 180ms var(--ease), background-color 180ms ease; }
.page[data-view="home"] .landing-header-cta:active, #home .btn:active, #home .arrow:active { scale: .96; }
#home .example-card:active { scale: .985; }
}
#home .clip, #home .path-art { mix-blend-mode: var(--landing-art-blend); }
#home .clip img, #home .path-art img { filter: var(--landing-art-filter) brightness(1.012); mix-blend-mode: normal; }
#home :is(.play, .dur) { background: #171a19; color: #fff; }
#home .code code { display: block; font: inherit; white-space: normal; }
#home .btn, #home .btn:hover, #home .poster-go { color: #171a19; }
@media (max-width: 640px) {
.page[data-view="home"] { --bar-h: 56px; }
.page[data-view="home"] #operator-lock { display: none; }
}
html[data-theme="dark"] #home { --landing-art-blend: screen; --cap-raise: #2c3330; --cap-sheet: #1e2321; --cap-sheet-edge: #333a37; }
html[data-theme="dark"] #home::after { mix-blend-mode: screen; opacity: .045; }
html[data-theme="dark"] .page[data-view="home"] .landing-header-cta:hover { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) #home { --landing-art-blend: screen; --cap-raise: #2c3330; --cap-sheet: #1e2321; --cap-sheet-edge: #333a37; }
html:not([data-theme]) #home::after { mix-blend-mode: screen; opacity: .045; }
html:not([data-theme]) .page[data-view="home"] .landing-header-cta:hover { background: var(--ink-2); }
}
html:has(#home:not([hidden])), body:has(#home:not([hidden])) { overflow-x: clip; }
html:has(#home:not([hidden])) { scroll-behavior: smooth; }
#home { font-synthesis: none; font-kerning: normal; }
#home p { text-wrap: pretty; }
#home #hero-topic::placeholder { transition: color 240ms ease; }
#home #hero-topic:focus::placeholder { color: var(--ink-4); }
.page[data-view="home"] .arr > i { display: block; font-style: normal; }
.page[data-view="home"] :is(.landing-header-cta, .btn) .arr { overflow: clip; }
.page[data-view="home"] .landing-header-cta:hover .arr { translate: none; }
.page[data-view="home"] .landing-header-cta:hover .arr > i { --through: 125%; animation: arrow-ne 560ms both; }
#home .btn:hover .arr { translate: none; }
#home .btn:hover .arr > i { --through: 130%; animation: arrow-e 560ms both; }
#home .hero-start-go { overflow: clip; }
#home .hero-start-go:hover svg { --through: 175%; translate: none; animation: arrow-ne 560ms both; }
#home .foot a:not(.wordmark) { background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 12px / 0 1px; transition: color 160ms ease, background-size 420ms var(--ease); }
#home .foot a:not(.wordmark):hover { background-position: left 0 bottom 12px; background-size: 100% 1px; }
#home .poster { transition: box-shadow 500ms var(--ease), transform 500ms var(--ease), border-color 200ms ease, scale 220ms var(--ease); }
#home .example-card:active .poster { scale: .985; }
#home .cap svg { transition: color 200ms ease; }
#home .cap:hover svg, #home .cap:focus-within svg { color: var(--signal-text); }
@supports (interpolate-size: allow-keywords) {
#home { interpolate-size: allow-keywords; }
#home details::details-content { block-size: 0; overflow-y: clip; transition: block-size 480ms var(--ease), content-visibility 480ms allow-discrete; }
#home details[open]::details-content { block-size: auto; }
}
#home .face { transform: perspective(1400px) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg)); transition: transform 1100ms var(--ease); }
#home .hero-sheet::before { translate: var(--htx, 0px) var(--hty, 0px); transition: translate 1300ms var(--ease); }
#home .code .tk-c { color: #fff; }
#home .code .tk-f { color: #93a69c; }
#home .code .tk-p { color: #6f827a; }
#home .code .tk-k { color: #d3ded8; }
#home .code .tk-s { color: #ffc2b0; }
#home .code .tk-v { color: #ff8f73; }
#home .copy.is-copied { color: #ffc2b0; }
#home .copy.is-copied::before { content: ""; width: 10px; height: 5px; margin: -3px 1px 0 2px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; rotate: -45deg; animation: pop 380ms var(--ease) both; }
#home .night-inner { z-index: 1; }
#home .night::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 40%), #f044201f, transparent 70%); opacity: 0; transition: opacity 700ms ease; }
#home .night.is-lit::after { opacity: 1; }

:root { --create-ease: cubic-bezier(.16, 1, .3, 1); }
.home { width: min(var(--col-max), 100%); margin: 0 auto; }
.page[data-view="composer"] > .main { padding-inline: 0; }
.page[data-view="composer"] .bar-links { margin-left: auto; }
.hero-start-box { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 20px; background: var(--paper); transition: border-color 160ms ease, box-shadow 220ms ease; }
#hero-topic { flex: 1; min-width: 0; min-height: 44px; max-height: 7.5em; padding: 10px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 18px/1.45 var(--sans); letter-spacing: -.012em; field-sizing: content; }
#hero-topic::placeholder { color: var(--ink-3); }
.hero-start-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--signal); color: #171a19; transition: background-color 160ms ease, scale 120ms var(--create-ease); }
.hero-start-go svg { transition: translate 160ms ease; }
.hero-start-go:hover { background: #f76342; }
.hero-start-go:hover svg { translate: 1.5px -1.5px; }
.hero-start-go:active { scale: .96; }
:is(.hero-start-go, .try-chip):focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; }
.create { padding-inline: var(--gutter); padding-block: clamp(28px, 6vh, 64px) 72px; }
.create-inner { max-width: 860px; margin: 0 auto; }
.create-title { margin: 0 0 22px; font: 800 clamp(32px, 3.3vw, 46px)/1.08 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.create-title .wm { display: inline-block; vertical-align: baseline; clip-path: inset(0); padding: .02em .07em .16em; margin: -.02em -.07em -.16em; }
.create-title .w { display: inline-block; }
.create .composer-box { position: relative; height: auto; min-height: 210px; border-radius: 14px; box-shadow: 0 1px 2px #171a190a, 0 18px 44px -24px #171a1926; transition: border-color 160ms ease, box-shadow 220ms ease; view-transition-name: ivan-prompt; }
.create .composer-box:focus-within { border-color: var(--ink-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent), 0 16px 36px -16px #171a1929; }
.create .composer-box::after { display: none; }
.create .field { height: auto; min-height: 4.5em; max-height: min(40vh, 340px); field-sizing: content; font: 400 21px/1.5 var(--sans); letter-spacing: -.012em; }
@supports not (field-sizing: content) { .create .field { flex: none; height: 6em; overflow-y: auto; } }
.create .explain > span:first-child { white-space: nowrap; }
.create .explain { background: var(--paper-2); color: var(--ink-3); }
.create .composer-form.has-content .explain { background: var(--signal); color: #171a19; }
.create .composer-form.has-content .explain:hover { background: #f76342; }
.create .composer-form:not(.has-content) .explain:hover { background: var(--paper-2); }
.create-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 8px; }
.create-length-note { margin: 6px 2px 0; color: var(--ink-3); font: 400 13px/1.5 var(--sans); text-wrap: balance; }
.create-label { margin: 0 0 12px; padding: 0; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.create-try { display: grid; grid-template-rows: 1fr; margin-top: 28px; transition: grid-template-rows 220ms var(--create-ease), opacity 220ms var(--create-ease), margin-top 220ms var(--create-ease), visibility 0s linear; }
.create-try-inner { min-height: 0; overflow: hidden; }
.create-try.is-quiet { grid-template-rows: 0fr; margin-top: 0; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, 220ms; }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.try-chip { min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 400 14px/1.35 var(--sans); text-align: left; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; animation: create-chip 260ms var(--create-ease) backwards; animation-delay: calc(var(--i) * 35ms); }
.try-chip:hover { border-color: var(--ink-4); color: var(--ink); }
@keyframes create-chip { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.create .recently { margin-top: 48px; }
.recently .row-question { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recently .row-question-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recently .row-tag { flex: none; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); font: 500 11px/16px var(--sans); letter-spacing: .01em; white-space: nowrap; }
.create-recent-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.create .recently-label { margin: 0 0 12px; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.create .all-runs { position: static; margin: 0; }
.create.is-entering :is(.create-try, .recently), .create.is-entering:not(.is-morphing) .composer-box { animation: create-rise 520ms var(--create-ease) backwards; }
.create.is-entering .composer-box { animation-delay: 40ms; }
.create.is-entering .create-try { animation-delay: 140ms; }
.create.is-entering .recently { animation-delay: 190ms; }
.create.is-entering .create-title .w { animation: word-rise 560ms var(--create-ease) backwards; }
.create.is-entering .create-title > :nth-child(2) .w { animation-delay: 54ms; }
.create.is-entering .create-title > :nth-child(3) .w { animation-delay: 108ms; }
.create.is-entering .create-title > :nth-child(4) .w { animation-delay: 162ms; }
@keyframes create-rise { from { opacity: 0; translate: 0 10px; } }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 280ms; animation-delay: 60ms; animation-fill-mode: both; }
::view-transition-old(ivan-prompt) { animation-duration: 200ms; }
::view-transition-new(ivan-prompt) { animation-duration: 360ms; }
::view-transition-group(ivan-prompt) { animation-duration: 540ms; animation-timing-function: var(--create-ease); }
::view-transition-old(ivan-prompt), ::view-transition-new(ivan-prompt) { height: 100%; object-fit: none; object-position: left top; }
html.is-theming::view-transition-old(root), html.is-theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.is-theming * { view-transition-name: none !important; transition: none !important; }
.source-dialog[open] { animation: create-dialog-enter 240ms var(--create-ease) both; }
@keyframes create-dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .source-dialog[open] { animation: none; } }
@media (max-width: 640px) {
.create-title { font-size: 30px; }
.create .field { font-size: 18px; }
}
@media (max-width: 600px) {
.recently .row-question-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.create.is-entering :is(.create-title, .create-try, .recently, .composer-box),
.create.is-entering .create-title .w, .try-chip { animation: none !important; }
.hero-start-box, .hero-start-go, .hero-start-go svg,
.create .composer-box, .create-try, .create-try.is-quiet { transition: none; }
.hero-start-go:hover svg { translate: none; }
.hero-start-go:active { scale: none; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.page[data-view="composer"] {
--col-max: 1280px;
--edge: var(--frame-edge);
--signal-hover: #f76342;
--sh-rest: 0 1px 1px var(--landing-shadow-soft), 0 12px 32px -14px var(--landing-shadow-deep);
--sh-lift: 0 2px 3px var(--landing-shadow-soft), 0 28px 56px -18px var(--landing-shadow-deep);
}
.page[data-view="composer"] .bar { border-bottom: 0; }
.page[data-view="composer"] .bar-inner { max-width: var(--col-max); }
.page[data-view="composer"] .bar-links { align-items: center; gap: 4px; }
.page[data-view="composer"] .bar-link {
display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
border: 0; border-radius: 999px; background: none; color: var(--ink-2);
font: 500 14px/1 var(--sans); letter-spacing: -.004em;
transition: color 160ms ease, background-color 160ms ease;
}
.page[data-view="composer"] .bar-link:hover { color: var(--ink); background: var(--paper-2); }
.page[data-view="composer"] .bar-link svg { width: 16px; height: 16px; opacity: .85; }
.page[data-view="composer"] .profile {
position: relative; width: 34px; height: 34px; margin-left: 14px; border: 0;
background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--ink); font: 600 13px/1 var(--sans);
transition: box-shadow 160ms ease, background-color 160ms ease;
}
.page[data-view="composer"] .profile::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.page[data-view="composer"] .profile:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
.create { padding-block: clamp(28px, 4.2vw, 60px) 0; }
.create-inner { width: min(880px, 100%); max-width: none; margin-inline: auto; }
.create-title { margin: 0 0 26px -.03em; font: 800 clamp(34px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -.052em; }
.create .composer-form { position: relative; z-index: 2; }
.create .composer-box::before { content: none; }
.create .composer-box::after {
content: ""; display: block; position: absolute; inset: -1px; z-index: -1; opacity: 1;
border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper);
box-shadow: inset 0 1px 0 #ffffff99; pointer-events: none; transform: none; animation: none;
transition: border-color 160ms ease, box-shadow 320ms var(--create-ease);
}
.create .composer-box {
position: relative; z-index: 1; height: auto; min-height: 0;
border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper);
box-shadow: var(--sh-rest);
transition: box-shadow 320ms var(--create-ease);
}
.create .composer-box:hover { box-shadow: var(--sh-lift); }
.create .composer-box:focus-within { box-shadow: var(--sh-lift); }
.create .composer-box:focus-within::after { opacity: 1; border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f, inset 0 1px 0 #ffffff99; }
.create .composer-content { position: relative; flex: none; padding: 22px 24px 8px; gap: 8px; }
.create .field { flex: none; height: auto; min-height: 4.4em; max-height: min(40vh, 340px); overflow-y: auto; field-sizing: content; font: 400 21px/1.5 var(--sans); letter-spacing: -.012em; }
@supports not (field-sizing: content) { .create .field { height: 6.6em; } }
.create .caret { position: absolute; left: 23px; top: 24px; width: 2px; height: 26px; border-radius: 1px; background: var(--ink); animation: blink 1.1s steps(1, end) 1.4s infinite; }
.create .composer-box:focus-within .caret, .create .composer-form.has-content .caret { display: none; }
.create .count { right: 24px; bottom: 6px; color: var(--ink-4); font: 500 11px/1.5 var(--data); }
.create .composer-toolbar { min-height: 0; gap: 4px; padding: 8px 8px 8px 12px; border-top: 1px solid var(--line); }
.create .composer-input-actions { gap: 2px; }
.create .upload, .create .dictate { width: 40px; height: 40px; border-radius: 10px; color: var(--ink-2); }
.create .upload:hover, .create .dictate:hover { color: var(--ink); background: var(--paper-2); }
.create .upload svg, .create .dictate svg { width: 20px; height: 20px; }
.create .dictate.is-recording {
color: var(--oxide); background: color-mix(in srgb, var(--oxide) 12%, transparent);
box-shadow: 0 0 0 calc(var(--level, 0) * 7px) color-mix(in srgb, var(--oxide) 20%, transparent);
transition: box-shadow 90ms linear;
}
.create .dictate.is-recording:hover { background: color-mix(in srgb, var(--oxide) 18%, transparent); }
.create .dictate.is-busy { color: var(--ink-4); }
.create .composer-settings { gap: 2px; margin-left: auto; }
.create .choice-picker > summary {
justify-content: flex-start; gap: 7px; min-height: 36px; height: 36px; padding: 0 10px;
border: 0; border-radius: 999px; background: none; color: var(--ink-2);
font: 500 13.5px/1 var(--sans); letter-spacing: -.004em;
transition: color 160ms ease, background-color 160ms ease;
}
.create .choice-picker > summary:hover, .create .choice-picker[open] > summary { color: var(--ink); background: var(--paper-2); }
.create .choice-picker > summary svg { width: 17px; height: 17px; opacity: .8; }
.create .choice-picker > summary svg:last-child:not(:first-child) { width: 13px; height: 13px; opacity: .6; }
.create .more-options > summary { width: 36px; padding: 0; justify-content: center; }
.create .choice-panel { top: calc(100% + 8px); min-width: 176px; padding: 6px; border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--sh-lift); }
.create .choice-panel > label { min-height: 36px; padding: 0 10px; border-radius: 8px; font: 500 14px/1 var(--sans); }
.create .choice-panel > label:has(input:checked) { background: var(--paper-2); color: var(--ink); }
.create .choice-panel label:has(input:checked)::after { color: var(--signal-text); }
.create .explain {
gap: 12px; height: 44px; min-width: 0; margin-left: 8px; padding: 0 6px 0 18px;
border-radius: 999px; background: var(--paper-2); color: var(--ink-3);
font: 600 14.5px/1 var(--sans); letter-spacing: -.004em;
box-shadow: inset 0 0 0 1px var(--line);
transition: background-color 220ms ease, color 220ms ease, transform 200ms var(--create-ease), box-shadow 220ms ease;
}
.create .explain > span:last-child {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--line); color: var(--ink-3); font: 500 16px/1 var(--sans);
transition: background-color 220ms ease, color 220ms ease, translate 220ms var(--create-ease);
}
.create .composer-form.has-content .explain {
background: var(--ink); color: var(--paper);
box-shadow: 0 1px 2px #171a1933, 0 10px 22px -12px #171a198c, inset 0 1px 0 #ffffff1f;
}
.create .composer-form.has-content .explain > span:last-child { background: var(--signal); color: #171a19; box-shadow: inset 0 1px 0 #ffffff47; }
.create .composer-form.has-content .explain:hover { background: #242a28; transform: translateY(-1px); }
html[data-theme="dark"] .create .composer-form.has-content .explain:hover { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .create .composer-form.has-content .explain:hover { background: var(--ink-2); }
}
.create .composer-form.has-content .explain:hover > span:last-child { translate: 2px -1px; background: var(--signal-hover); }
.create .composer-form:not(.has-content) .explain:hover { background: var(--paper-2); }
.create-meta { align-items: center; margin-top: 26px; padding: 0 4px; animation: create-rise 900ms 500ms var(--create-ease) backwards; }
.create .composer-notice { color: var(--ink-3); font: 400 13px/1.5 var(--sans); }
.create-length-note { margin: 10px 4px 0; max-width: 60ch; }
.create-label { margin: 0 0 14px; }
.create-try { margin-top: 44px; }
.try-chip {
display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px;
border: 0; border-radius: 999px; background: var(--paper); color: var(--ink-2);
box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px var(--landing-shadow-soft);
transition: box-shadow 200ms var(--create-ease), transform 200ms var(--create-ease), color 160ms ease;
}
.try-chip::after { content: "\2192"; color: var(--ink-4); transition: translate 180ms ease, color 160ms ease; }
.try-chip:hover { color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 18px -10px var(--landing-shadow-deep); }
.try-chip:hover::after { color: var(--signal-text); translate: 3px 0; }
.create .recently { margin-top: 44px; max-width: none; }
.create .recently-label { margin: 0; }
.create-recent-heading { margin-bottom: 12px; }
.create .all-runs { color: var(--ink-2); font: 500 13px/1.4 var(--sans); }
.create .all-runs:hover { color: var(--signal-text); }
.create .recently .row-list { display: block; border-top: 1px solid var(--line); }
.create .recently .row-list > li, .create .recently .row { display: block; grid-template-columns: none; }
.create .recently .row {
display: grid; grid-template-columns: 112px minmax(0, 1fr) auto;
grid-template-areas: "poster question time" "poster meta time";
align-items: center; column-gap: 18px; row-gap: 3px;
padding: 12px 34px 12px 0; border-bottom: 1px solid var(--line); box-shadow: none;
}
.create .recently .row:hover { background: none; }
.create .row-poster {
grid-area: poster; position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip;
border: 1px solid var(--edge); border-radius: 6px; background: #fff;
box-shadow: var(--sh-rest); transition: box-shadow 400ms var(--create-ease), border-color 200ms ease;
}
.create .row-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.create .row:hover .row-poster { border-color: var(--signal-text); box-shadow: var(--sh-lift); }
.create .recently .row-question { grid-area: question; align-items: baseline; font: 500 16px/1.35 var(--sans); letter-spacing: -.015em; }
.create .row:hover .row-question { color: var(--signal-text); }
.create .recently .row-tag { padding: 1px 7px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 11px/16px var(--sans); }
.create .recently .row-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0; margin: 0; color: var(--ink-3); font: 400 13px/1.4 var(--sans); }
.create .recently .row-meta-field + .row-meta-field::before { content: "\00b7"; margin: 0 6px; color: var(--line-2); }
.create .recently .status-word { grid-area: time; margin: 0; color: var(--ink-3); font: 400 13px/16px var(--sans); }
.create .recently .row-menu { right: 0; }
.create .recently .row .status-word:empty { display: block; }
.page[data-view="composer"] .studio-footer { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); }
@media (max-width: 640px) {
.page[data-view="composer"] { --bar-h: 60px; }
.page[data-view="composer"] .bar-inner { flex-wrap: nowrap; gap: 2px; height: 56px; }
.page[data-view="composer"] .bar-link { padding: 0 9px; }
.page[data-view="composer"] .bar-link > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page[data-view="composer"] .profile { margin-left: 10px; width: 32px; height: 32px; }
.page[data-view="composer"] .profile::before { left: -10px; }
.create-title { margin-bottom: 20px; font-size: clamp(31px, 8.6vw, 40px); }
.create .composer-content { padding: 18px 18px 6px; }
.create .field { font-size: 18px; min-height: 4em; }
.create .caret { left: 17px; top: 20px; height: 22px; }
.create .composer-toolbar { flex-wrap: wrap; gap: 2px; padding: 8px; }
.create .composer-settings { margin-left: 0; }
.create .choice-picker > summary { padding: 0 8px; gap: 5px; font-size: 13px; }
.create .explain { margin-left: auto; height: 40px; padding-left: 14px; }
.create .explain > span:last-child { width: 28px; height: 28px; }
.create-try, .create .recently { margin-top: 34px; }
.create .recently .row { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "poster question" "poster meta"; column-gap: 12px; }
.create .recently .status-word { display: none; }
.create .recently .row-question { white-space: normal; font-size: 15px; }
.create .recently .row-question-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.create .caret, .create-meta { animation: none !important; }
.create .caret { display: none; }
.try-chip, .create .row-poster, .create .explain { transition: none; }
}
.create .recently .row::before { content: none; }
.create .composer-sources-shell {
display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); min-width: 0; margin-top: -8px;
transition: grid-template-rows 260ms var(--create-ease), margin-top 260ms var(--create-ease);
}
.create .composer-box.has-sources .composer-sources-shell { grid-template-rows: 1fr; margin-top: 4px; }
.create .composer-sources {
display: flex; align-items: flex-start; gap: 8px; min-width: 0; min-height: 0; margin: 0 -4px; padding: 4px 4px 8px;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scroll-padding-inline: 4px;
scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.create .composer-sources[data-overflow="end"] { mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
.create .composer-sources[data-overflow="start"] { mask-image: linear-gradient(to right, transparent, #000 44px); }
.create .composer-sources[data-overflow="start end"] { mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.source-card {
position: relative; flex: 0 0 264px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; align-items: center; column-gap: 11px;
min-height: 60px; padding: 9px 6px 9px 9px; border: 1px solid var(--line-2); border-radius: 12px;
background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--landing-shadow-soft);
scroll-snap-align: start; overflow: hidden; cursor: pointer; outline: 0;
transition: border-color 160ms ease, background-color 160ms ease, opacity 240ms ease, translate 240ms var(--create-ease);
}
@starting-style { .source-card { opacity: 0; translate: 0 6px; } }
.source-card:hover { border-color: var(--ink-4); }
.source-card:focus-visible { border-color: var(--ink-3); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal-text); }
.create .walk-row { display: flex; min-width: 0; margin: 2px 0 6px; }
.walk-switch {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; max-width: 100%;
padding: 10px 14px 10px 12px; border: 1px solid var(--line-2); border-radius: 12px;
background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
@starting-style { .walk-switch { opacity: 0; translate: 0 6px; } }
.walk-switch:hover { border-color: var(--ink-4); }
.walk-switch:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal-text); }
.walk-switch[aria-checked="true"] { border-color: var(--ink-3); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }
.walk-switch:disabled { cursor: default; opacity: .6; }
.walk-knob { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--line-2); transition: background-color 160ms ease; }
.walk-knob::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
background: var(--paper); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: translate 180ms var(--create-ease);
}
.walk-switch[aria-checked="true"] .walk-knob { background: var(--ink); }
.walk-switch[aria-checked="true"] .walk-knob::after { translate: 16px 0; }
.walk-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.walk-copy b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.walk-copy span { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.source-glyph {
display: grid; place-items: center; width: 36px; height: 40px; border-radius: 6px; overflow: hidden;
background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.source-card[data-type="slides"] .source-glyph, .source-card[data-type="image"] .source-glyph { height: 36px; }
.source-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.source-card-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.source-card-title { display: flex; min-width: 0; font: 600 13.5px/19px var(--sans); letter-spacing: -.006em; white-space: nowrap; }
.source-name-stem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.source-name-ext { flex: none; }
.source-card-detail { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-3); font: 450 12px/17px var(--sans); font-variant-numeric: tabular-nums; }
.source-card-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-check { flex: none; display: inline-grid; color: var(--ink-3); }
.source-check[hidden], .source-card-error[hidden], .source-retry[hidden] { display: none; }
.source-remove {
align-self: start; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; padding: 0;
border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.source-remove:hover { background: var(--paper-2); color: var(--ink); }
.source-remove:disabled { opacity: .4; cursor: default; }
:is(.source-remove, .source-retry):focus-visible { outline: 2px solid var(--signal-text); outline-offset: 1px; }
.source-progress {
position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--signal);
transform-origin: left center; transform: scaleX(var(--progress, 0)); opacity: 0;
transition: transform 200ms linear, opacity 400ms ease 120ms;
}
.source-card:is([data-state="uploading"], [data-state="queued"])::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line);
}
.source-card:is([data-state="uploading"], [data-state="queued"]) .source-progress { opacity: 1; transition: transform 200ms linear, opacity 0ms; }
.source-card[data-state="queued"] .source-glyph, .source-card[data-state="checking"] .source-glyph { opacity: .6; }
.source-card[data-state="reading"]::after {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 6%, transparent) 50%, transparent);
animation: source-read 1.7s cubic-bezier(.45, 0, .25, 1) infinite;
}
.source-card[data-state="reading"] .source-card-meta { color: var(--ink-2); }
@keyframes source-read { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.source-card.has-error {
flex-basis: 344px; align-items: start;
border-color: color-mix(in srgb, var(--error) 50%, var(--line-2));
background: color-mix(in srgb, var(--error) 4%, var(--paper));
}
.source-card.has-error .source-glyph { color: var(--error-ink); background: color-mix(in srgb, var(--error) 9%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 22%, transparent); }
.source-card-detail[hidden], .source-card-problem[hidden] { display: none; }
.source-card-problem { margin: 0; color: var(--error-ink); font: 500 12px/16px var(--sans); white-space: normal; overflow-wrap: anywhere; }
.source-retry {
display: inline; margin: 0 0 0 .4em; padding: 0; border: 0; background: none; color: var(--ink); white-space: nowrap;
font: 600 12px/16px var(--sans); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer;
}
.source-retry:hover { text-decoration-color: currentColor; }
.source-retry:disabled { opacity: .5; cursor: default; }
.create .composer-drop {
position: absolute; inset: 6px; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
border: 1.5px dashed color-mix(in srgb, var(--signal) 75%, transparent); border-radius: 13px;
background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink);
pointer-events: none; opacity: 0; transition: opacity 140ms ease;
}
.create .composer-box.is-dragging-files .composer-drop { opacity: 1; }
.composer-drop svg { margin-bottom: 4px; color: var(--signal-text); rotate: -14deg; }
.composer-drop-title { font: 650 17px/1.3 var(--sans); letter-spacing: -.012em; }
.composer-drop-types { color: var(--ink-3); font: 450 13px/1.4 var(--sans); }
.create .composer-box.is-dragging:not(.is-dragging-files) { outline: 2px solid var(--signal); outline-offset: 3px; }
.create .explain.is-waiting > span:first-child { font-variant-numeric: tabular-nums; }
#source-reader:not([data-mode="reading"]) .source-reading,
#source-reader[data-mode="text"] :is(.source-figure, .source-file-note),
#source-reader[data-mode="image"] :is(.source-search, #source-preview-text, #source-page-previous, #source-page-next, #source-page-label, .source-file-note),
#source-reader[data-mode="file"] :is(.source-search, #source-preview-text, #source-page-previous, #source-page-next, #source-page-label, .source-figure),
#source-reader[data-mode="reading"] :is(.source-search, #source-preview-text, #source-page-previous, #source-page-next, #source-page-label, .source-figure, .source-file-note) { display: none; }
.source-dialog .source-reading {
max-height: min(52dvh, 480px); margin: 0 0 12px; padding: 20px 24px; overflow: auto; overscroll-behavior: contain;
border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink);
scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.source-dialog .source-reading p { max-width: 64ch; margin: 0 0 .9em; color: var(--ink); font: 400 15px/1.65 var(--sans); white-space: pre-line; overflow-wrap: anywhere; }
.source-dialog .source-reading p:last-child { margin-bottom: 0; }
.source-dialog .source-reading:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
.source-figure { display: grid; place-items: center; margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.source-figure img { display: block; max-width: 100%; max-height: min(60dvh, 520px); border-radius: 4px; object-fit: contain; }
.source-dialog .source-file-note { margin: 0 0 12px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font: 400 14px/1.55 var(--sans); }
.source-dialog #source-reader-status:empty { min-height: 0; margin: 0; }
@media (max-width: 600px) {
.source-card { flex-basis: 214px; min-height: 56px; grid-template-columns: 32px minmax(0, 1fr) 28px; column-gap: 9px; padding: 8px 4px 8px 8px; }
.source-glyph { width: 32px; height: 36px; }
.source-card[data-type="slides"] .source-glyph, .source-card[data-type="image"] .source-glyph { height: 32px; }
.source-card.has-error { flex-basis: 296px; }
.composer-drop-title { font-size: 15px; }
.source-dialog .source-reading { padding: 16px; }
.source-dialog .source-reading p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
.create .composer-sources-shell, .source-card, .source-progress, .create .composer-drop, .walk-switch, .walk-knob, .walk-knob::after { transition: none; }
@starting-style { .source-card { opacity: 1; translate: none; } }
.source-card[data-state="reading"]::after { animation: none; width: 100%; background: color-mix(in srgb, var(--signal) 5%, transparent); }
}
.create { --pro-ease: cubic-bezier(.34, 1.56, .64, 1); }
.create .composer-toolbar { position: relative; }
.create .power {
position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px;
height: 36px; margin-left: 6px; padding: 0 13px 0 10px; border-radius: 999px;
color: var(--ink-2); font: 500 13.5px/1 var(--sans); letter-spacing: -.004em;
box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; touch-action: pan-y;
user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
transition: background-color 320ms ease, color 320ms ease, box-shadow 320ms ease, scale 160ms var(--create-ease);
}
.create .power[hidden] { display: none; }
.create .power:hover { color: var(--ink); background: var(--paper-2); }
.create .power:active { scale: .96; }
.create .power:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
.create .power[aria-disabled="true"] { cursor: default; scale: none; opacity: .72; }
.create .composer-form.is-powered .power {
background: var(--ink); color: var(--paper); font-weight: 600;
box-shadow: 0 1px 2px #171a1933, 0 8px 18px -10px #f04420a6, inset 0 1px 0 #ffffff24;
}
.create .composer-form[data-tier="max"] .power {
box-shadow: 0 1px 2px #171a1933, 0 10px 24px -8px #f04420d9, 0 0 0 1px #f0442073, inset 0 1px 0 #ffffff24;
}
.create .power.is-surge { animation: power-surge 950ms cubic-bezier(.2, .8, .2, 1); }
@keyframes power-surge {
0% { box-shadow: 0 0 0 0 #ffb23f00; }
30% { box-shadow: 0 0 0 3px #ffb23f99, 0 0 24px 2px #f0442080; }
100% { box-shadow: 0 0 0 14px #ffb23f00, 0 10px 24px -8px #f04420d9; }
}
.create .power-gauge { flex: none; width: 30px; height: 20px; overflow: visible; }
.create .power-seg { fill: none; stroke: var(--pro-unlit); stroke-width: 3.2; transition: stroke 160ms ease; }
.create .composer-form.is-powered .power-seg { stroke: var(--pro-unlit-on); }
.create .power-seg.is-lit { stroke: currentColor; }
.create .composer-form[data-tier="pro"] .power-seg.is-lit { stroke: var(--pro-amber); }
.create .composer-form[data-tier="max"] .power-seg.is-lit:nth-child(1) { stroke: #ffc65c; }
.create .composer-form[data-tier="max"] .power-seg.is-lit:nth-child(2) { stroke: #ff9a2e; }
.create .composer-form[data-tier="max"] .power-seg.is-lit:nth-child(3) { stroke: #ff5a2e; filter: drop-shadow(0 0 1.6px #f04420); }
.create .power-needle { transform: rotate(-62deg); transform-box: view-box; transform-origin: 15px 16.5px; }
.create .power-needle line { stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.create .power-needle circle { fill: currentColor; }
.create .composer-form[data-tier="max"] .power-needle { filter: drop-shadow(0 0 2px #ffb23fcc); }
.create .power-word { display: block; height: 16px; overflow: hidden; transition: width 420ms var(--pro-ease); }
.create .power-word-in {
display: flex; flex-direction: column; align-items: flex-start;
transform: translateY(calc(var(--step, 1) * -16px)); transition: transform 500ms var(--pro-ease);
}
.create .power-word-in > span { height: 16px; line-height: 16px; white-space: nowrap; }
.create .power-sparks { position: absolute; left: 36px; top: 19px; width: 0; height: 0; pointer-events: none; z-index: 1; }
.create .power-sparks i {
position: absolute; left: -1px; top: -4px; width: 2px; height: 8px; border-radius: 1px;
background: var(--pro-amber); opacity: 0; transform: rotate(var(--a)) translateY(-6px);
}
.create .power-sparks i:nth-child(even) { background: var(--signal); height: 6px; }
.create .power-sparks i:nth-child(1) { --a: 0deg; }
.create .power-sparks i:nth-child(2) { --a: 45deg; }
.create .power-sparks i:nth-child(3) { --a: 90deg; }
.create .power-sparks i:nth-child(4) { --a: 135deg; }
.create .power-sparks i:nth-child(5) { --a: 180deg; }
.create .power-sparks i:nth-child(6) { --a: 225deg; }
.create .power-sparks i:nth-child(7) { --a: 270deg; }
.create .power-sparks i:nth-child(8) { --a: 315deg; }
.create .power.is-burst .power-sparks i { animation: power-spark 600ms cubic-bezier(.1, .7, .3, 1); }
.create .power.is-burst .power-sparks i:nth-child(odd) { animation-delay: 25ms; }
@keyframes power-spark {
0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scaleY(1); }
100% { opacity: 0; transform: rotate(var(--a)) translateY(-20px) scaleY(.3); }
}
.haptic-switch { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.create .power-rim { position: absolute; left: -1px; top: -1px; z-index: 0; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; opacity: 0; transition: opacity 500ms ease; }
.create .power-rim path { fill: none; stroke-linecap: round; }
.create .power-rim-line, .create .power-rim-glow { stroke: var(--pro-amber); }
.create .power-rim-line { stroke-width: 1.6; }
.create .power-rim-glow { stroke-width: 5; opacity: .35; }
.create .power-rim-run { stroke: #fff6dc; stroke-width: 1.8; stroke-dasharray: 64 936; opacity: 0; transition: opacity 400ms ease; animation: power-rim-run 2.8s linear infinite paused; }
.create .composer-form[data-tier="pro"] .power-rim { opacity: .7; }
.create .composer-form[data-tier="max"] .power-rim { opacity: 1; }
.create .composer-form[data-tier="max"] :is(.power-rim-line, .power-rim-glow) { stroke: url(#power-rim-ember); }
.create .composer-form[data-tier="max"] .power-rim-line { stroke-width: 2; }
.create .composer-form[data-tier="max"] .power-rim-glow { opacity: .75; }
.create .composer-form[data-tier="max"] .power-rim-run { opacity: .95; animation-play-state: running; }
@keyframes power-rim-run { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.create .power-rim.is-flash .power-rim-glow { animation: power-rim-flash 800ms var(--create-ease); }
@keyframes power-rim-flash { 0% { opacity: .75; } 18% { opacity: 1; stroke-width: 12; } 100% { opacity: .75; stroke-width: 5; } }
.create .composer-form[data-tier] .composer-box { transition: box-shadow 500ms var(--create-ease); }
.create .composer-form[data-tier="pro"] .composer-box { box-shadow: var(--sh-rest), 0 24px 50px -32px #ffa033a6; }
.create .composer-form[data-tier="pro"] .composer-box:is(:hover, :focus-within) { box-shadow: var(--sh-lift), 0 24px 50px -32px #ffa033a6; }
.create .composer-form[data-tier="max"] .composer-box { box-shadow: var(--sh-rest), 0 26px 56px -28px #f04420b3; }
.create .composer-form[data-tier="max"] .composer-box:is(:hover, :focus-within) { box-shadow: var(--sh-lift), 0 26px 56px -28px #f04420b3; }
.create .composer-box.is-rev { animation: power-rev 300ms linear; }
@keyframes power-rev { 15% { translate: -1.6px 0; } 32% { translate: 1.5px 0; } 50% { translate: -1.1px 0; } 68% { translate: .8px 0; } 85% { translate: -.4px 0; } }
.create.is-sheeted .composer-form .power-rim { display: none; }
.create.is-sheeted .composer-form.is-powered .composer-box { box-shadow: none; }
.create .explain > span:last-child > span { grid-area: 1 / 1; }
.create .explain-bolt {
display: block; width: 13px; height: 16px; background: currentColor; opacity: 0; scale: .4;
-webkit-mask: var(--pro-bolt) center / contain no-repeat; mask: var(--pro-bolt) center / contain no-repeat;
transition: opacity 200ms ease, scale 360ms var(--pro-ease);
}
.create .explain-arrow { transition: opacity 180ms ease, scale 260ms var(--create-ease), rotate 260ms var(--create-ease); }
.create .composer-form.is-powered .explain-arrow { opacity: 0; scale: .4; rotate: 45deg; }
.create .composer-form.is-powered .explain-bolt { opacity: 1; scale: 1; }
.create .composer-form.has-content .explain > span:last-child { transition: background-color 350ms ease, box-shadow 350ms ease, color 220ms ease, translate 220ms var(--create-ease); }
.create .composer-form[data-tier="pro"].has-content .explain > span:last-child,
.create .composer-form[data-tier="pro"].has-content .explain:hover > span:last-child { background: linear-gradient(160deg, #ffe3a8, #ffb23f 58%, #ff9a2e) #ffb23f; }
.create .composer-form[data-tier="max"].has-content .explain > span:last-child { background: var(--pro-ember) #ff8a2a; box-shadow: inset 0 1px 0 #ffffff66, 0 0 14px -2px #ffa033b3; }
.create .composer-form[data-tier="max"].has-content .explain:hover > span:last-child { background: var(--pro-ember) #ff8a2a; translate: 0 -1px; }
.create .explain.is-pop > span:last-child { animation: explain-pop 620ms var(--pro-ease); }
@keyframes explain-pop { 35% { scale: 1.24; box-shadow: 0 0 0 4px #ffb23f59, 0 0 18px 2px #f0442066; } }
.create .tier-note {
display: block; min-width: 0; margin: 0; padding-left: 16px; text-indent: -16px;
color: var(--ink-3); font: 400 13.5px/1.45 var(--sans);
}
.create .tier-note-lead, .create .tier-note-part { white-space: nowrap; }
.create .tier-note.is-in { animation: tier-note-in 420ms var(--create-ease); }
@keyframes tier-note-in { from { opacity: 0; translate: 0 6px; } }
.create .tier-note b { color: var(--ink); font-weight: 650; }
.create .tier-sep { color: var(--ink-4); white-space: pre; }
.create .tier-note-bolt {
display: inline-block; width: 9px; height: 12px; margin-right: 7px; vertical-align: -1px; background: var(--ink-4);
-webkit-mask: var(--pro-bolt) center / contain no-repeat; mask: var(--pro-bolt) center / contain no-repeat;
}
.create .composer-form[data-tier="pro"] .tier-note-bolt { background: linear-gradient(160deg, #ffd27a, #ffa033); }
.create .composer-form[data-tier="max"] .tier-note-bolt { background: var(--pro-ember); }
.create .composer-form:has(.power[hidden]) .tier-note { display: none; }
.create .create-meta:has(#composer-notice-text:not(:empty)) .tier-note { display: none; }
.create .look-picker { position: static; flex: none; margin-left: 4px; }
.create .look-picker > summary { gap: 8px; padding: 0 10px 0 5px; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.create .look-picker > summary:hover, .create .look-picker[open] > summary { box-shadow: inset 0 0 0 1px var(--line-2); }
.create .look-picker > summary:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 2px; }
.create .look-picker > summary.is-landed { animation: look-landed 450ms var(--pro-ease); }
@keyframes look-landed { 40% { scale: 1.07; } }
.look-thumb { position: relative; flex: none; width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: #fff; }
.look-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #171a1914; }
.look-thumb[data-look="board"]::after { box-shadow: none; }
.look-swatch { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 120ms linear; }
.look-swatch[data-look="board"] { background: #1e2429; }
.create .look-picker > summary .look-swatch svg { display: block; width: 100%; height: 100%; opacity: 1; }
.look-thumb[data-look="picture"] > [data-look="picture"],
.look-thumb[data-look="flat"] > [data-look="flat"],
.look-thumb[data-look="doodle"] > [data-look="doodle"],
.look-thumb[data-look="board"] > [data-look="board"] { opacity: 1; }
.create .look-choices {
left: 0; right: auto; top: calc(100% + 8px); width: min(780px, 100%); min-width: 0;
padding: 14px; border-radius: 18px; transform-origin: top left;
}
.create .look-picker.opens-up > .look-choices { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.look-head {
float: left; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
margin: 2px 0 12px; padding: 0 4px; color: var(--ink); font: 650 14px/1.2 var(--sans); letter-spacing: -.01em;
}
.look-head > span { color: var(--ink-3); font: 500 12px/1.2 var(--sans); letter-spacing: 0; }
.look-grid { clear: both; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.create .look-choices .style-card {
position: relative; display: grid; align-content: start; gap: 7px; padding: 6px 6px 10px;
border-radius: 13px; color: var(--ink); cursor: pointer;
transition: background-color 150ms ease, box-shadow 200ms ease;
}
.create .look-choices .style-card::after { content: none; }
.create .look-choices .style-card:hover { background: var(--paper-2); }
.create .look-choices .style-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.create .look-choices .style-card:has(input:focus-visible) { outline: 2px solid var(--signal-text); outline-offset: 2px; }
.create .look-choices .style-card:has(input:disabled) { cursor: default; }
.look-picker[open] .style-card { animation: look-card-rise 420ms var(--create-ease) backwards; }
.look-picker[open] .style-card:nth-child(2) { animation-delay: 40ms; }
.look-picker[open] .style-card:nth-child(3) { animation-delay: 80ms; }
.look-picker[open] .style-card:nth-child(4) { animation-delay: 120ms; }
@keyframes look-card-rise { from { opacity: 0; translate: 0 8px; } }
.style-preview { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #171a191a; }
.style-preview.is-board { background: #1e2429; }
.style-preview img, .style-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.style-preview video { opacity: 0; transition: opacity 200ms ease; }
.style-card.is-playing .style-preview video { opacity: 1; }
.style-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; font: 650 14px/1.2 var(--sans); letter-spacing: -.01em; }
.style-name kbd { padding: 3px 5px; border-radius: 4px; color: var(--ink-3); font: 600 10.5px/1 var(--data); box-shadow: inset 0 0 0 1px var(--line-2); }
.style-detail { padding: 0 4px; color: var(--ink-3); font: 400 12.5px/1.35 var(--sans); }
@media (hover: none), (pointer: coarse) { .style-name kbd { display: none; } }
.look-flyer { position: fixed; z-index: 100; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 8px 12px #171a1959); }
.look-flyer > span { position: absolute; inset: 0; border-radius: 9px; background: #fff center / cover no-repeat; }
.look-flyer[data-look="picture"] > span { background-image: url('/assets/landing/style-illustrated.2937754df43a.webp'); }
.look-flyer[data-look="flat"] > span { background-image: url('/assets/landing/style-flat.5d43885ba1d7.webp'); }
.look-flyer[data-look="doodle"] > span { background-image: url('/assets/landing/style-doodle.b29bed43a638.webp'); }
.look-flyer[data-look="board"] > span { background-color: #1e2429; background-image: url('/assets/landing/style-board.ea16b5a0cb09.webp'); }
.create .composer-settings > .choice-picker { min-width: 0; max-width: 100%; justify-self: start; }
.create .composer-settings > .choice-picker > summary { max-width: 100%; }
.create .composer-settings [data-choice-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
@container composer (max-width: 760px) {
.create .composer-toolbar { display: grid; grid-template-columns: auto auto minmax(0, max-content) max-content minmax(0, 1fr) 36px; gap: 6px; }
.create .composer-settings { display: contents; }
.create .power { grid-row: 1; grid-column: 1; margin-left: 0; }
.create .look-picker { grid-row: 1; grid-column: 2; margin-left: 0; }
.create .composer-settings > :is(.choice-picker, .format-switch) { grid-row: 1; }
.create .composer-settings > .more-options { grid-column: -2; }
.create .composer-input-actions { grid-row: 2; grid-column: 1; }
.create .explain { grid-row: 2; grid-column: 2 / -1; justify-self: end; width: auto; margin-left: 0; }
.create .look-choices { width: 100%; }
.look-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container composer (max-width: 570px) {
.create .power { height: 34px; padding: 0 10px 0 8px; gap: 5px; font-size: 12.5px; }
.create .power-gauge { width: 26px; height: 18px; }
.create .power-sparks { left: 32px; top: 18px; }
.create .look-picker > summary { height: 34px; min-height: 34px; gap: 6px; padding: 0 8px 0 4px; font-size: 12.5px; }
.create .look-choices { padding: 10px; }
.look-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.create .look-choices .style-card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; padding: 6px; }
.create .look-choices .style-preview { grid-row: 1 / 3; }
.create .look-choices .style-name { padding: 4px 0 0; }
.create .look-choices .style-detail { padding: 0; }
}
@container composer (max-width: 450px) {
.create .composer-toolbar { display: flex; flex-wrap: wrap; row-gap: 6px; column-gap: 6px; }
.create .composer-toolbar::after { content: ""; order: 5; flex: 0 0 100%; height: 0; }
.create .power { order: 1; flex: none; }
.create .look-picker { order: 2; flex: 1 1 0; min-width: 0; max-width: max-content; }
.create .look-picker > summary { max-width: 100%; }
.create .look-picker [data-choice-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.create .composer-settings > * { order: 4; }
.create .composer-settings > .choice-picker:not(.more-options) { flex: 1 1 0; min-width: 0; max-width: max-content; }
.create .composer-settings > .more-options { order: 6; }
.create .composer-input-actions { order: 6; }
.create .explain { order: 7; flex: none; width: auto; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
.create .power, .create .power-word, .create .power-word-in, .create .power-seg,
.create .explain-bolt, .create .explain-arrow, .create .power-rim,
.look-swatch, .create .look-choices .style-card, .style-preview video { transition: none !important; }
.create .power.is-surge, .create .power.is-burst *, .create .explain.is-pop > span:last-child,
.create .composer-box.is-rev, .create .power-rim *, .create .tier-note.is-in,
.look-picker > summary.is-landed, .look-picker[open] .style-card { animation: none !important; }
.create .power-rim-run { display: none; }
}
.pro-comet { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pro-comet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pro-comet rect { fill: none; stroke-linecap: round; }
.pro-comet-glow { filter: blur(7px); }
.pro-comet .is-glow { stroke: #ff7a2e; stroke-width: 11; }
.pro-comet .is-tail { stroke: #f04420; stroke-width: 2; stroke-opacity: .5; }
.pro-comet .is-body { stroke: #ff8a2e; stroke-width: 2.5; }
.pro-comet .is-head { stroke: #ffc65c; stroke-width: 3; }
.pro-comet .is-tip { stroke: #fffaf0; stroke-width: 3.5; }
.composer-deflection-box { margin: 12px 2px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink-2); font: 400 14px/1.45 var(--sans); }
.composer-deflection-box p { margin: 0; }
.composer-deflection-box a { display: inline-block; margin-top: 8px; color: var(--signal-text); text-underline-offset: 3px; }
.composer-deflection-box .composer-deflection-label { margin-top: 10px; color: var(--ink-3); font-size: 13px; }
.composer-deflection-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.composer-deflection-chips button { min-height: 36px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 400 14px/1.35 var(--sans); text-align: left; cursor: pointer; transition: border-color 150ms ease, color 150ms ease; }
.composer-deflection-chips button:hover { border-color: var(--ink-4); color: var(--ink); }
.composer-deflection-chips button:focus-visible, .composer-deflection-box a:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; }
.run-decline .composer-deflection-box { margin: 12px 0 0; }
.composer-research .composer-research-title { margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.composer-research-attach { min-height: 36px; margin-top: 12px; padding: 7px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 14px/1.35 var(--sans); cursor: pointer; }
.composer-research-attach:hover { opacity: .88; }
.composer-research .composer-research-agents { margin-top: 12px; color: var(--ink-3); font-size: 13px; }
.composer-research .composer-research-agents a { display: inline; margin-top: 0; }
.composer-research-anyway { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--ink-3); font: 400 13px/1.45 var(--sans); text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.composer-research-anyway:hover { color: var(--ink-2); }
.composer-research-attach:focus-visible, .composer-research-anyway:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .composer-deflection-chips button { transition: none; } }
.visitor-note, .visitor-note [data-visitor-says] { display: none; }
html[data-visitor] .create .visitor-note { display: block; margin: 0; color: var(--ink-3); font: 400 13px/1.5 var(--sans); text-wrap: pretty; }
html[data-visitor="guest"] .visitor-note [data-visitor-says="guest"],
html[data-visitor="listed"] .visitor-note [data-visitor-says="listed"] { display: flex; align-items: flex-start; gap: 9px; }
.visitor-note svg { flex: none; margin-top: 2px; }
.visitor-note b { color: var(--ink); font-weight: 600; }
.visitor-note [data-free-videos] { white-space: nowrap; }
.visitor-tick { stroke: var(--signal); stroke-width: 3; }
html[data-visitor] .create .tier-note,
html[data-visitor] .create .create-meta:has(#composer-notice-text:not(:empty)) .visitor-note { display: none; }
html[data-visitor="listed"] .create .composer-form.has-content .explain,
html[data-visitor="listed"] .create .composer-form.has-content .explain:hover { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transform: none; }
html[data-visitor="listed"] .create .composer-form .explain > span:last-child,
html[data-visitor="listed"] .create .composer-form.has-content .explain:hover > span:last-child { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); translate: none; }
html[data-visitor="listed"] .create .explain-bolt { display: none; }
html[data-visitor="listed"] .create .composer-form .explain-arrow { opacity: 1; scale: 1; rotate: none; font-size: 0; }
html[data-visitor="listed"] .create .explain-arrow::before {
content: ""; display: block; width: 16px; height: 16px; background: var(--signal);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 15.4c2.3 1.5 4.3 3.6 5.9 6.2 2.5-6.6 6.2-11.7 11.9-15.8'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 15.4c2.3 1.5 4.3 3.6 5.9 6.2 2.5-6.6 6.2-11.7 11.9-15.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.create .composer-settings .language-choices { left: auto; right: calc(0px - var(--menu-shift, 0px)); max-width: var(--menu-room, none); padding: 0; overflow: hidden; display: flex; flex-direction: column; transform-origin: top right; }
.create .composer-settings .choice-picker.opens-up > .choice-panel { transform-origin: bottom right; }
.create .choice-picker.is-closing > .choice-panel { animation: control-menu-exit 110ms ease-in both; pointer-events: none; }
@keyframes control-menu-exit { to { opacity: 0; translate: 0 var(--menu-enter-y, -3px); scale: .985; } }
.choice-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px 10px; color: var(--ink); font: 650 14px/1.2 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.choice-head > span { color: var(--ink-3); font: 400 12.5px/1.2 var(--sans); letter-spacing: 0; }
.create .language-choices { display: flex; width: min(464px, calc(100vw - 32px)); max-height: min(64dvh, 452px); }
.choice-top { flex: none; position: relative; z-index: 1; background: var(--paper); transition: box-shadow 160ms ease; }
.language-choices.is-scrolled .choice-top { box-shadow: 0 1px 0 var(--line), 0 6px 10px -8px var(--landing-shadow-deep); }
.choice-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 10px 8px; padding: 0 10px; border-radius: 9px; background: var(--paper-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 140ms ease, background-color 140ms ease; }
.choice-search:focus-within { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 3px color-mix(in srgb, var(--signal-text) 14%, transparent); }
.create .choice-search:has(input:focus-visible) { outline: 2px solid transparent; outline-offset: -2px; }
.choice-search svg { flex: none; }
.create .choice-search .choice-filter { position: static; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 2px solid transparent; background: none; color: var(--ink); font: 400 14px/20px var(--sans); }
.choice-search .choice-filter::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: currentColor; opacity: .45; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 3.5l7 7m0-7l-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 3.5l7 7m0-7l-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.choice-scroll { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; gap: 2px 6px; padding: 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; scroll-padding-block: 8px; }
.choice-scroll > label { grid-column: span 3; position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 1px 8px; min-height: 38px; padding: 5px 30px 5px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font: 500 14px/1.3 var(--sans); transition: background-color 120ms ease, color 120ms ease; }
.choice-scroll > label:not(.choice-caption ~ label) { grid-column: span 2; }
.choice-scroll > label[hidden], .choice-scroll > p[hidden] { display: none; }
.choice-scroll > label::after { content: ""; position: absolute; right: 14px; top: calc(50% - 6px); width: 5px; height: 9px; border: solid var(--signal-text); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); opacity: 0; scale: .6; transition: opacity 120ms ease, scale 160ms var(--create-ease); }
.choice-scroll > label:has(input:checked) { background: var(--paper-2); color: var(--ink); }
.choice-scroll > label:has(input:checked)::after { opacity: 1; scale: 1; }
.choice-scroll > label:has(input:focus-visible) { outline: 2px solid transparent; outline-offset: -2px; background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.choice-scroll .choice-native { flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-scroll > label:has(input:checked) .choice-english { color: var(--ink-2); }
.choice-scroll .choice-english { flex: 0 1 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-weight: 400; font-size: 12.5px; }
.choice-scroll > label.is-plain .choice-english { display: none; }
.choice-scroll .choice-caption { margin: 12px 10px 4px; }
.create .language-choices > .choice-note { flex: none; margin: 0; padding: 9px 16px 11px; border-top: 1px solid var(--line); font-size: 12px; }
.choice-empty { grid-column: 1 / -1; margin: 0; padding: 22px 12px 26px; color: var(--ink-3); font: 400 13.5px/1.4 var(--sans); text-align: center; }
@media (hover: hover) { .choice-scroll > label:hover { background: var(--paper-2); color: var(--ink); } }
.create .format-switch {
--turn: 0;
position: relative; flex: none; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
min-width: 0; height: 36px; margin: 0; padding: 0 13px 0 10px; border: 0; border-radius: 999px;
color: var(--ink-2); font: 500 13.5px/1 var(--sans); letter-spacing: -.004em;
cursor: pointer; user-select: none; -webkit-user-select: none;
touch-action: manipulation; -webkit-tap-highlight-color: transparent;
transition: color 160ms ease, background-color 160ms ease, scale 180ms var(--create-ease);
}
.create .format-switch:has(input[value="portrait"]:checked) { --turn: 1; }
.create .format-switch.is-pressed { scale: .96; }
.create .format-switch:has(input:focus-visible), .create .format-switch.is-keyed:has(input:focus) { outline: 2px solid var(--signal-text); outline-offset: 2px; }
.create .format-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
@media (hover: hover) {
.create .format-switch:hover { color: var(--ink); background: var(--paper-2); }
}
.create .format-glyph { flex: none; display: grid; place-items: center; width: 17px; height: 17px; transition: rotate 520ms var(--create-ease); }
.create .format-glyph > i {
width: 16px; height: 10px; border: 1.5px solid currentColor; border-radius: 2.5px; opacity: .8;
rotate: calc(var(--turn) * 90deg);
scale: calc(1 + max(0, min(var(--turn), 1 - var(--turn))) * .16);
}
@media (hover: hover) {
.create .format-switch:hover:not(.is-turned) .format-glyph { rotate: 10deg; }
.create .format-switch:has(input[value="portrait"]:checked):hover:not(.is-turned) .format-glyph { rotate: -10deg; }
}
.create .format-words {
box-sizing: content-box; display: grid; height: 26px; margin: -5px -24px; padding: 0 24px;
width: calc(var(--w-landscape) + (var(--w-portrait) - var(--w-landscape)) * clamp(0, var(--turn), 1));
-webkit-mask-image: linear-gradient(transparent, #000 6px, #000 calc(100% - 6px), transparent);
mask-image: linear-gradient(transparent, #000 6px, #000 calc(100% - 6px), transparent);
}
.create .format-words > label { grid-area: 1 / 1; display: block; width: max-content; cursor: inherit; }
.create .format-word { display: block; line-height: 26px; white-space: nowrap; }
.create .format-words > label:first-child .format-word {
translate: 0 calc(var(--turn) * -72%);
opacity: calc(1 - var(--turn) * 1.6);
filter: blur(calc(clamp(0, var(--turn), 1) * 2px));
}
.create .format-words > label:last-child .format-word {
translate: 0 calc((1 - var(--turn)) * 72%);
opacity: calc(1 - (1 - var(--turn)) * 1.6);
filter: blur(calc(clamp(0, 1 - var(--turn), 1) * 2px));
}
@media (hover: none) {
.create .composer-settings > .choice-picker:not(.more-options) > summary,
.create .format-switch { box-shadow: inset 0 0 0 1px var(--line); }
.create .composer-settings > .choice-picker:not(.more-options) > summary { padding: 0 10px 0 12px; }
}
@container composer (max-width: 570px) {
.create .composer-settings > .choice-picker:not(.more-options) > summary,
.create .format-switch { height: 34px; min-height: 34px; font-size: 12.5px; }
}
@container composer (max-width: 420px) {
.create .power { padding: 0 9px 0 7px; }
.create .look-picker > summary { padding-right: 11px; }
.create .composer-settings > .choice-picker:not(.more-options) > summary { padding: 0 11px; }
.create .composer-settings > .choice-picker:not(.more-options) > summary,
.create .format-switch { box-shadow: inset 0 0 0 1px var(--line); }
.create :is(.look-picker, .composer-settings > .choice-picker:not(.more-options)) > summary svg:last-child:not(:first-child) { display: none; }
.create .format-switch { gap: 0; width: 34px; padding: 0; justify-content: center; }
.create .format-words { width: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; }
}
.create-meta { align-items: baseline; gap: 8px 24px; margin-top: 18px; }
.create .create-meta .create-length-note { flex: none; margin: 0 0 0 auto; max-width: none; text-align: right; text-wrap: nowrap; }
html[data-visitor] .create .create-length-note { display: none; }
@container composer (max-width: 760px) {
.create .composer-toolbar:not(:has(.more-options:not([hidden]))) { grid-template-columns: auto auto minmax(0, max-content) max-content minmax(0, 1fr); }
}
@media (max-width: 640px) {
.create-meta { flex-direction: column; align-items: flex-start; }
.create .create-meta .create-length-note { margin-left: 0; text-align: left; text-wrap: balance; white-space: normal; }
.create .language-choices { max-height: min(60dvh, 420px); }
.choice-scroll { grid-template-columns: minmax(0, 1fr); }
.choice-scroll > label, .choice-scroll > label:not(.choice-caption ~ label) { grid-column: 1 / -1; }
.choice-head > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.create .choice-picker.is-closing > .choice-panel, .choice-scroll > label::after { animation: none; transition: none; }
.create .format-switch, .create .format-glyph { transition: none; }
.create .format-switch.is-pressed { scale: none; }
.create .format-switch:hover .format-glyph { rotate: none; }
}

:root { --editor-ease: cubic-bezier(.2, .8, .2, 1); }
.run .text-button, .run .text-link { transition: background 150ms, border-color 150ms, color 150ms, transform 150ms; }
.run button:active:not(:disabled) { transform: translateY(1px); }
.run :focus-visible, .history :focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 3px; }
.run .spread { gap: 20px; }
.run .script, .run .film { border-radius: 12px; }
.script-header { padding: 21px 22px 16px; font-size: 14px; }
.script-header > span:first-child { color: var(--ink); font-weight: 500; }
.run .script { display: flex; flex-direction: column; }
.run .script-header { flex: none; }
.run .script-scroll { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; margin: 0 10px; padding: 0 6px; }
.run .script-footer { position: sticky; bottom: 12px; left: auto; right: auto; order: 3; flex: none; margin: 8px 16px 16px; }
.run .script-footer[hidden] { display: none; }
.run .scene, .run .scene:last-child { padding: 14px 12px; border-top: 0; margin-bottom: 6px; }
.run .scene::before { inset: 0; border-radius: 8px; }
.run .scene-heading { padding-left: 0; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: start; }
.run .scene-number { position: static; grid-column: 1; grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 12px; }
.run .scene-title { grid-column: 2; grid-row: 1; }
.run .scene-heading .status-word { grid-column: 3; grid-row: 1; margin-top: 2px; }
.run .scene-duration { display: block; grid-column: 2; grid-row: 2; margin: 0; font-size: 10px; }
.run .scene-card, .run .scene-failure, .run .scene-chips { margin-left: 44px; }
.scene-title { color: var(--ink); line-height: 1.5; }
.scene-number { transition: background 180ms, color 180ms, border-color 180ms; }
.scene.is-current .scene-number { background: var(--sage); color: var(--paper); border-color: var(--sage); }
.scene-heading:hover .scene-number { border-color: var(--sage); }
.scene-heading .status-word.is-ready { color: var(--sage-strong); background: color-mix(in srgb, var(--sage) 13%, transparent); }
.run .script-header { align-items: baseline; }
.run .script-header > span:first-child { font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; color: var(--ink-2); }
.run #scene-count { font: 400 11px/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.run .scene-title { font: 500 14px/1.45 var(--sans); color: var(--ink); }
.run .scene-heading:hover .scene-title { color: var(--ink-2); }
.run .scene-duration { font: 400 11px/16px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-4); }
.run .scene-number { border-radius: 8px; font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.run .scene.is-current::before { background: color-mix(in srgb, var(--sage) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 28%, transparent); }
.run .scene.is-current .scene-title { color: var(--ink); }
.script-footer { gap: 8px; }
.script-footer .text-button { border-style: dashed; border-color: var(--line-2); color: var(--ink-2); border-radius: 7px; }
.script-footer .text-button:hover { border-color: var(--sage); color: var(--ink); background: color-mix(in srgb, var(--sage) 7%, transparent); }
.under-frame { align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; min-height: 60px; }
#download-final:hover { background: var(--paper-2); border-color: var(--sage); }
#download-final { margin-left: auto; min-height: 38px; padding: 8px 12px; font-size: 12px; text-decoration: none; }
.narration-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; }
.narration-warning[hidden] { display: none; }
.narration-warning > p:first-child { flex: 1 1 220px; margin: 0; color: var(--ink-2); font: 400 12px/1.6 var(--sans); }
.video-update { border-radius: 10px; border-color: color-mix(in srgb, var(--sage) 45%, var(--line)); gap: 16px; }
.video-update::before { content: ''; width: 7px; height: 7px; flex: none; background: var(--sage); border-radius: 50%; }
.video-update p { flex: 1; }
.video-update-actions { display: flex; gap: 12px; align-items: center; flex: none; }
.video-update.is-failed { border-color: color-mix(in srgb, var(--oxide) 40%, var(--line)); }
.video-update.is-failed::before { background: var(--oxide); }
.video-update .text-link { font-size: 12px; }
.video-update .scene-retry[hidden], .video-update .text-link[hidden] { display: none; }
.scene-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.scene-chips:empty { display: none; }
.chip-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font: 500 10px/1.5 var(--sans); letter-spacing: .02em; }
.chip-tag.is-new { border-color: var(--sage); background: var(--sage); color: var(--paper); }
.chip-tag.is-note { color: var(--ink-3); border-style: dashed; }
.scene-heading .status-word.is-unchanged { color: var(--ink-4); border-color: transparent; }
.scene-card { margin-top: 6px; }
.scene-card > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 0; color: var(--ink-3); font: 500 12px/1.4 var(--sans); cursor: pointer; list-style: none; }
.scene-card > summary::-webkit-details-marker { display: none; }
.scene-card > summary > .icon { flex: none; color: var(--ink-4); transition: transform 150ms var(--editor-ease); }
.scene-card[open] > summary > .icon { transform: rotate(90deg); }
.scene-card > summary:hover > .icon { color: var(--ink-2); }
.scene-card > summary:hover { color: var(--ink); }
.scene-card[hidden] { display: none; }
.scene-card-body { padding: 6px 0 4px; }
.scene-card[open] .scene-card-body { animation: editor-reveal 160ms var(--editor-ease); }
.scene-card.is-readonly .scene-beats .beat { margin-left: 0; }
.scene-card-note { margin: 10px 0 0; color: var(--ink-3); font: 400 11px/1.55 var(--sans); }
.scene-card-note:empty { display: none; }
.scene.is-extra .scene-heading { display: grid; cursor: default; }
.scene.is-extra .scene-number { border-style: dashed; color: var(--ink-3); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; display: flex; align-items: center; gap: 16px; box-sizing: border-box; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 400 13px/1.5 var(--sans); box-shadow: 0 12px 36px #0004; transform: translateX(-50%); animation: toast-in 220ms var(--editor-ease); }
.toast[hidden] { display: none; }
.toast .text-link { color: var(--paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast .text-link[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
.history .sheet-header { border-bottom-color: var(--line); }
.history .sheet-title { font-size: 32px; letter-spacing: -.02em; }
.history .filter { border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); padding: 12px 14px; font: 400 13px/1.5 var(--sans); }
.history .sheet-filter { padding-block: 20px 10px; }
.history .history-empty { color: var(--ink-3); font: 400 14px/1.7 var(--sans); text-align: center; padding: 40px 18px; }
.history .row:hover { background: color-mix(in srgb, var(--sage) 8%, var(--paper)); }
.history .row-question { font-size: 14px; }
.history .row { border-radius: 8px; }
.row-menu-actions { border-radius: 8px; }
.row-menu-actions button { border-radius: 4px; }
@keyframes editor-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
.run .spread { gap: 14px; }
.scene-card > summary { min-height: 36px; }
.video-update { gap: 10px; padding: 12px; font-size: 12px; }
.under-frame { gap: 8px; }
#download-final { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.scene-card[open] .scene-card-body, .toast { animation: none !important; }
}

[data-accounts="true"] #operator-auth, [data-accounts="true"] #operator-lock,
[data-accounts="true"] #operator-unlock, [data-accounts="true"] #sign-in-dialog { display: none !important; }
.account-dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); padding: 30px; width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; box-shadow: var(--sheet-shadow); font: 14px/1.55 var(--sans); }
.account-dialog::backdrop { background: rgb(23 26 25 / .28); }
.account-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.account-dialog h2 { font: 500 30px/1.2 var(--serif); margin: 0; letter-spacing: -.025em; }
.account-dialog h3 { font: 500 22px/1.3 var(--serif); margin: 0 0 16px; }
.account-dialog p { margin: 0 0 14px; }
.account-dialog button, .account-dialog input { font: inherit; }
.account-close { background: none; border: 0; color: var(--ink-3); min-width: 44px; min-height: 44px; cursor: pointer; font-size: 24px !important; }
.account-note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.account-muted { color: var(--ink-3); }
.account-status { margin-bottom: 24px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line); }
.account-status strong { display: block; font-weight: 500; margin-bottom: 4px; }
.account-error { color: var(--oxide); overflow-wrap: anywhere; }
.account-error:empty { display: none; }
.account-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; text-align: center; font-size: 14px; font-weight: 500; }
.account-primary:hover:not(:disabled) { opacity: .92; }
.account-primary.wide { width: 100%; }
.account-primary.is-danger { color: var(--paper); background: var(--error); border-color: var(--error); }
.account-secondary { color: var(--ink); background: transparent; border: 1px solid var(--line-2); padding: 10px 18px; min-height: 40px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.account-secondary:hover:not(:disabled) { border-color: var(--ink); }
.account-link { background: transparent; color: var(--ink-2); border: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-link:hover { color: var(--ink); }
.account-dialog button:disabled { opacity: .45; cursor: wait; }
.account-dialog input:not([type="radio"]) { display: block; width: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-2); color: var(--ink); box-sizing: border-box; margin: 6px 0 16px; }
.account-dialog label { display: block; font-size: 12px; color: var(--ink-2); }
.account-divider { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 12px; margin: 20px 0; }
.account-divider::before,.account-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.account-section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px; }
.account-balance { font: 500 48px/1.1 var(--serif); letter-spacing: -.035em; margin: 8px 0 !important; font-variant-numeric: tabular-nums; }
.account-balance span { font: 14px/1.4 var(--sans); letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.account-eyebrow { font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; color: var(--ink-2); }
.account-identity { overflow-wrap: anywhere; }
.account-packs { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.account-packs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.account-pack { display: flex !important; gap: 10px; align-items: center; min-height: 44px; border: 1px solid var(--line); padding: 0 12px; cursor: pointer; border-radius: 8px; }
.account-pack:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
.account-pack input { accent-color: var(--ink); margin: 0; }
.account-pack strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.account-pack .pack-price { margin-left: auto; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.account-activity { list-style: none; padding: 0; margin: 0; }
.account-activity li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; border-top: 1px solid var(--line); padding: 9px 0; }
.account-activity li:first-child { border-top: 0; padding-top: 0; }
.account-activity span { font-size: 14px; color: var(--ink); }
.account-activity small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.account-activity b { font: 500 13px/1.5 var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.account-actions .account-primary { min-width: 150px; }
.account-qr { display: block; width: 160px; max-width: 100%; margin: 16px auto; background: white; padding: 10px; }
.account-code { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; user-select: all; }
.account-banner { max-width: 710px; margin: 0 auto 24px; font: 13px/1.6 var(--sans); color: var(--ink-2); padding: 12px 16px; border: 1px solid var(--line); background: var(--paper-2); }
.account-banner button { float: right; font: inherit; }
.credit-outcome { font: 12px/1.6 var(--sans); color: var(--ink-3); margin-top: 8px; }
.credit-outcome p { margin: 4px 0; }
.account-video-actions { display:flex; gap:20px; }
.account-version { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:14px 0; }
.account-version p { margin:0; }
.account-version strong { font-weight:500; }
.account-version small { display:block; color:var(--ink-3); }
.account-dialog :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media(max-width:600px) { .account-dialog { padding: 22px; } .account-balance { font-size: 44px; } #account-button { font-size: 12px; } .account-actions { gap: 10px; } }
.account-dialog.wallet-dialog {
width: min(400px, 100vw - 32px); height: fit-content; max-height: calc(100dvh - 24px);
margin: 12px 16px auto auto; padding: 0; border: 1px solid var(--line); border-radius: 12px;
background: var(--paper); color: var(--ink); font: 14px/1.55 var(--sans);
box-shadow: 0 24px 64px rgb(23 26 25 / .14), 0 1px 3px rgb(23 26 25 / .06);
overscroll-behavior: contain; transform-origin: top right;
}
html[data-theme="dark"] .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .account-dialog.wallet-dialog { box-shadow: 0 24px 64px rgb(0 0 0 / .5), 0 0 0 1px var(--line); }
}
.wallet-dialog > header { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.wallet-dialog h2 { font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; }
.wallet-dialog h3 { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--ink-2); margin: 0 0 10px; }
.wallet-dialog .account-close { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; color: var(--ink-3); font-size: 20px !important; line-height: 1; }
.wallet-dialog .account-close:hover { color: var(--ink); }
#account-content { padding: 4px 24px 24px; }
#account-content > section, #account-content > footer { border-top: 1px solid var(--line); padding: 20px 0; }
#account-content > section:first-child { border-top: 0; }
.wallet-dialog p { margin: 0 0 10px; }
.wallet-dialog .account-note { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 0; }
.wallet-dialog .account-email-address { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.account-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.account-credits-line { margin: 0; font-weight: 500; color: var(--ink); }
.wallet-dialog .account-team-name { margin: 0 0 8px; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.account-team-name span { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.account-team-meter { display: block; width: 100%; height: 4px; margin: 14px 0 0; border-radius: 2px; overflow: hidden; }
.account-team-meter rect:first-child { fill: var(--line); }
.account-team-meter rect + rect { fill: var(--ink); }
.account-team-meter rect.is-high { fill: var(--oxide); }
.wallet-dialog .account-team-me { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); }
.account-team .account-secondary { margin-top: 16px; }
.account-team-leave { margin-top: 14px; }
.account-team-leave > .account-link { font-size: 13px; color: var(--ink-3); }
.wallet-dialog .account-team-leave p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }
.wallet-dialog .account-team-leave .account-actions, .wallet-dialog .account-team-offer .account-actions { justify-content: flex-start; gap: 10px; margin-top: 12px; }
.wallet-dialog .account-team-leave .account-actions .account-primary, .wallet-dialog .account-team-offer .account-actions .account-primary { min-width: 0; }
.account-team .account-team-leave .account-secondary { margin-top: 0; }
.wallet-dialog .account-team-leave .account-error:empty { display: none; }
.wallet-dialog .account-team-offer h3 { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.account-admin-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.account-admin-mark { position: relative; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.account-admin-mark::after {
content: ""; position: absolute; inset: 9px; background: var(--ink-2);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.account-administration[data-unlocked="true"] .account-admin-mark::after {
background: var(--ink);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.5-.8'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 0 1 5.5-.8'/%3E%3C/svg%3E");
}
.wallet-dialog .account-admin-head h3 { margin: 1px 0 2px; font: 600 14px/1.4 var(--sans); color: var(--ink); }
.wallet-dialog .account-admin-head .account-note { margin: 0; }
.wallet-dialog .account-footer .account-sessions { margin: 0; }
.account-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.account-footer-row .account-link { font-size: 13px; color: var(--ink-3); }
.account-figure { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.account-figure-value { font: 500 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.account-figure-unit { font-size: 13px; color: var(--ink-3); }
.account-free-line { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 14px; color: var(--ink); }
.account-credits .account-secondary, .account-identity .account-secondary { margin-top: 12px; }
.account-logo input[type="file"] { display: none; }
.account-logo .account-secondary.wide { margin-top: 12px; }
.account-logo-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.account-logo-previews figure { margin: 0; min-width: 0; }
.account-logo-previews img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); }
.account-logo-previews figcaption { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.account-logo-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; padding: 0; margin: 12px 0 0; }
.account-logo-corners legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.account-logo-corners label { display: flex; gap: 8px; align-items: center; min-height: 40px; border: 1px solid var(--line); padding: 0 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.account-logo-corners label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.account-logo-corners label:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.account-logo-corners input { accent-color: var(--ink); margin: 0; }
.account-logo-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.account-keys code { font: 12px/1.5 var(--data); color: var(--ink); overflow-wrap: anywhere; }
.account-keys .account-error:empty { margin: 0; }
.account-keys > div > .account-note:first-child, .account-key-secret + .account-note { margin-top: 0; }
.account-keys-list { list-style: none; margin: 14px 0 0; padding: 0; }
.account-key { padding: 12px 0; border-top: 1px solid var(--line); }
.account-key:last-child { border-bottom: 1px solid var(--line); }
.account-key-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.account-key-name { min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.account-key-state { flex: none; font-size: 12px; color: var(--ink-3); }
.account-key:not(.is-revoked) .account-key-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }
.account-key.is-revoked .account-key-name, .account-key.is-revoked code { color: var(--ink-3); }
.account-key-hint { margin: 2px 0 0; }
.account-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; }
.account-key-facts > div { min-width: 0; }
.account-key-facts .account-key-scopes-fact { grid-column: 1 / -1; }
.account-key-facts dt { color: var(--ink-3); }
.account-key-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.account-key-revoke { margin-top: 8px; }
.account-key-revoke > .account-link { font-size: 13px; color: var(--ink-3); }
.account-key-revoke p { margin: 0; font-size: 13.5px; color: var(--ink); }
.wallet-dialog .account-key-revoke .account-actions, .wallet-dialog .account-key-secret .account-actions, .wallet-dialog .account-key-form .account-actions { justify-content: flex-start; gap: 10px; margin-top: 10px; }
.wallet-dialog .account-keys .account-actions .account-primary { min-width: 0; }
.account-keys > div > .account-secondary.wide { margin-top: 14px; }
.account-key-form { margin-top: 16px; }
.account-key-scopes { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; }
.account-key-scopes legend { margin-bottom: 6px; padding: 0; font-size: 12px; color: var(--ink-2); }
.account-dialog .account-key-scope { display: flex; gap: 10px; align-items: flex-start; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); }
.account-dialog .account-key-scope input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; padding: 0; accent-color: var(--ink); }
.account-key-scope:has(input:checked) { border-color: var(--line-2); }
.account-key-scope:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.account-key-scope small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); }
.account-key-secret { margin: 0 0 16px; padding: 14px; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper-2); }
.wallet-dialog .account-key-secret-title { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.account-dialog .account-key-secret input { margin: 6px 0 10px; font: 12.5px/1.4 var(--data); background: var(--paper); }
.wallet-dialog .account-status { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.wallet-dialog .account-section { border-top: 1px solid var(--line); margin: 0; padding: 20px 0; }
.wallet-dialog .account-primary, .wallet-dialog .account-secondary { min-height: 40px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: border-color .15s, opacity .15s; }
.wallet-dialog .wide { width: 100%; }
.wallet-dialog .account-purchase-note { margin: 10px 0 0; }
.wallet-dialog .account-footer { display: block; margin: 0; padding: 20px 0 0; }
.wallet-dialog .account-footer .account-actions { justify-content: flex-start; gap: 10px; margin-top: 10px; }
.wallet-dialog .account-footer .account-actions .account-primary { min-width: 0; }
.wallet-dialog .account-code { padding: 10px 12px; background: var(--paper-2); border-radius: 6px; }
.wallet-dialog .account-error { margin: 10px 0; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
.account-dialog[open] { animation: account-rise 280ms cubic-bezier(.2, 0, 0, 1) both; }
.account-dialog[open]::backdrop { animation: account-veil 280ms ease-out both; }
.account-dialog.is-closing { animation: account-settle 160ms cubic-bezier(.4, 0, 1, 1) both; }
.account-dialog.is-closing::backdrop { animation: account-veil 160ms ease-in reverse both; }
#quote-dialog[open], #account-action[open] { animation-name: account-rise-center; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
.account-dialog.wallet-dialog[open] { animation-name: account-rise-sheet; }
}
@keyframes account-rise { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes account-rise-center { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes account-rise-sheet { from { opacity: 0; transform: translateY(24px); } }
@keyframes account-settle { to { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes account-veil { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
.account-dialog.wallet-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; max-height: calc(100dvh - 24px); transform-origin: bottom center; }
.wallet-dialog > header { padding: max(14px, env(safe-area-inset-top)) 14px 14px 20px; }
#account-content { padding: 4px 20px max(24px, env(safe-area-inset-bottom)); }
}
#quote-dialog, #account-action { transform-origin: center; }
#quote-dialog { padding: 24px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
#quote-dialog header { margin-bottom: 20px; }
#quote-dialog h2 { font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; }
#quote-dialog .account-close { display: grid; place-items: center; padding: 0; border-radius: 7px; }
#quote-dialog .account-balance { font: 500 34px/1.2 var(--sans); margin: 10px 0 16px !important; }
#quote-dialog .account-eyebrow { font-size: 12px; }
#quote-dialog .account-note { color: var(--ink-2); line-height: 1.6; }
#quote-dialog .account-actions { margin-top: 20px; }
#quote-dialog .quote-links { margin: 12px 0 0; }
#quote-dialog .quote-links ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#quote-dialog .quote-links li { line-height: 1.45; overflow-wrap: anywhere; }
#quote-dialog .quote-link-title { font-weight: 500; color: var(--ink); }
#quote-dialog .quote-not-read { margin-top: 10px; overflow-wrap: anywhere; }
#quote-dialog .account-primary, #quote-dialog .account-secondary { border-radius: 7px; font-size: 12px; }
.wallet-dialog form + .account-error + .account-note { margin-top: 12px; }
.account-lede {
font: 400 15px/1.5 var(--reading);
color: var(--ink-2);
letter-spacing: .002em;
text-wrap: pretty;
}
.wallet-dialog .account-lede { margin: 0 0 18px; }
.account-steps { list-style: none; counter-reset: step; margin: 0 0 4px; padding: 0; }
.account-step { counter-increment: step; position: relative; padding: 0 0 18px 34px; }
.account-step::before {
content: counter(step);
position: absolute; left: 0; top: -1px;
display: grid; place-items: center;
width: 22px; height: 22px;
border: 1px solid var(--line-2); border-radius: 50%;
background: var(--paper-2); color: var(--ink-2);
font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums;
}
.account-step:not(:last-child)::after {
content: ""; position: absolute; left: 11px; top: 26px; bottom: 4px;
border-left: 1px solid var(--line);
}
.account-step > :last-child { margin-bottom: 0; }
.wallet-dialog .account-step h4 {
font: 600 13px/1.5 var(--sans); letter-spacing: -.005em;
color: var(--ink); margin: 0 0 5px;
}
.account-qr-frame {
display: grid; place-items: center;
padding: 14px; margin: 0 0 12px;
background: #fff;
border: 1px solid var(--line-2); border-radius: 10px;
}
.account-qr, .wallet-dialog .account-qr {
display: block; width: 148px; height: 148px; max-width: 100%;
margin: 0; padding: 0; background: #fff;
}
.account-secret { display: flex; align-items: center; gap: 10px; }
.account-code, .wallet-dialog .account-code {
flex: 1; min-width: 0;
padding: 9px 11px;
background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px;
font: 500 12px/1.5 var(--data); letter-spacing: .06em;
color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.account-copy {
flex: 0 0 auto; min-height: 36px; padding: 8px 12px;
background: transparent; color: var(--ink-2);
border: 1px solid var(--line-2); border-radius: 6px;
font: 500 11px/1 var(--sans); cursor: pointer;
transition: color .15s, border-color .15s;
}
.account-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.wallet-dialog .account-code-input {
width: 100%; margin: 0 0 14px; padding: 13px 12px;
border: 1px solid var(--line-2); border-radius: 8px;
background: var(--paper-2); color: var(--ink);
font: 500 21px/1.2 var(--data);
font-variant-numeric: tabular-nums;
letter-spacing: .34em; text-indent: .34em; text-align: center;
transition: border-color .15s, box-shadow .15s;
}
.wallet-dialog .account-code-input:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px var(--selection);
}
.wallet-dialog .account-code-input::placeholder { color: var(--ink-4); letter-spacing: .34em; }
.wallet-dialog .account-error:not(:empty) {
margin: 12px 0; padding: 9px 0 9px 12px;
border-left: 2px solid var(--oxide);
font-size: 12px; line-height: 1.55;
}
.wallet-dialog .account-mfa-status {
display: flex; align-items: center; gap: 8px;
color: var(--ink-2); font-size: 12px; padding: 4px 0 10px;
}
.account-spinner {
display: inline-block;
flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%;
border: 1.5px solid var(--line-2); border-top-color: var(--ink-3);
animation: account-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.account-spinner { animation: none; }
}
@keyframes account-spin { to { transform: rotate(1turn); } }
.wallet-dialog .account-step-actions { display: grid; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) {
.account-secret { flex-wrap: wrap; }
.account-code, .wallet-dialog .account-code { flex: 1 1 100%; letter-spacing: .04em; }
.account-copy { margin-left: auto; }
}
html[data-accounts="true"] #account-button[hidden] { display: inline-flex !important; }
#account-button { visibility: hidden; justify-content: flex-end; gap: 8px; }
#account-button:not(.is-ready) { min-width: 10em; }
#bar .profile { order: 2; }
.account-button-balance { color: var(--ink-3); font: inherit; }
.account-banner .account-link { margin-left: 16px; }
#account-google { display: flex; align-items: center; justify-content: center; gap: 12px; }
#invitation-code { font-family: var(--data); letter-spacing: .06em; }
.account-dialog .account-eyebrow { text-transform: none; }
#account-logout-confirm:empty { display: none; }
.account-primary .account-spinner, .account-secondary .account-spinner { margin-right: 8px; vertical-align: middle; }
.account-idea {
margin: 0 0 18px; padding: 10px 14px;
border-left: 2px solid var(--line-2);
font: italic 400 15px/1.5 var(--reading); color: var(--ink);
overflow-wrap: anywhere; text-wrap: pretty;
}
.wallet-dialog .account-note + .account-idea { margin-top: 6px; }
.wallet-dialog .account-switch { margin-top: 16px; }
.wallet-dialog .account-primary + .account-secondary { margin-top: 10px; }
a.account-primary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.account-invite-paste { margin: 10px 0 14px; }
.account-invite-paste > summary { cursor: pointer; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.account-invite-paste > summary::-webkit-details-marker { display: none; }
.account-invite-paste > summary:hover { color: var(--ink); }
.account-invite-paste[open] > summary { margin-bottom: 10px; }
#account-invite-link { font-family: var(--data); }
.account-dialog.wallet-dialog[data-stage="place"] {
width: min(456px, 100vw - 32px); margin: auto; border-color: var(--frame-edge, var(--line)); border-radius: 22px;
box-shadow: 0 1px 2px var(--landing-shadow-soft, #171a190a), 0 14px 34px -22px var(--landing-shadow-deep, #171a1924), 0 44px 96px -36px var(--landing-shadow-deep, #171a1924);
transform-origin: 50% 60%;
}
.account-dialog[data-stage="place"]::backdrop { background: rgb(255 255 255 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-theme="dark"] .account-dialog[data-stage="place"]::backdrop { background: rgb(23 26 25 / .66); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .account-dialog[data-stage="place"]::backdrop { background: rgb(23 26 25 / .66); }
}
.wallet-dialog[data-stage="place"] > header { position: static; align-items: flex-start; gap: 16px; padding: 30px 20px 0 32px; border-bottom: 0; background: none; }
.wallet-dialog[data-stage="place"] h2 { padding-top: 3px; font: 700 27px/1.14 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.wallet-dialog[data-stage="place"] .account-close { flex: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin-top: -4px; border-radius: 50%; transition: background-color 160ms ease, color 160ms ease; }
.wallet-dialog[data-stage="place"] .account-close:hover { background: var(--paper-2); }
[data-stage="place"] #account-content { padding: 12px 32px 28px; }
.wallet-dialog .place-lede { margin: 0 0 22px; color: var(--ink-2); font: 400 15.5px/1.5 var(--sans); letter-spacing: -.004em; text-wrap: pretty; }
.place-address { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.place-idea { position: relative; isolation: isolate; margin: 4px 3px 26px; padding: 16px 18px 12px; rotate: -.7deg; }
.place-idea::before, .place-idea::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--frame-edge, var(--line)); border-radius: 14px; }
.place-idea::before { background: var(--paper-2); rotate: 2.2deg; translate: 2px 3px; }
.place-idea::after { background: var(--paper); box-shadow: 0 1px 1px var(--landing-shadow-soft, #171a190a), 0 14px 30px -16px var(--landing-shadow-deep, #171a1924); }
.place-idea blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: 0; color: var(--ink); font: 500 16.5px/1.45 var(--sans); letter-spacing: -.012em; overflow-wrap: anywhere; }
.place-idea figcaption { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); color: var(--ink-3); font: 500 12.5px/1.4 var(--sans); transition: color 400ms ease; }
.place-idea.is-kept figcaption { color: var(--signal-text); }
.place-form > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wallet-dialog .place-form input {
height: 54px; margin: 0; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper);
font: 400 16.5px/1 var(--sans); letter-spacing: -.01em;
box-shadow: 0 1px 2px var(--landing-shadow-soft, #171a190a);
transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1);
}
.wallet-dialog .place-form input::placeholder { color: var(--ink-4); }
.wallet-dialog .place-form input:hover { border-color: var(--ink-4); }
.wallet-dialog .place-form input:focus { outline: none; border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f, 0 1px 2px var(--landing-shadow-soft, #171a190a); }
.wallet-dialog .place-form input[aria-invalid="true"] { border-color: var(--error); }
.wallet-dialog .place-form .account-error:not(:empty) { margin: 8px 4px 0; padding: 0; border: 0; color: var(--error-ink, var(--oxide)); font-size: 13px; line-height: 1.45; }
.wallet-dialog .place-go {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 54px; margin-top: 12px; padding: 0 9px 0 22px;
border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
font: 600 15.5px/1 var(--sans); letter-spacing: -.006em;
box-shadow: 0 1px 2px #171a1933, 0 12px 24px -14px #171a198c, inset 0 1px 0 #ffffff1f;
transition: background-color 220ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease;
}
.place-nib { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--signal); color: #171a19; font: 500 17px/1 var(--sans); box-shadow: inset 0 1px 0 #ffffff47; transition: background-color 220ms ease, translate 220ms cubic-bezier(.16, 1, .3, 1); }
.wallet-dialog .place-go:hover:not(:disabled) { background: #242a28; transform: translateY(-1px); }
html[data-theme="dark"] .wallet-dialog .place-go:hover:not(:disabled) { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .wallet-dialog .place-go:hover:not(:disabled) { background: var(--ink-2); }
}
.wallet-dialog .place-go:hover:not(:disabled) .place-nib { background: #f76342; translate: 2px -1px; }
.wallet-dialog .place-go:active:not(:disabled) { transform: scale(.985); }
.wallet-dialog .place-go:disabled { opacity: 1; cursor: progress; }
.place-nib .account-spinner { flex: none; width: 16px; height: 16px; border-width: 2px; border-color: #171a1933; border-top-color: #171a19; }
.wallet-dialog .place-perk { margin: 14px 0 0; color: var(--ink-3); font: 400 13px/1.5 var(--sans); text-align: center; }
.place-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.wallet-dialog .place-foot .account-switch, .place-foot .account-invite-paste { margin: 0; }
.place-foot .account-invite-paste[open] { flex-basis: 100%; margin-top: 8px; }
.place-tick { width: 26px; height: 26px; margin: 0 9px -4px -2px; overflow: visible; stroke: var(--signal); stroke-width: 2.8; }
.place-tick path { stroke-dasharray: 1; }
.wallet-dialog .place-film {
display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; margin: 0 0 12px; padding: 8px 14px 8px 8px;
border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer;
transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1), transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.wallet-dialog .place-film:hover { border-color: var(--line-2); box-shadow: 0 14px 30px -18px var(--landing-shadow-deep, #171a1924); transform: translateY(-1px); }
.place-film-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--frame-edge, var(--line)); border-radius: 10px; background: #fff; }
.place-film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-film-play { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #171a19; box-shadow: 0 2px 6px #171a1933, inset 0 1px 0 #ffffff47; transition: scale 220ms cubic-bezier(.16, 1, .3, 1); }
.place-film-play svg { translate: .5px 0; }
.place-film:hover .place-film-play { scale: 1.1; }
.place-film-words { display: grid; gap: 3px; min-width: 0; }
.place-film-words small { color: var(--ink-3); font: 500 12.5px/1.35 var(--sans); }
.place-film-words b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 600 14.5px/1.3 var(--sans); letter-spacing: -.012em; }
.place-film-time { align-self: start; margin-top: 3px; color: var(--ink-3); font: 500 12px/1.35 var(--sans); font-variant-numeric: tabular-nums; }
.wallet-dialog[data-stage="place"] .account-lede { font: 400 15.5px/1.5 var(--sans); letter-spacing: -.004em; }
.wallet-dialog[data-stage="place"] :is(.account-primary, .account-secondary).wide { min-height: 50px; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; }
.wallet-dialog[data-stage="place"] #account-email-form input { height: 50px; padding: 0 16px; border-radius: 14px; background: var(--paper); font-size: 16px; transition: border-color 160ms ease, box-shadow 320ms cubic-bezier(.16, 1, .3, 1); }
.wallet-dialog[data-stage="place"] #account-email-form input:focus { outline: none; border-color: #f04420a6; box-shadow: 0 0 0 4px #f044200f; }
@media (prefers-reduced-motion: no-preference) {
.account-dialog.wallet-dialog[data-stage="place"][open] { animation: place-rise 460ms cubic-bezier(.16, 1, .3, 1) both; }
.account-dialog[data-stage="place"][open]::backdrop { animation: account-veil 360ms ease-out both; }
.account-dialog.wallet-dialog[data-stage="place"].is-closing { animation: account-settle 160ms cubic-bezier(.4, 0, 1, 1) both; }
.account-dialog[data-stage="place"].is-closing::backdrop { animation: account-veil 160ms ease-in reverse both; }
.place-idea { animation: place-lay 720ms 90ms cubic-bezier(.16, 1, .3, 1) backwards; }
.place-idea.is-kept { animation: place-keep 640ms cubic-bezier(.16, 1, .3, 1) backwards; }
.place-tick path { animation: place-draw 520ms 180ms cubic-bezier(.65, 0, .25, 1) backwards; }
.place-film { animation: place-follow 560ms 260ms cubic-bezier(.16, 1, .3, 1) backwards; }
}
@keyframes place-rise { from { opacity: 0; transform: translateY(18px) scale(.972); } }
@keyframes place-lay { from { opacity: 0; translate: 0 22px; rotate: -3.4deg; scale: .985; } }
@keyframes place-keep { from { translate: 0 -7px; rotate: -2.4deg; } }
@keyframes place-draw { from { stroke-dashoffset: 1; } }
@keyframes place-follow { from { opacity: 0; translate: 0 10px; } }
@media (max-width: 640px) {
.account-dialog.wallet-dialog[data-stage="place"] { width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
.wallet-dialog[data-stage="place"] > header { padding: 26px 14px 0 22px; }
.wallet-dialog[data-stage="place"] h2 { font-size: 24px; }
[data-stage="place"] #account-content { padding: 10px 22px max(24px, env(safe-area-inset-bottom)); }
.wallet-dialog .place-film { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
.account-dialog.wallet-dialog[data-stage="place"][open] { animation-name: account-rise-sheet; }
}
.invite-stage {
--room: #f3f1ec; --card: #fff; --card-edge: #171a1917; --shade: #3a2a1414;
--invite-ease: cubic-bezier(.16, 1, .3, 1); --invite-hand: cubic-bezier(.5, .05, .35, 1);
position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
margin: 0; padding: 0; border: 0; box-sizing: border-box;
background: var(--room); color: var(--ink);
overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] .invite-stage { --room: #101312; --card: #191d1c; --card-edge: #ffffff14; --shade: #0000008c; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .invite-stage { --room: #101312; --card: #191d1c; --card-edge: #ffffff14; --shade: #0000008c; } }
.invite-stage[open] { display: block; animation: invite-room-in 420ms ease both; }
.invite-stage.is-leaving { animation: invite-room-out 380ms ease forwards; }
.invite-stage::backdrop { background: var(--room, #f3f1ec); }
.invite-stage::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .invite-stage::after { mix-blend-mode: screen; opacity: .05; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .invite-stage::after { mix-blend-mode: screen; opacity: .05; } }
html:has(.invite-stage[open]) { overflow: hidden; }
html[data-invite]:not([data-invite="explore"]) body { background: #f3f1ec; }
html[data-theme="dark"][data-invite]:not([data-invite="explore"]) body { background: #101312; }
@media (prefers-color-scheme: dark) { html:not([data-theme])[data-invite]:not([data-invite="explore"]) body { background: #101312; } }
html[data-invite]:not([data-invite="explore"]) #page { visibility: hidden; animation: invite-hold 0s 6s forwards; }
.invite-room {
position: relative; z-index: 1; box-sizing: border-box; min-height: 100%;
display: grid; grid-template-rows: auto 1fr;
padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.invite-top { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; }
.invite-mark.wordmark-logo { width: 78px; color: var(--signal); animation: ink-write 900ms var(--invite-hand) 140ms both; }
.invite-close {
position: absolute; right: -4px; top: 50%; translate: 0 -50%;
display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
transition: background-color 160ms ease, color 160ms ease;
}
.invite-close svg, .invite-film-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.invite-close:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.invite-desk { display: grid; justify-items: center; align-content: start; gap: 22px; padding-top: 10px; }
.invite-card {
position: relative; box-sizing: border-box; width: min(100%, 468px);
padding: 24px 22px 22px; border-radius: 22px; background: var(--card);
box-shadow: 0 0 0 1px var(--card-edge), 0 1px 2px var(--shade), 0 14px 30px -14px color-mix(in srgb, var(--shade) 180%, transparent), 0 44px 90px -44px color-mix(in srgb, var(--shade) 220%, transparent);
animation: invite-lay 900ms var(--invite-ease) 80ms both;
}
.invite-card-compact { width: min(100%, 440px); padding: 28px 24px 26px; }
.invite-kicker {
display: flex; align-items: center; margin: 0 0 10px;
font: 500 14px/1.3 var(--sans); color: var(--ink-3);
animation: invite-fade 700ms ease 380ms both;
}
.invite-kicker > span { display: inline-flex; align-items: baseline; gap: 9px; }
.invite-kicker > span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); translate: 0 -1px; }
.invite-title { display: grid; gap: 12px; margin: 0; outline: none; }
.invite-name {
--write: 900ms;
position: relative; justify-self: start; padding: 0 .06em .14em 0;
font: 800 60px/1 var(--sans);
letter-spacing: -.045em; color: var(--ink); overflow-wrap: anywhere;
}
.invite-name[data-size="m"] { font-size: 46px; }
.invite-name[data-size="s"] { font-size: 36px; }
.invite-ink { display: inline-block; animation: ink-write var(--write) var(--invite-hand) 520ms both, ink-dry 2s ease 520ms both; }
.invite-brush {
position: absolute; left: 0; top: 50%; z-index: 2; width: 88px; aspect-ratio: 150 / 24; pointer-events: none;
transform-origin: 0 50%; transform: translateY(-50%) rotate(-38deg); opacity: 0;
filter: drop-shadow(0 3px 3px var(--landing-shadow-deep));
animation: invite-brush-move var(--write) var(--invite-hand) 520ms both, invite-brush-life var(--write) linear 520ms both;
}
.invite-brush svg { display: block; width: 100%; height: 100%; overflow: visible; }
.invite-brush .brush-handle { fill: var(--ink); }
.invite-brush .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
.invite-brush .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
.invite-brush .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
.invite-brush .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
.invite-brush .brush-paint { fill: var(--signal); }
.invite-underline {
position: absolute; left: -1%; bottom: .02em; width: 98%; height: .16em; overflow: visible;
fill: none; stroke: var(--signal); stroke-width: 3.2; stroke-linecap: round;
clip-path: inset(-50% 100% -50% 0); animation: invite-wipe 520ms cubic-bezier(.6, 0, .2, 1) calc(580ms + var(--write)) forwards;
}
.invite-print {
margin: 24px -4px 26px; padding: 7px 7px 12px; border-radius: 7px;
background: var(--film-paper); color: var(--film-ink);
box-shadow: 0 0 0 1px #171a1914, 0 2px 3px #171a1912, 0 18px 34px -18px #171a1947;
transform: rotate(-1.3deg); animation: invite-print 1000ms var(--invite-ease) 1180ms both;
}
.invite-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 3px; background: var(--film-paper); }
.invite-loop { display: block; width: 100%; height: 100%; object-fit: cover; }
.invite-watch {
position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
min-height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
background: #171a19e0; color: #fff; font: 700 13px/1 var(--sans); letter-spacing: -.005em;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: transform 180ms var(--invite-ease), background-color 160ms ease;
}
.invite-watch svg { width: 14px; height: 14px; fill: currentColor; }
.invite-watch:hover { background: #171a19; transform: translateY(-1px); }
.invite-asked { padding: 11px 5px 0; font: 500 14px/1.4 var(--sans); color: var(--film-ink-2); text-wrap: pretty; }
.invite-lede { margin: 0 0 16px; font: 400 16px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.invite-lede strong { font-weight: 600; color: var(--ink); }
.invite-letter .invite-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.45; text-wrap: balance; animation: invite-fade 700ms ease 980ms both; }
.invite-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 9%, transparent); color: var(--ink); font: 500 14px/1.4 var(--sans); }
.invite-accept { animation: invite-fade 700ms ease 1480ms both; }
.invite-google {
position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; padding: 0 56px;
border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
font: 700 17px/1 var(--sans); letter-spacing: -.01em;
box-shadow: 0 1px 0 #ffffff1f inset, 0 10px 22px -12px color-mix(in srgb, var(--ink) 70%, transparent);
transition: transform 180ms var(--invite-ease), box-shadow 180ms ease, opacity 160ms ease;
}
.invite-google:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff1f inset, 0 16px 28px -14px color-mix(in srgb, var(--ink) 80%, transparent); }
.invite-google:active:not(:disabled) { transform: scale(.985); }
.invite-g { position: absolute; left: 9px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.invite-g svg { width: 19px; height: 19px; }
.invite-google.is-busy .invite-google-label::after, .invite-email button.is-busy::after {
content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: account-spin 700ms linear infinite;
}
.invite-email {
display: flex; align-items: center; gap: 8px; height: 56px; margin: 10px 0 0; padding: 0 6px 0 22px; box-sizing: border-box;
border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.invite-email:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.invite-email input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 16px/1 var(--sans); }
.invite-email input::placeholder { color: var(--ink-3); opacity: 1; }
.invite-email button {
flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: var(--signal); color: #fff; transition: background-color 160ms ease, transform 180ms var(--invite-ease), opacity 160ms ease;
}
.invite-email button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-email input:placeholder-shown + button { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-3); }
.invite-email button:hover:not(:disabled) { transform: translateX(2px); }
.invite-email button.is-busy svg { display: none; }
.invite-email button.is-busy::after { margin: 0; }
.invite-google:disabled, .invite-email input:disabled, .invite-email button:disabled { cursor: default; }
.invite-accept:has(.is-busy) .invite-google:not(.is-busy), .invite-accept:has(.is-busy) .invite-email:not(:has(.is-busy)) { opacity: .5; }
.invite-error { margin: 10px 4px 0; color: var(--error-ink); font: 500 14px/1.4 var(--sans); }
.invite-error:empty { display: none; }
.invite-fine { margin: 14px 0 0; text-align: center; text-wrap: balance; color: var(--ink-3); font: 400 14px/1.4 var(--sans); animation: invite-fade 700ms ease 1580ms both; }
.invite-jump {
position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3;
display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 22px;
border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
font: 700 15px/1 var(--sans); letter-spacing: -.01em;
box-shadow: 0 1px 0 #ffffff1f inset, 0 16px 32px -12px #171a1980;
opacity: 0; transform: translate(-50%, 18px); pointer-events: none;
transition: opacity 240ms ease, transform 420ms var(--invite-ease);
}
.invite-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-jump.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.invite-foot {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 4px 0 8px;
color: var(--ink-3); font: 500 14px/1.3 var(--sans); animation: invite-fade 700ms ease 1680ms both;
}
.invite-foot a, .invite-explore { color: var(--ink-3); text-decoration: none; }
.invite-explore { padding: 8px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.invite-explore span { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--signal) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.invite-explore span::after { content: " →"; }
.invite-foot a:hover, .invite-explore:hover span { color: var(--signal-text); }
.invite-step { margin: 0 0 12px; font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); outline: none; text-wrap: balance; }
.invite-card-compact .invite-kicker, .invite-card-compact .invite-lede { animation: invite-fade 600ms ease 260ms both; }
.invite-card-compact .invite-step { animation: invite-fade 600ms ease 180ms both; }
.invite-actions { display: grid; gap: 10px; margin-top: 22px; }
.invite-primary, .invite-secondary {
display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; box-sizing: border-box;
border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer;
transition: transform 180ms var(--invite-ease), background-color 160ms ease;
}
.invite-primary { border: 0; background: var(--ink); color: var(--paper); }
.invite-secondary { border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.invite-primary:hover { transform: translateY(-1px); }
.invite-secondary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.invite-card-compact > .invite-primary { width: 100%; margin-top: 22px; }
.invite-code { position: relative; margin: 20px 0 4px; }
.invite-code-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.invite-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.invite-cells > span {
position: relative; display: grid; place-items: center; height: 62px; border-radius: 14px;
border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
font: 600 28px/1 var(--sans); font-variant-numeric: tabular-nums; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.invite-cells > span.is-next { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.invite-cells > span.is-next:empty::after { content: ""; width: 2px; height: 26px; background: var(--signal); animation: blink 1.1s steps(1) infinite; }
.invite-code.is-checking .invite-cells > span { animation: invite-check 900ms ease-in-out infinite; }
.invite-code.is-checking .invite-cells > span:nth-child(2) { animation-delay: 80ms; }
.invite-code.is-checking .invite-cells > span:nth-child(3) { animation-delay: 160ms; }
.invite-code.is-checking .invite-cells > span:nth-child(4) { animation-delay: 240ms; }
.invite-code.is-checking .invite-cells > span:nth-child(5) { animation-delay: 320ms; }
.invite-code.is-checking .invite-cells > span:nth-child(6) { animation-delay: 400ms; }
.invite-code.is-wrong .invite-cells { animation: invite-shake 360ms ease; }
.invite-code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }
.invite-quiet { padding: 8px 0; border: 0; background: none; color: var(--ink-2); font: 500 14px/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.invite-quiet:disabled { color: var(--ink-4); text-decoration: none; cursor: default; }
.invite-quiet:hover:not(:disabled) { color: var(--ink); }
.invite-opening, .invite-onward { margin: 0; font: 500 15px/1.3 var(--sans); color: var(--ink-3); }
.invite-opening { margin-top: 28vh; animation: invite-fade 600ms ease 700ms both; }
.invite-opening span::after, .invite-onward span::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: invite-dots 1.2s steps(4) infinite; clip-path: inset(0 100% 0 0); }
.invite-in .invite-title { margin-bottom: 16px; }
.invite-in .invite-lede { animation: invite-fade 600ms ease 1300ms both; }
.invite-onward { position: relative; padding-top: 14px; border-top: 1px solid var(--line); animation: invite-fade 600ms ease 1300ms both; }
.invite-onward::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--signal); transform-origin: 0 50%; animation: draw-x 1500ms cubic-bezier(.4, 0, .2, 1) 500ms both; }
.invite-letter.is-settled, .invite-letter.is-settled * { animation: none !important; }
.invite-letter.is-settled .invite-underline { clip-path: none; }
.invite-letter.is-settled .invite-brush { display: none; }
.invite-film {
width: min(calc(100vw - 24px), 1120px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0;
border: 0; border-radius: 16px; background: #000; overflow: hidden; box-shadow: 0 30px 80px -20px #000c;
}
.invite-film[open] { animation: invite-room-in 280ms ease both; }
.invite-film::backdrop { background: #0b0d0cdb; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.invite-film video { display: block; width: 100%; max-height: calc(100dvh - 58px); aspect-ratio: 16 / 9; background: #000; }
.invite-film-credit { margin: 0; padding: 9px 16px; font: 12px/16px var(--sans); color: #b8bfba; }
.invite-film-credit a { color: inherit; text-decoration: underline; text-decoration-color: #ffffff4d; text-underline-offset: 2px; }
.invite-film video::cue { font-family: var(--sans); font-size: 14px; color: #fff; background: #0b0d0cc2; }
@media (min-width: 720px) { .invite-film video::cue { font-size: 19px; } }
.invite-film-close {
position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
border: 0; border-radius: 50%; background: #171a19b3; color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.create-welcome { margin: 0 0 14px; color: var(--ink-2); font: 400 17px/1.4 var(--sans); animation: invite-fade 800ms ease 200ms both; }
.create-welcome-hello { color: var(--ink); font: 700 1em/1 var(--sans); letter-spacing: -.01em; }
.invite-stage :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.invite-email :focus-visible, .invite-code-input:focus-visible, .invite-title:focus-visible, .invite-step:focus-visible { outline: none; }
@media (min-width: 720px) {
.invite-room { padding-top: max(22px, env(safe-area-inset-top)); }
.invite-top { height: 72px; }
.invite-mark.wordmark-logo { width: 92px; }
.invite-desk { padding-top: 22px; }
.invite-card { width: 520px; padding: 34px 36px 30px; border-radius: 26px; }
.invite-card-compact { width: 480px; }
.invite-name { font-size: 84px; }
.invite-name[data-size="m"] { font-size: 66px; }
.invite-name[data-size="s"] { font-size: 50px; }
.invite-brush { width: 116px; }
.invite-letter .invite-lede { font-size: 19px; }
}
@media (min-width: 1120px) and (min-height: 600px) {
.invite-desk { align-content: safe center; padding: 12px 0 clamp(12px, 6vh, 56px); }
.invite-letter { width: 470px; translate: 256px 0; margin-bottom: 24px; }
.invite-letter .invite-print { position: absolute; top: 50%; right: calc(100% - 24px); width: 540px; margin: 0; padding: 9px 9px 15px; translate: 0 -50%; transform: rotate(-2.4deg); z-index: 1; }
.invite-letter .invite-asked { padding: 13px 7px 0; font-size: 15px; }
.invite-letter .invite-name { font-size: 88px; }
.invite-letter .invite-name[data-size="m"] { font-size: 66px; }
.invite-letter .invite-name[data-size="s"] { font-size: 46px; }
.invite-letter .invite-lede { margin-bottom: 28px; }
.invite-letter ~ .invite-foot { translate: 256px 0; width: 470px; }
}
@media (max-width: 380px) {
.invite-card { padding: 22px 18px 20px; }
.invite-name { font-size: 52px; }
.invite-name[data-size="m"] { font-size: 40px; }
.invite-name[data-size="s"] { font-size: 31px; }
.invite-kicker { font-size: 13px; }
.invite-letter .invite-lede { font-size: 17px; }
.invite-cells { gap: 6px; }
.invite-cells > span { height: 54px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.invite-stage, .invite-stage *, .invite-film, .create-welcome { animation: none !important; transition: none !important; }
.invite-brush { display: none; }
.invite-underline { clip-path: none; }
}
@keyframes invite-room-in { from { opacity: 0; } }
@keyframes invite-room-out { to { opacity: 0; } }
@keyframes invite-hold { to { visibility: visible; } }
@keyframes invite-lay { from { opacity: 0; transform: translate3d(0, 34px, 0) rotate(-1.6deg) scale(.985); } }
@keyframes invite-print { from { opacity: 0; transform: translate3d(-14px, 26px, 0) rotate(-7deg) scale(1.03); } }
@keyframes invite-fade { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes invite-wipe { to { clip-path: inset(-50% 0 -50% 0); } }
@keyframes invite-brush-move { from { left: 0; } to { left: 100%; } }
@keyframes invite-brush-life { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes invite-check { 50% { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 7%, var(--card)); } }
@keyframes invite-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes invite-dots { to { clip-path: inset(0 -10% 0 0); } }
.account-administration:has(#account-mfa-form) .account-admin-head .account-note { display: none; }

.frame > .agent-stage {
position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto;
border-radius: 0; background: transparent; cursor: pointer;
touch-action: manipulation; -webkit-touch-callout: none;
}
.frame > .agent-stage[hidden] { display: none; }
.frame > .agent-stage:where(:has(> .agent-still:not([hidden]))) { cursor: default; touch-action: pan-y; }
.frame > .agent-stage > video { display: none; }
.film:fullscreen .agent-stage { display: none; }
.film:-webkit-full-screen .agent-stage { display: none; }
.film:fullscreen > :is(.edit-soon, .agent-workspace, .video-update) { display: none; }
.film:-webkit-full-screen > :is(.edit-soon, .agent-workspace, .video-update) { display: none; }
.agent-workspace.is-hosted > .agent-heading, .agent-workspace.is-hosted .agent-player { display: none; }
.agent-workspace.is-hosted[hidden] { display: none; }
.agent-workspace.is-hosted { margin-top: 14px; }
.agent-workspace.is-hosted .agent-sheet { margin: 0; border-color: var(--edge, var(--line)); border-radius: 12px; box-shadow: 0 1px 2px var(--landing-shadow-soft); }
.agent-workspace.is-hosted .agent-narration { border-top: 0; border-bottom: 1px solid var(--line); }
.agent-workspace.is-hosted .agent-composer-area { border-top: 0; border-radius: 11px; }
.edit-soon { display: flex; box-sizing: border-box; align-items: center; gap: 10px; min-height: 96px; margin: 14px 0 0; padding: 12px 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-3); font: 400 13.5px/1.5 var(--sans); letter-spacing: -.003em; }
.edit-soon[hidden] { display: none; }
.edit-soon svg { flex: none; color: var(--ink-4, var(--ink-3)); }
:root:not([data-format="portrait"]) .page.is-run-view:has(#edit-soon:not([hidden]), #agent-workspace.is-hosted:not([hidden])) { --col-max: clamp(640px, calc((100svh - 378px) * 16 / 9), 1280px); }
.agent-workspace.is-hosted[inert] .agent-sheet { opacity: .6; transition: opacity 200ms; }
.run.has-editor .video-update:not(.is-failed) { display: none; }
.film > .video-update { margin-top: 14px; }
.controls .agent-motion { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; border: 0; border-radius: 6px; color: #ffffffd9; background: transparent; font: 500 12.5px/1 var(--sans); letter-spacing: -.003em; cursor: pointer; }
.controls .agent-motion[hidden] { display: none; }
.controls .agent-motion:hover:not([aria-disabled="true"]) { color: #fff; background: #ffffff14; }
.controls .agent-motion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.controls .agent-motion .agent-motion-track { background: #ffffff47; }
.controls .agent-motion[aria-checked="true"] .agent-motion-track { background: var(--signal); }
.controls .agent-motion .agent-motion-knob { background: #fff; box-shadow: 0 1px 2px #00000059; }
.film:fullscreen .controls .agent-motion { display: none; }
@keyframes agent-motion-pulse { 50% { opacity: .45; } }
:root[data-format="portrait"] .controls .agent-motion { width: 32px; padding: 0; justify-content: center; }
:root[data-format="portrait"] .controls .agent-motion :is(.agent-motion-label, .agent-motion-track) { display: none; }
:root[data-format="portrait"] .controls .agent-motion-icon { display: block; }
:root[data-format="portrait"] .controls .agent-motion[aria-checked="true"] .agent-motion-icon { color: var(--signal); }
:root[data-format="portrait"] .controls .agent-motion[aria-checked="false"] { color: #ffffff9e; }
:root[data-format="portrait"] .controls .agent-motion.is-busy .agent-motion-icon { animation: agent-motion-pulse 1.1s ease-in-out infinite; }
:root[data-format="portrait"] .run .controls:has(> .agent-motion:not([hidden])) :is(.time-sep, .time-total) { display: none; }
:root[data-format="portrait"] .run .film > :is(.edit-soon, .agent-workspace.is-hosted, .video-update) { box-sizing: border-box; width: min(100%, max(calc(var(--portrait-frame-h) * 9 / 16), 420px)); margin-inline: auto; }
:root[data-format="portrait"] .agent-workspace.is-hosted .agent-sheet { width: auto; }
:root[data-format="portrait"] .frame > .agent-stage { aspect-ratio: auto; border-radius: 0; }
@media (min-width: 1000px) {
:root[data-format="portrait"] .run .film:not(:fullscreen):has(> .edit-soon:not([hidden]), > .agent-workspace.is-hosted:not([hidden])) { display: grid; grid-template-columns: calc(var(--portrait-frame-h) * 9 / 16) clamp(340px, 30vw, 420px); justify-content: center; align-items: start; column-gap: 24px; }
:root[data-format="portrait"] .run .film > * { grid-column: 1; }
:root[data-format="portrait"] .run .film > .player-shell { grid-row: 1; }
:root[data-format="portrait"] .run .film > :is(.edit-soon, .agent-workspace.is-hosted) { grid-column: 2; grid-row: 1; align-self: stretch; width: auto; margin: 0; }
:root[data-format="portrait"] .run .film > .video-update { grid-column: 2; grid-row: 2; width: auto; }
:root[data-format="portrait"] .run .film:not(:fullscreen) > .edit-soon:not([hidden]) { flex-direction: column; justify-content: center; padding: 24px 32px; text-align: center; text-wrap: balance; }
:root[data-format="portrait"] .run .film:not(:fullscreen) > .agent-workspace.is-hosted:not([hidden]) { display: flex; flex-direction: column; min-height: 0; }
:root[data-format="portrait"] .agent-workspace.is-hosted .agent-sheet { display: flex; flex: 1 1 auto; flex-direction: column; width: auto; min-height: 0; }
:root[data-format="portrait"] .agent-workspace.is-hosted .agent-panel { flex: 1 1 auto; border-left: 0; }
:root[data-format="portrait"] .agent-workspace.is-hosted .agent-composer-area { border-radius: 0 0 11px 11px; }
:root[data-format="portrait"] .agent-workspace.is-hosted #agent-prompt { flex-basis: calc(100% - 50px); }
}
@media (max-width: 600px) {
.controls .agent-motion { width: 32px; padding: 0; justify-content: center; }
.controls .agent-motion :is(.agent-motion-label, .agent-motion-track) { display: none; }
.controls .agent-motion-icon { display: block; }
.controls .agent-motion[aria-checked="true"] .agent-motion-icon { color: var(--signal); }
.controls .agent-motion[aria-checked="false"] { color: #ffffff9e; }
.controls .agent-motion.is-busy .agent-motion-icon { animation: agent-motion-pulse 1.1s ease-in-out infinite; }
.run .controls:has(> .agent-motion:not([hidden])) :is(.time-sep, .time-total) { display: none; }
.edit-soon { min-height: 124px; }
}
@media (max-width: 600px) and (hover: none) {
.run .controls:has(> .agent-motion:not([hidden])) .control.mute { display: none; }
}
.agent-workspace, .agent-stage { --agent-accent: var(--signal); --agent-motion: cubic-bezier(.2, .8, .2, 1); --agent-spring: cubic-bezier(.34, 1.45, .64, 1); --agent-hover: color-mix(in srgb, var(--ink) 5.5%, transparent); --transport-h: 72px; }
.agent-workspace svg, .agent-heading svg, .agent-stage svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.agent-workspace button:disabled { opacity: .35; cursor: default; }
.agent-workspace :focus-visible, .agent-heading :focus-visible, .agent-stage:focus-visible { outline: 2px solid var(--agent-accent, var(--signal)); outline-offset: 2px; }
.agent-workspace button, .agent-workspace a, .agent-heading :is(button, a), .agent-drawings > summary { transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms, opacity 150ms, transform 120ms; }
.agent-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; }
.agent-ready .bar .agent-heading { flex: 1; min-height: 36px; margin-left: 20px; padding-left: 20px; border-left: 1px solid var(--line); }
.agent-title-block { display: grid; gap: 2px; min-width: 0; }
.agent-heading h1 { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font: 500 15px/20px var(--sans); letter-spacing: -.006em; white-space: nowrap; text-overflow: ellipsis; }
.agent-meta { min-height: 16px; margin: 0; overflow: hidden; color: var(--ink-3); font: 400 12.5px/16px var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.agent-meta-time { font: 450 11.5px/16px var(--data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.agent-doc-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.agent-doc-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--ink); font: 500 13.5px/1 var(--sans); letter-spacing: -.003em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.agent-doc-button svg { width: 17px; height: 17px; stroke-width: 1.75; }
.agent-doc-button:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line-2)); background: var(--agent-hover, color-mix(in srgb, var(--ink) 5%, transparent)); }
.agent-doc-button:active { transform: scale(.97); }
.agent-doc-button.is-primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.agent-doc-button.is-primary:hover { border-color: color-mix(in srgb, var(--ink) 86%, var(--paper)); background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.agent-doc-button[hidden] { display: none; }
.agent-sheet { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 18px 48px -20px var(--landing-shadow-deep); }
.agent-panel { min-width: 0; }
.agent-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: 15px 15px 0 0; background: #fff; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.agent-stage:focus-visible { outline-offset: -2px; }
.agent-stage[data-mode="words"] { cursor: crosshair; }
html[data-format="portrait"] .agent-sheet { width: min(100%, calc((100dvh - var(--agent-chrome, 278px)) * 9 / 16), 560px); margin-inline: auto; }
html[data-format="portrait"] .agent-player:not(.is-fullscreen) { width: 100%; }
html[data-format="portrait"] .agent-stage { aspect-ratio: 9 / 16; }
.agent-stage video, .agent-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.agent-still { z-index: 1; pointer-events: none; }
.agent-stage video { background: #fff; }
.agent-pin { position: absolute; z-index: 3; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; background: var(--agent-accent); box-shadow: 0 0 0 1.5px var(--agent-accent), 0 2px 8px var(--landing-shadow-deep); transform: translate(-50%, -50%); pointer-events: none; animation: agent-pin-enter 160ms var(--agent-motion); }
.agent-selection { position: absolute; z-index: 3; box-sizing: border-box; border: 1.5px solid var(--agent-accent); border-radius: 2px; background: color-mix(in srgb, var(--signal) 10%, transparent); box-shadow: 0 0 0 1px #fff9, 0 0 0 9999px var(--landing-shadow-soft); pointer-events: none; }
.agent-selection::before, .agent-selection::after { content: ""; position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid var(--agent-accent); border-radius: 1px; }
.agent-selection::before { top: -3px; left: -3px; }
.agent-selection::after { right: -3px; bottom: -3px; }
.agent-objects { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.agent-stage.is-over-object { cursor: pointer; }
.agent-stage.is-over-selected { cursor: grab; }
.agent-stage.is-moving { cursor: grabbing; }
.agent-object-chip { position: absolute; z-index: 4; max-width: min(60%, 320px); padding: 4px 9px; overflow: hidden; border-radius: 7px; color: var(--paper); background: var(--ink); box-shadow: 0 2px 10px var(--landing-shadow-deep); font: 500 12px/1.45 var(--sans); white-space: nowrap; text-overflow: ellipsis; transform: translateY(calc(-100% - 6px)); pointer-events: none; animation: agent-fade-in 120ms var(--agent-motion); }
.agent-cue { border-radius: 3px; color: var(--ink); text-decoration: underline dotted color-mix(in srgb, var(--ink) 45%, transparent); text-underline-offset: 4px; cursor: pointer; }
.agent-cue:hover, .agent-cue.is-selected { background: color-mix(in srgb, var(--signal) 16%, transparent); }
.agent-preview-label { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--paper); color: var(--signal-text); font: 500 12px/1.4 var(--sans); pointer-events: none; }
.agent-canvas-status { position: absolute; z-index: 4; inset: auto 14px 14px; width: fit-content; max-width: calc(100% - 28px); padding: 7px 11px; margin: 0; border-radius: 7px; background: var(--paper); color: var(--ink-2); font: 400 12px/1.5 var(--sans); pointer-events: none; }
.agent-player {
--seek-rest: color-mix(in srgb, var(--ink) 13%, transparent);
--seek-loaded: color-mix(in srgb, var(--ink) 22%, transparent);
--seek-hover: color-mix(in srgb, var(--ink) 28%, transparent);
container: agent-player / inline-size;
position: relative;
}
.agent-screen { display: none; }
.agent-controls { position: relative; z-index: 4; display: flex; flex-direction: column; padding: 2px 10px 5px; border-top: 1px solid var(--line); background: var(--paper); user-select: none; -webkit-user-select: none; }
.agent-transport-row { display: flex; align-items: center; gap: 2px; min-width: 0; height: 42px; }
.agent-transport-button { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; color: var(--ink-2); background: transparent; cursor: pointer; }
.agent-transport-button:hover:not(:disabled) { color: var(--ink); background: var(--agent-hover); }
.agent-transport-button:active:not(:disabled) { transform: scale(.9); }
.agent-transport-button svg { width: 20px; height: 20px; overflow: visible; }
.agent-skip svg { width: 18px; height: 18px; stroke-width: 1.9; }
.agent-glyph { fill: currentColor; stroke: none; }
.agent-workspace[data-scenes="one"] .agent-skip { display: none; }
.agent-workspace .agent-play { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-right: 4px; padding: 0; border: 0; border-radius: 50%; color: var(--paper); background: var(--ink); cursor: pointer; transition: transform 220ms var(--agent-spring), background-color 160ms; }
.agent-workspace .agent-play:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); transform: scale(1.05); }
.agent-workspace .agent-play:active:not(:disabled) { transform: scale(.92); transition-duration: 90ms; }
.agent-workspace .agent-play:disabled { opacity: 1; background: color-mix(in srgb, var(--ink) 30%, var(--paper)); cursor: default; }
.agent-play svg { position: absolute; width: 18px; height: 18px; fill: currentColor; stroke: none; transition: opacity 160ms var(--agent-motion), transform 300ms var(--agent-spring); }
.agent-play .agent-replay-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; }
.agent-pause-icon, .agent-replay-icon { opacity: 0; transform: scale(.4) rotate(-60deg); }
.agent-controls.is-playing .agent-play-icon, .agent-controls.is-ended .agent-play-icon { opacity: 0; transform: scale(.4) rotate(60deg); }
.agent-controls.is-playing .agent-pause-icon, .agent-controls.is-ended .agent-replay-icon { opacity: 1; transform: none; }
.agent-play::after { content: ""; position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: var(--agent-accent); border-right-color: color-mix(in srgb, var(--agent-accent) 35%, transparent); border-radius: 50%; opacity: 0; pointer-events: none; }
.agent-controls:is(.is-waiting, .is-loading) .agent-play::after { animation: agent-spin 850ms linear infinite, agent-fade-in 240ms 450ms both; }
.agent-clock { display: inline-flex; flex: none; align-items: center; margin-left: 4px; }
.agent-time { flex: none; padding: 0 2px; color: var(--ink); font: 450 12px/1 var(--data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.agent-workspace .agent-duration { height: 30px; padding: 0 6px 0 2px; border: 0; border-radius: 8px; color: var(--ink-3); background: none; cursor: pointer; }
.agent-duration::before { content: "/"; margin-right: 6px; color: var(--ink-4, var(--ink-3)); }
.agent-workspace .agent-duration:hover { color: var(--ink); background: var(--agent-hover); }
.agent-scene-picker { position: relative; display: flex; flex: 0 1 auto; min-width: 0; margin-left: 6px; }
.agent-scene-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 32px; padding: 0 6px 0 4px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: -.004em; cursor: pointer; }
.agent-scene-chip:hover, .agent-scene-chip[aria-expanded="true"] { background: var(--agent-hover); }
.agent-scene-roll { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.agent-scene-roll.is-rolling-up { animation: agent-roll-up 280ms var(--agent-motion); }
.agent-scene-roll.is-rolling-down { animation: agent-roll-down 280ms var(--agent-motion); }
.agent-scene-number { flex: none; padding: 4px 6px; border-radius: 6px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6.5%, transparent); font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.agent-scene-number:empty { display: none; }
.agent-scene-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-scene-caret { width: 16px; height: 16px; margin-left: -3px; color: var(--ink-3); stroke-width: 1.9; transition: transform 200ms var(--agent-motion); }
.agent-scene-chip[aria-expanded="true"] .agent-scene-caret { transform: rotate(180deg); }
.agent-workspace[data-scenes="one"] .agent-scene-chip { opacity: 1; pointer-events: none; }
.agent-workspace[data-scenes="one"] .agent-scene-caret, .agent-workspace[data-scenes="one"] .agent-scene-number { display: none; }
.agent-scene-menu { position: absolute; bottom: calc(100% + 8px); left: -4px; z-index: 8; box-sizing: border-box; width: max-content; min-width: 250px; max-width: min(380px, calc(100cqi - 16px)); max-height: min(340px, 58vh, var(--agent-menu-room, 340px)); overflow: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 4px var(--landing-shadow-soft), 0 18px 40px -10px var(--landing-shadow-deep); transform-origin: 24px 100%; animation: agent-menu-in 170ms var(--agent-motion); }
.agent-scene-menu[hidden] { display: none; }
.agent-scene-menu.is-below { top: calc(100% + 8px); bottom: auto; transform-origin: 24px 0; }
.agent-scene-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 400 13.5px/1.35 var(--sans); text-align: start; cursor: pointer; }
.agent-scene-item:hover, .agent-scene-item:focus-visible { color: var(--ink); background: var(--agent-hover); }
.agent-workspace .agent-scene-item:focus-visible { outline-offset: -2px; }
.agent-scene-item-number, .agent-scene-item-time { color: var(--ink-3); font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.agent-scene-item-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-scene-item[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.agent-scene-item[aria-checked="true"] .agent-scene-item-number { color: var(--agent-accent); }
.agent-seek { position: relative; flex: none; height: 22px; margin: 0 6px; border-radius: 6px; cursor: pointer; touch-action: none; }
.agent-track { position: absolute; inset: 0; pointer-events: none; }
.agent-segment {
--played: 0%; --loaded: 0%; --hover: 0%;
position: absolute; top: 50%; left: var(--from); width: calc(var(--size) - 3px); height: 4px; border-radius: 4px; transform: translateY(-50%);
background:
linear-gradient(to right, var(--agent-accent) 0 var(--played), transparent 0),
linear-gradient(to right, var(--seek-hover) 0 var(--hover), transparent 0),
linear-gradient(to right, var(--seek-loaded) 0 var(--loaded), var(--seek-rest) 0);
transition: height 200ms var(--agent-motion);
}
.agent-segment:last-child { width: var(--size); }
.agent-seek:hover .agent-segment, .agent-controls.is-scrubbing .agent-segment { height: 6px; }
.agent-seek:hover .agent-segment.is-hover, .agent-controls.is-scrubbing .agent-segment.is-hover { height: 8px; }
.agent-thumb { --at: 0%; position: absolute; top: 50%; left: var(--at); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--agent-accent); box-shadow: 0 0 0 2.5px var(--paper), 0 1px 5px var(--landing-shadow-deep); transform: scale(0); transition: transform 220ms var(--agent-spring); pointer-events: none; }
.agent-seek:hover .agent-thumb, .agent-seek:focus-visible .agent-thumb { transform: scale(1); }
.agent-workspace .agent-seek:focus-visible { outline: none; }
.agent-seek:focus-visible .agent-thumb { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4.5px var(--agent-accent), 0 1px 5px var(--landing-shadow-deep); }
.agent-controls.is-scrubbing .agent-thumb { transform: scale(1.2); }
.agent-tip { position: absolute; bottom: calc(100% + 2px); left: 0; z-index: 6; display: grid; justify-items: center; gap: 5px; width: max-content; max-width: 240px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 2px 4px var(--landing-shadow-soft), 0 16px 36px -8px var(--landing-shadow-deep); transform: translateX(-50%); pointer-events: none; animation: agent-tip-in 150ms var(--agent-motion); }
.agent-tip[hidden] { display: none; }
.agent-tip:has(> .agent-peek:not([hidden])) { width: 188px; }
.agent-peek { display: block; width: 176px; height: auto; border-radius: 8px; background: var(--film-paper); box-shadow: 0 0 0 1px var(--film-line); opacity: 0; transition: opacity 120ms; }
.agent-peek.is-ready { opacity: 1; }
.agent-peek[hidden] { display: none; }
html[data-format="portrait"] .agent-peek { width: 108px; }
.agent-tip-row { display: flex; align-items: baseline; gap: 10px; width: 100%; box-sizing: border-box; min-width: 0; padding: 1px 5px 2px; }
.agent-tip-scene { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font: 500 12.5px/1.4 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.agent-tip-scene:empty { display: none; }
.agent-tip-scene::before { content: attr(data-number); margin-right: 7px; color: var(--ink-3); font: 500 11px/1 var(--data); font-variant-numeric: tabular-nums; }
.agent-tip-time { flex: none; margin-left: auto; color: var(--ink-3); font: 450 11.5px/1.4 var(--data); font-variant-numeric: tabular-nums; }
.agent-tip-scene:empty + .agent-tip-time { margin-inline: auto; color: var(--ink); }
.agent-volume { display: flex; flex: none; align-items: center; }
.agent-speaker .agent-wave, .agent-speaker .agent-silent { transform-box: fill-box; transform-origin: left center; transition: opacity 160ms var(--agent-motion), transform 260ms var(--agent-spring); }
.agent-speaker .agent-silent { transform-origin: center; opacity: 0; transform: scale(.3); }
.agent-controls[data-volume="low"] .agent-wave-2, .agent-controls[data-volume="off"] .agent-wave { opacity: 0; transform: scale(.5); }
.agent-controls[data-volume="off"] .agent-silent { opacity: 1; transform: none; }
.agent-volume-slider { --level: 100%; position: relative; flex: none; width: 0; height: 36px; margin: 0; opacity: 0; cursor: pointer; touch-action: none; transition: width 240ms var(--agent-motion), margin 240ms var(--agent-motion), opacity 160ms; }
.agent-volume:hover .agent-volume-slider, .agent-volume:focus-within .agent-volume-slider, .agent-controls.is-adjusting .agent-volume-slider { width: 68px; margin: 0 8px 0 4px; opacity: 1; }
.agent-volume-track { position: absolute; top: 50%; right: 0; left: 0; height: 4px; margin-top: -2px; overflow: hidden; border-radius: 4px; background: var(--seek-rest); }
.agent-volume-fill { display: block; width: var(--level); height: 100%; background: var(--ink-2); }
.agent-volume-thumb { position: absolute; top: 50%; left: var(--level); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); transition: transform 180ms var(--agent-spring); }
.agent-controls.is-adjusting .agent-volume-thumb { transform: scale(1.18); }
.agent-workspace .agent-motion { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 32px; margin-left: auto; padding: 0 8px 0 10px; border: 0; border-radius: 9px; color: var(--ink-2); background: transparent; font: 500 12.5px/1 var(--sans); letter-spacing: -.004em; white-space: nowrap; cursor: pointer; }
.agent-workspace .agent-motion[hidden], .agent-player.is-fullscreen .agent-motion { display: none; }
.agent-player:not(.is-fullscreen) .agent-motion:not([hidden]) ~ .agent-fullscreen { margin-left: 0; }
.agent-motion:hover:not([aria-disabled="true"]) { color: var(--ink); background: var(--agent-hover); }
.agent-motion-icon { display: none; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.agent-motion-track { position: relative; flex: none; width: 26px; height: 16px; border-radius: 8px; background: var(--seek-rest); transition: background-color 200ms var(--agent-motion); }
.agent-motion-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px var(--landing-shadow-deep); transition: transform 260ms var(--agent-spring); }
.agent-motion[aria-checked="true"] .agent-motion-track { background: var(--agent-accent); }
.agent-motion[aria-checked="true"] .agent-motion-knob { transform: translateX(10px); }
.agent-motion[aria-disabled="true"] { cursor: default; }
.agent-motion[aria-disabled="true"]:not(.is-busy) { opacity: .5; }
.agent-motion.is-busy .agent-motion-knob { animation: agent-motion-busy 1.1s ease-in-out infinite; }
@keyframes agent-motion-busy { 50% { transform: translateX(var(--knob-at, 0px)) scale(.62); } }
.agent-motion.is-busy[aria-checked="true"] { --knob-at: 10px; }
.agent-fullscreen { margin-left: auto; }
.agent-corner { --dx: 0px; --dy: 0px; --turn: 0deg; transform-box: fill-box; transform-origin: center; transform: translate(var(--dx), var(--dy)) rotate(var(--turn)); transition: transform 260ms var(--agent-spring); }
.agent-fullscreen:hover .agent-corner-1, .agent-fullscreen:hover .agent-corner-4 { --dx: -1.25px; }
.agent-fullscreen:hover .agent-corner-2, .agent-fullscreen:hover .agent-corner-3 { --dx: 1.25px; }
.agent-fullscreen:hover .agent-corner-1, .agent-fullscreen:hover .agent-corner-2 { --dy: -1.25px; }
.agent-fullscreen:hover .agent-corner-3, .agent-fullscreen:hover .agent-corner-4 { --dy: 1.25px; }
.agent-player.is-fullscreen .agent-corner { --turn: 180deg; }
.agent-player.is-fullscreen .agent-fullscreen:hover .agent-corner { --dx: 0px; --dy: 0px; }
.agent-bezel { position: absolute; z-index: 5; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; color: #fff; background: rgb(23 26 25 / .5); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); opacity: 0; pointer-events: none; }
.agent-bezel[data-kind="back"] { left: 24%; }
.agent-bezel[data-kind="ahead"] { left: 76%; }
.agent-bezel > svg { display: none; width: 30px; height: 30px; fill: currentColor; stroke: none; }
.agent-bezel[data-kind="play"] .agent-bezel-play, .agent-bezel[data-kind="pause"] .agent-bezel-pause { display: block; }
.agent-bezel-seek { display: none; align-items: center; gap: 1px; font: 600 13px/1 var(--sans); letter-spacing: -.01em; }
.agent-bezel-seek svg { width: 18px; height: 18px; stroke-width: 2.2; }
.agent-bezel:is([data-kind="back"], [data-kind="ahead"]) .agent-bezel-seek { display: inline-flex; }
.agent-bezel[data-kind="ahead"] .agent-bezel-seek { flex-direction: row-reverse; }
.agent-bezel[data-kind="ahead"] .agent-bezel-seek svg { transform: scaleX(-1); }
.agent-bezel.is-flashing { animation: agent-bezel 620ms var(--agent-motion); }
.agent-hint { position: fixed; z-index: 2147483000; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 5px 5px 9px; border-radius: 8px; color: var(--paper); background: var(--ink); box-shadow: 0 1px 2px #171a1914, 0 6px 18px #171a1929; font: 500 12px/1.3 var(--sans); letter-spacing: -.003em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(3px) scale(.96); transition: opacity 120ms cubic-bezier(.2, .8, .2, 1), transform 180ms cubic-bezier(.2, .8, .2, 1); }
.agent-hint[data-side="below"] { transform: translateY(-3px) scale(.96); }
.agent-hint.is-shown { opacity: 1; transform: none; }
.agent-hint[hidden], .agent-hint kbd[hidden] { display: none; }
.agent-hint:not(:has(kbd:not([hidden]))) { padding-right: 9px; }
.agent-hint kbd { min-width: 18px; box-sizing: border-box; padding: 3px 5px; border-radius: 5px; color: color-mix(in srgb, var(--paper) 80%, transparent); background: color-mix(in srgb, var(--paper) 17%, transparent); font: 500 10.5px/1 var(--data); text-align: center; }
.agent-player:is(.is-fullscreen, :fullscreen) {
--ink: var(--film-ink); --ink-2: var(--film-ink-2); --ink-3: #6e726f; --ink-4: #9a9d9a; --line: var(--film-line);
--paper: var(--agent-paper, var(--film-paper)); --landing-shadow-soft: #171a190a; --landing-shadow-deep: #171a1924;
--agent-hover: color-mix(in srgb, var(--ink) 6%, transparent);
display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--paper); box-shadow: none; color-scheme: light;
}
.agent-player.is-fullscreen { --transport-h: 78px; }
.agent-player.is-fullscreen .agent-stage { flex: 1 1 0; width: 100%; min-height: 0; aspect-ratio: auto; margin: 0; border-radius: 0; background: transparent; cursor: default; }
.agent-player.is-fullscreen .agent-stage video { background: transparent; }
.agent-player.is-fullscreen :is(.agent-still, .agent-pin, .agent-selection, .agent-objects, .agent-object-chip) { display: none; }
.agent-player.is-fullscreen .agent-screen { position: absolute; inset: 0 0 var(--transport-h); z-index: 3; display: block; cursor: pointer; }
.agent-player.is-fullscreen .agent-controls { flex: none; box-sizing: content-box; height: 70px; padding: 4px max(22px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: transparent; transition: opacity 320ms var(--agent-motion), transform 320ms var(--agent-motion); }
.agent-player.is-fullscreen.is-idle .agent-controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
.agent-player.is-fullscreen.is-idle, .agent-player.is-fullscreen.is-idle .agent-screen { cursor: none; }
.agent-narration { max-height: min(32vh, 320px); margin: 0; padding: 16px 22px 18px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); color: var(--ink); font: 400 17px/1.62 var(--reading, var(--sans)); font-optical-sizing: auto; text-wrap: pretty; user-select: text; }
.agent-narration p { max-width: 72ch; margin: 0; }
.agent-narration p + p { margin-top: 10px; }
.agent-narration p::selection, .agent-narration ::selection { color: var(--ink); background: var(--selection); }
.agent-narration.is-script { padding-inline: 12px; }
.agent-narration.is-script > * { box-sizing: border-box; max-width: calc(72ch + 54px); }
.agent-narration.is-script p + p, .agent-narration.is-script .agent-line + .agent-line-editor, .agent-narration.is-script .agent-line-editor + .agent-line { margin-top: 2px; }
.agent-line { position: relative; max-width: none; padding: 5px 44px 5px 10px; border-radius: 10px; cursor: text; transition: background-color 150ms; }
.agent-line:hover { background: var(--agent-hover); }
.agent-line-edit { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink-3); cursor: pointer; opacity: .6; }
.agent-line-edit svg { width: 17px; height: 17px; }
.agent-line:hover .agent-line-edit, .agent-line-edit:focus-visible { color: var(--ink); opacity: 1; }
.agent-line-edit:hover { background: var(--agent-hover); }
.agent-line.is-changed .agent-line-text { text-decoration: underline solid color-mix(in srgb, var(--agent-accent) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.agent-line-badge { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 6px; background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal-text); font: 500 11.5px/1.7 var(--sans); vertical-align: 2px; white-space: nowrap; }
.agent-line.is-choosing { cursor: default; background: color-mix(in srgb, var(--signal) 7%, transparent); }
.agent-line-hint { display: block; margin-bottom: 1px; color: var(--signal-text); font: 500 12.5px/1.6 var(--sans); }
.agent-word { border-radius: 4px; transition: background-color 120ms; }
.agent-line.is-choosing .agent-word { cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 4px; }
.agent-line.is-choosing .agent-word:hover, .agent-word.is-target { background: color-mix(in srgb, var(--signal) 20%, transparent); }
.agent-cue.is-moved { text-decoration-style: solid; text-decoration-color: var(--agent-accent); }
.agent-cue.is-nib { padding: 1px 4px; margin-inline: -4px; background: color-mix(in srgb, var(--signal) 24%, transparent); text-decoration: underline solid var(--agent-accent); text-decoration-thickness: 2px; cursor: grab; touch-action: none; }
.agent-narration.is-dragging, .agent-narration.is-dragging * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.agent-line.is-added .agent-line-text { text-decoration: none; }
.agent-line.is-added { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.agent-line.is-removed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; padding-right: 10px; color: var(--ink-3); cursor: default; }
.agent-line.is-removed:hover { background: none; }
.agent-line.is-removed .agent-line-text { flex: 1 1 12ch; min-width: 0; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.agent-line.is-removed .agent-line-badge { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); }
.agent-line-restore { flex: none; margin-left: 8px; min-height: 30px; padding: 2px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 500 12.5px/1.5 var(--sans); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.agent-line-restore:hover:not(:disabled) { color: var(--ink); background: var(--agent-hover); }
.agent-line-add { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: 6px; padding: 4px 10px 4px 8px; border: 1px dashed var(--line-2); border-radius: 10px; background: none; color: var(--ink-2); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.agent-line-add svg { width: 15px; height: 15px; stroke-width: 2; }
.agent-line-add:hover:not(:disabled) { border-style: solid; color: var(--ink); background: var(--agent-hover); }
.agent-line-add:disabled { opacity: .45; cursor: default; }
.agent-line-delete { flex: none; min-height: 32px; padding: 5px 10px; border: 0; border-radius: 10px; background: none; color: var(--oxide); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.agent-line-delete:hover:not(:disabled) { background: color-mix(in srgb, var(--oxide) 9%, transparent); }
.agent-line-editor { padding: 10px 12px 10px; border: 1px solid color-mix(in srgb, var(--agent-accent) 50%, var(--line)); border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent) 11%, transparent); animation: agent-rise 160ms var(--agent-motion); }
.agent-line-input { display: block; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; line-height: 1.55; resize: none; outline: none; }
.agent-workspace .agent-line-input:focus-visible { outline: none; }
.agent-line-note { margin: 6px 0 0; color: var(--ink-2); font: 400 12.5px/1.5 var(--sans); }
.agent-line-note[hidden] { display: none; }
.agent-line-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.agent-line-help { flex: 1 1 14ch; min-width: 0; color: var(--ink-3); font: 400 12px/1.5 var(--sans); }
.agent-line-actions .agent-accept, .agent-line-actions .agent-cancel { min-width: 0; min-height: 32px; padding: 5px 15px; }
@media (hover: none) { .agent-line-edit { opacity: 1; } .agent-line-help { display: none; } }
@container agent-band (max-width: 560px) { .agent-foot-start:has(#agent-object-timing:not([hidden]), #agent-object-remove:not([hidden])) .agent-canvas-help { display: none; } }
.agent-composer-area { --agent-film-paper: var(--film-paper, #fbfbfb); container: agent-band / inline-size; position: relative; padding: 12px 14px 5px 16px; border-top: 1px solid var(--line); border-radius: 0 0 15px 15px; background: color-mix(in srgb, var(--ink) 2.5%, var(--paper)); transition: background-color 220ms var(--agent-motion); }
.agent-composer-area:focus-within { background: var(--paper); }
.agent-composer-area::before { content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--agent-accent), transparent) no-repeat; background-size: 36% 100%; background-position: -60% 0; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.agent-composer-area.is-working::before { opacity: 1; animation: agent-signal 1500ms cubic-bezier(.45, 0, .25, 1) infinite; }
.agent-form { position: relative; padding: 0; border: 0; background: transparent; }
.agent-picks { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 40px; }
.agent-picks[hidden] { display: none; }
.agent-picks-label { flex: none; color: var(--ink-2); font: 500 13px/1.3 var(--sans); letter-spacing: -.003em; }
.agent-pick-list { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; margin: -3px; padding: 3px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 3px; scroll-snap-type: x proximity; }
.agent-pick-list::-webkit-scrollbar { display: none; }
.agent-pick-list.is-clipped-end { mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.agent-pick-list.is-clipped-start { mask-image: linear-gradient(to right, transparent, #000 36px); -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); }
.agent-pick-list.is-clipped-start.is-clipped-end { mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.agent-pick { display: inline-flex; flex: none; align-items: center; gap: 9px; max-width: 220px; height: 38px; padding: 0 13px 0 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 1.5px var(--landing-shadow-soft); font: 500 13px/1 var(--sans); letter-spacing: -.004em; scroll-snap-align: start; cursor: pointer; }
.agent-pick.is-entering { animation: agent-pick-in 320ms var(--agent-motion) both; animation-delay: calc(var(--i, 0) * 34ms); }
.agent-pick:hover, .agent-pick.is-hover { border-color: color-mix(in srgb, var(--agent-accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent) 13%, transparent), 0 1px 1.5px var(--landing-shadow-soft); }
.agent-pick:active { transform: scale(.97); }
.agent-workspace .agent-pick:focus-visible { outline-offset: 1px; }
.agent-pick-thumb { display: block; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--agent-film-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); transition: transform 240ms var(--agent-spring); }
.agent-pick:hover .agent-pick-thumb, .agent-pick.is-hover .agent-pick-thumb { transform: scale(1.06); }
.agent-pick-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-input-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; min-height: 40px; }
.agent-input-row[hidden] { display: none; }
.agent-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; min-width: 0; max-width: min(46%, 280px); height: 32px; margin-top: 4px; padding: 0 3px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 1.5px var(--landing-shadow-soft); font: 500 13px/1 var(--sans); animation: agent-chip-in 220ms var(--agent-spring); }
.agent-chip[hidden] { display: none; }
.agent-chip::before { content: ""; width: 7px; height: 7px; flex: none; margin-right: 6px; border-radius: 50%; background: var(--agent-accent); }
.agent-object-bar { gap: 7px; padding-left: 3px; border-color: color-mix(in srgb, var(--agent-accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-accent) 10%, transparent); }
.agent-object-bar::before { display: none; }
.agent-chip-thumb { display: block; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--agent-film-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
.agent-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chip button { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; color: var(--ink-3); background: none; }
.agent-chip button:hover:not(:disabled) { color: var(--ink); background: var(--agent-hover); }
.agent-chip svg { width: 13px; height: 13px; stroke-width: 2; }
#agent-prompt { display: block; box-sizing: border-box; flex: 1 1 220px; width: 100%; min-width: 0; min-height: 40px; max-height: 150px; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.5 var(--sans); outline: none; resize: none; overflow-y: auto; }
#agent-prompt::placeholder { color: var(--ink-3); opacity: 1; transition: opacity 300ms var(--agent-motion); }
#agent-prompt.is-hint-out::placeholder { opacity: 0; }
#agent-prompt:placeholder-shown { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#agent-prompt::placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#agent-prompt:read-only { color: var(--ink-2); }
#agent-prompt:disabled { pointer-events: none; }
.agent-send { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin: 3px 0; padding: 0; border: 0; border-radius: 50%; color: var(--paper); background: var(--ink); animation: agent-chip-in 200ms var(--agent-spring); }
.agent-send[hidden] { display: none; }
.agent-send svg { width: 17px; height: 17px; stroke-width: 2.1; }
.agent-send:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.agent-send:active:not(:disabled) { transform: scale(.94); }
.agent-workspace .agent-send:disabled { opacity: 1; color: var(--paper); background: color-mix(in srgb, var(--ink) 16%, var(--paper)); }
.agent-workspace .agent-send.is-sending { background: var(--ink); cursor: default; }
.agent-send.is-sending svg { visibility: hidden; }
.agent-send.is-sending::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--paper) 40%, transparent); border-top-color: var(--paper); border-radius: 50%; animation: agent-spin 800ms linear infinite; }
.agent-response { margin: 8px 0 2px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px/1.65 var(--sans); }
.agent-response[data-speaker]:not([data-speaker=""])::before { content: attr(data-speaker); display: block; margin-bottom: 1px; color: var(--signal-text); font: 500 12px/1.5 var(--sans); white-space: normal; }
.agent-summary { margin: 0 0 10px; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); animation: agent-rise 180ms var(--agent-motion); }
.agent-summary[hidden] { display: none; }
.agent-summary-ask { margin: 0 0 6px; color: var(--ink-2); font: 400 13px/1.5 var(--sans); overflow-wrap: anywhere; }
.agent-summary-ask[hidden], .agent-summary-title[hidden] { display: none; }
.agent-summary-title { margin: 0 0 4px; color: var(--ink); font: 600 12.5px/1.5 var(--sans); letter-spacing: -.003em; }
.agent-summary-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.agent-summary-list li { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--ink); font: 400 13.5px/1.55 var(--sans); overflow-wrap: anywhere; }
.agent-summary-list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--agent-accent); transform: translateY(-2px); }
.agent-summary-scene { flex: none; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-summary-text { min-width: 0; }
.agent-form[data-phase="preview"] .agent-response { margin-top: 0; }
.agent-form[data-phase="answer"] .agent-response, .agent-form[data-phase="clarification"] .agent-response { margin: 0 0 6px; color: var(--ink); }
.agent-error { margin: 6px 0 2px; color: var(--oxide); font: 400 13px/1.55 var(--sans); overflow-wrap: anywhere; }
.agent-drawing-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: -4px 0 10px; padding: 0 0 9px; border-bottom: 1px solid var(--line); color: var(--ink-2); font: 500 13px/1.5 var(--sans); animation: agent-rise 180ms var(--agent-motion); }
.agent-drawing-save[hidden] { display: none; }
.agent-drawing-save::before { content: ""; width: 7px; height: 7px; flex: none; margin-right: 4px; border-radius: 50%; background: var(--agent-accent); }
.agent-drawing-save .agent-review-space { flex: 1; }
.agent-drawing-save .agent-accept, .agent-drawing-save .agent-cancel { min-width: 0; min-height: 32px; padding: 5px 15px; white-space: nowrap; }
#agent-drawing-save-text { flex: 1 1 14em; min-width: 0; }
.agent-review { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.agent-review[hidden], .agent-working-actions[hidden] { display: none; }
.agent-review-space { flex: 1; }
.agent-review .agent-quiet-button { min-height: 36px; color: var(--ink-2); }
.agent-review .agent-quiet-button[aria-pressed="true"] { color: var(--ink); background: var(--agent-hover); }
.agent-accept, .agent-cancel { min-width: 76px; min-height: 36px; padding: 7px 17px; border-radius: 10px; font: 500 13px/1.5 var(--sans); text-align: center; }
.agent-accept { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); }
.agent-accept:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.agent-accept:active:not(:disabled), .agent-cancel:active:not(:disabled) { transform: scale(.97); }
.agent-cancel { color: var(--ink-2); border: 1px solid transparent; background: none; }
.agent-cancel:hover:not(:disabled) { color: var(--ink); background: var(--agent-hover); }
.agent-working-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.agent-working-actions .agent-quiet-button { min-height: 28px; padding-block: 2px; }
.agent-reconnect { margin-top: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.agent-composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; min-height: 34px; margin-top: 3px; }
.agent-foot-start { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0 12px; min-width: 0; }
.agent-object-remove { color: var(--oxide); text-decoration-color: color-mix(in srgb, var(--oxide) 40%, transparent); }
.agent-object-remove:hover:not(:disabled) { color: var(--oxide); }
.agent-canvas-help { min-width: 0; margin: 0; overflow: hidden; color: var(--ink-3); font: 400 12.5px/1.5 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.agent-link-button { flex: none; min-height: 30px; padding: 4px 2px; border: 0; background: none; color: var(--ink-2); font: 500 12.5px/1.5 var(--sans); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.agent-link-button:hover { color: var(--ink); text-decoration-color: currentColor; }
.agent-progress { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font: 400 12.5px/1.5 var(--sans); }
#agent-progress-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-spinner { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--line-2); border-top-color: var(--ink-2); border-radius: 50%; animation: agent-spin 800ms linear infinite; }
.agent-secondary { position: relative; display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; margin-right: -6px; }
.agent-quiet-button, .agent-drawings > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 400 12.5px/1.5 var(--sans); text-decoration: none; cursor: pointer; }
.agent-quiet-button:hover:not(:disabled), .agent-drawings > summary:hover { color: var(--ink); background: var(--agent-hover); }
.agent-quiet-button svg { width: 15px; height: 15px; }
#agent-narration-toggle[aria-expanded="true"] { color: var(--ink); background: var(--agent-hover); }
.agent-drawings { position: static; }
.agent-drawings[hidden] { display: none; }
.agent-drawings > summary { list-style: none; }
.agent-drawings > summary::-webkit-details-marker { display: none; }
.agent-drawings > summary svg { width: 13px; height: 13px; transition: transform 160ms var(--agent-motion); }
.agent-drawings[open] > summary { color: var(--ink); background: var(--agent-hover); }
.agent-drawings[open] > summary svg { transform: rotate(180deg); }
.agent-drawing-list { position: absolute; z-index: 7; right: 0; bottom: calc(100% + 6px); width: min(300px, calc(100vw - 40px)); max-height: min(320px, 50vh); overflow: auto; padding: 5px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px var(--landing-shadow-deep); animation: agent-rise 140ms var(--agent-motion); }
.agent-drawing-list button { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 400 13px/1.45 var(--sans); text-align: start; overflow-wrap: anywhere; }
.agent-drawing-list button:hover { background: var(--agent-hover); color: var(--ink); }
.agent-drawing-list p { margin: 0; padding: 8px 11px; color: var(--ink-3); font: 400 12.5px/1.5 var(--sans); }
.agent-drawing-list .agent-scene-remove { color: var(--oxide); }
.agent-drawing-list .agent-scene-remove:hover:not(:disabled) { background: color-mix(in srgb, var(--oxide) 9%, transparent); color: var(--oxide); }
.agent-drawing-list button:disabled { opacity: .45; cursor: default; }
@keyframes agent-spin { to { transform: rotate(360deg); } }
@keyframes agent-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes agent-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes agent-tip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes agent-menu-in { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes agent-pick-in { from { opacity: 0; transform: translateY(5px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes agent-chip-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes agent-signal { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes agent-bezel { 0% { opacity: 0; transform: scale(.8); } 16% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes agent-roll-up { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes agent-roll-down { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes agent-pin-enter { from { opacity: 0; transform: translate(-50%, -50%) scale(.75); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (min-width: 1000px) and (max-height: 840px) {
.agent-ready .studio-footer { display: none; }
}
@media (min-width: 1000px) {
html[data-format="portrait"] .run.is-agent-workspace { max-width: none; }
html[data-format="portrait"] .agent-sheet { display: grid; width: fit-content; max-width: 100%; grid-template-columns: auto clamp(340px, 30vw, 420px); }
html[data-format="portrait"] .agent-player:not(.is-fullscreen) { width: min(calc((100dvh - 178px) * 9 / 16), 560px); }
html[data-format="portrait"] .agent-stage { border-radius: 15px 0 0 0; }
html[data-format="portrait"] .agent-player:not(.is-fullscreen) .agent-controls { border-radius: 0 0 0 15px; }
html[data-format="portrait"] .agent-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); }
html[data-format="portrait"] .agent-narration,
html[data-format="portrait"] .agent-narration[hidden] { display: block !important; flex: 1 1 0; max-height: none; min-height: 0; padding: 22px 24px; border-top: 0; font-size: 16.5px; }
html[data-format="portrait"] #agent-narration-toggle { display: none; }
html[data-format="portrait"] .agent-composer-area { border-radius: 0 0 15px 0; }
}
@media (max-width: 760px) {
body.agent-ready { --bar-h: 60px; --gutter: 14px; }
.run.is-agent-workspace { max-width: 100%; }
.agent-ready .bar { padding-inline: 16px; }
.agent-ready .wordmark-logo { width: 56px; }
.agent-ready .bar .agent-heading { gap: 10px; margin-left: 12px; padding-left: 12px; }
.agent-heading h1 { font-size: 14px; line-height: 18px; }
.agent-meta { font-size: 12px; }
.agent-doc-actions { gap: 6px; }
.agent-doc-button { width: 38px; height: 38px; padding: 0; }
.video-menu > summary.agent-doc-button { width: 38px; height: 38px; }
.agent-doc-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agent-sheet { margin-top: 6px; border-radius: 14px; }
.agent-stage { border-radius: 13px 13px 0 0; }
.agent-controls { padding-inline: 6px; }
.agent-seek { height: 26px; }
.agent-transport-row { height: 46px; }
.agent-transport-button { width: 40px; height: 44px; }
.agent-workspace .agent-motion { height: 44px; padding-inline: 6px; gap: 7px; }
.agent-narration { padding: 12px 16px 14px; font-size: 16px; }
.agent-composer-area { padding: 10px 10px 4px 12px; border-radius: 0 0 13px 13px; }
.agent-chip { max-width: 100%; }
#agent-prompt { flex-basis: calc(100% - 50px); min-height: 44px; padding-top: 10px; }
.agent-send { width: 40px; height: 40px; }
.agent-chip button { width: 32px; height: 28px; }
.agent-canvas-help, .agent-progress, .agent-link-button { font-size: 12px; }
.agent-quiet-button, .agent-drawings > summary { min-height: 40px; padding: 8px; font-size: 12px; }
.agent-drawing-save .agent-accept, .agent-drawing-save .agent-cancel { min-height: 38px; }
.agent-review { gap: 4px; }
.agent-accept, .agent-cancel { min-height: 44px; min-width: 72px; padding-inline: 15px; }
.agent-preview-label { top: 10px; left: 10px; padding: 4px 9px; font-size: 11px; }
.agent-ready .studio-footer { margin-top: 32px; }
}
@media (max-width: 380px) {
.agent-input-row:has(.agent-chip:not([hidden])) #agent-prompt:placeholder-shown { min-height: 68px; }
}
@container agent-band (max-width: 520px) {
.agent-picks { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 2px; }
}
@container agent-player (max-width: 376px) {
.agent-workspace .agent-motion { gap: 5px; padding-inline: 4px; }
.agent-motion-label { display: none; }
.agent-motion-icon { display: block; }
}
@container agent-player (max-width: 350px) {
.agent-transport-row:has(> .agent-motion:not([hidden])) .agent-duration { display: none; }
}
@container agent-player (max-width: 440px) {
.agent-skip, .agent-scene-name { display: none; }
.agent-scene-picker { margin-left: 2px; }
}
@container agent-player (max-width: 560px) {
.agent-scene-picker { position: static; }
.agent-scene-menu { left: 8px; right: 8px; width: auto; min-width: 0; max-width: none; }
}
@media (hover: none) {
#agent-send-hint { display: none; }
.agent-thumb { transform: scale(.78); }
.agent-volume-slider { display: none; }
.agent-transport-button:hover, .agent-workspace .agent-duration:hover, .agent-scene-chip:hover, .agent-motion:hover:not([aria-disabled="true"]) { color: var(--ink-2); background: none; }
.agent-workspace .agent-play:hover:not(:disabled) { background: var(--ink); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.agent-workspace *, .agent-workspace *::before, .agent-workspace *::after, .agent-stage *, .controls .agent-motion *, .agent-hint { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.agent-controls:is(.is-waiting, .is-loading) .agent-play::after { opacity: .7; }
.agent-composer-area.is-working::before { background: var(--agent-accent); opacity: .5; }
}
@media (pointer: coarse) {
.agent-controls.is-scrubbing .agent-tip { bottom: calc(100% + 22px); }
}
.agent-input-row.is-lettering > :not(.agent-lettering):not(.agent-object-bar) { display: none; }
.agent-lettering { display: flex; flex: 1 1 260px; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.agent-lettering[hidden] { display: none; }
.agent-lettering input { flex: 1 1 160px; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper, transparent); color: var(--ink); font: 400 16px/1.4 var(--sans); }
.agent-lettering input:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.agent-lettering-actions { display: flex; flex: none; gap: 8px; }
.agent-lettering-hint { flex-basis: 100%; order: 3; color: var(--ink-2); font: 500 12.5px/1.4 var(--sans); }
.agent-lettering-hint[hidden] { display: none; }
.agent-lettering-waiting { display: flex; flex: 1 0 100%; order: -1; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; color: var(--ink-2); font: 400 13px/1.45 var(--sans); }
.agent-lettering-waiting[hidden] { display: none; }
.agent-lettering-waiting > span:first-child { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
.agent-lettering input { flex-basis: 100%; }
.agent-lettering-actions { width: 100%; justify-content: flex-end; }
}
#agent-offer-script:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.agent-offer-line { flex: 1 0 100%; margin: 0; color: var(--ink-2); font: 400 13px/1.45 var(--sans); overflow-wrap: anywhere; }
.agent-offer-note { flex: 1 0 100%; margin: 0; color: var(--oxide); font: 400 13px/1.45 var(--sans); }
.agent-offer-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--ink); font: 500 13.5px/1.2 var(--sans); text-decoration: none; cursor: pointer; max-width: 100%; white-space: normal; text-align: center; }
.agent-offer-button:hover { border-color: color-mix(in srgb, var(--ink) 28%, var(--line-2)); }
.agent-offer-button.is-primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.agent-offer-button:disabled { opacity: .45; cursor: default; }
.agent-offer-input { flex: 1 1 220px; min-width: 0; min-height: 36px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper); color: var(--ink); font: 400 16px/1.3 var(--sans); }
.agent-offer-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.agent-drawing-list .agent-menu-link { display: block; padding: 9px 11px; border-radius: 8px; color: var(--ink-2); font: 400 13px/1.45 var(--sans); text-decoration: none; }
.agent-drawing-list .agent-menu-link:hover { background: var(--agent-hover); color: var(--ink); }
.agent-drawing-list .agent-menu-link[hidden] { display: none; }
@media (max-width: 380px) {
#agent-rename span { display: none; }
}
.agent-doc-actions { position: relative; }
.agent-voice-sheet { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(360px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 12px; background: var(--paper); color: inherit; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); text-align: left; }
.agent-voice-sheet[hidden] { display: none; }
.agent-voice-title { margin: 0; font-size: 1rem; font-weight: 600; }
.agent-voice-row { display: grid; gap: 6px; }
.agent-voice-row[hidden] { display: none; }
.agent-voice-label { font-size: .8125rem; opacity: .75; }
.agent-voice-segments { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-voice-segments button { flex: 1 1 auto; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .8125rem; cursor: pointer; }
.agent-voice-segments button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: transparent; }
.agent-voice-segments button:focus-visible, .agent-voice-word:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.agent-voice-name { font-size: .75rem; opacity: .65; }
.agent-voice-said { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.agent-voice-said li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; overflow-wrap: anywhere; }
.agent-voice-said button { min-width: 32px; min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.agent-voice-note { margin: 0; font-size: .75rem; opacity: .7; }
.agent-voice-actions { display: flex; justify-content: flex-end; gap: 8px; }
.agent-voice-words { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
.agent-voice-words[hidden], .agent-voice-say-form[hidden], .agent-voice-pause[hidden], .agent-voice-word[hidden] { display: none; }
.agent-voice-word { min-height: 28px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .75rem; white-space: nowrap; cursor: pointer; }
.agent-voice-word:disabled { opacity: .5; cursor: default; }
.agent-voice-say-form, .agent-voice-pause { display: inline-flex; align-items: center; gap: 4px; }
.agent-voice-say-form input { min-width: 0; width: 12em; max-width: 60vw; min-height: 28px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .8125rem; }
.agent-voice-pause-label { font-size: .75rem; opacity: .75; }
@media (max-width: 600px) {
.agent-voice-sheet { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; }
}

.page.is-run-view {
--bar-h: 64px;
--gutter: 32px;
--col-max: 1600px;
--view-accent: var(--signal);
--view-accent-hover: #f76342;
--on-view-accent: #171a19;
--reading-serif: var(--sans);
background: var(--paper);
color: var(--ink);
}
.is-run-view .bar { height: var(--bar-h); flex: none; border: 0; background: var(--paper); }
.is-run-view .bar-inner { max-width: var(--col-max); margin-inline: auto; }
.is-run-view .bar-links { gap: 38px; }
.is-run-view .bar-link { font: 400 18px/1.3 var(--sans); }
.is-run-view #link-new { order: 2; gap: 10px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--view-accent); border-radius: 8px; background: var(--view-accent); color: var(--on-view-accent); font-weight: 500; }
.is-run-view #link-new:hover { background: var(--view-accent-hover); }
.is-run-view #link-new svg { width: 22px; height: 22px; opacity: 1; }
.is-run-view #studio-preferences { display: none; }
.run { width: min(100%, var(--col-max)); max-width: none; padding-bottom: 24px; }
.run .title-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 20px; min-width: 0; padding: 0 0 22px; border-bottom: 1px solid var(--line); animation: none; }
.run .title-block > :not(.run-heading-row):not(.result-actions) { grid-column: 1 / -1; }
.run-heading-row { display: block; min-width: 0; }
.run .question.q-40, .run .question.q-28, .run .question.q-19 {
display: block;
margin: 0;
min-width: 0;
font: 800 30px/1.2 var(--sans);
letter-spacing: -.04em;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: unset;
overflow: hidden;
}
.result-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; }
.result-action, .run #download-final {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
gap: 8px;
min-height: 40px;
min-width: 108px;
margin: 0;
padding: 8px 16px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: transparent;
color: var(--ink);
font: 500 16px/22px var(--sans);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease,
transform var(--motion-press) var(--motion-ease), scale var(--motion-press) var(--motion-ease);
}
.result-action svg { flex: none; width: 20px; height: 20px; }
.run #download-final { min-width: 148px; font-size: 16px; }
.result-action-primary, .run #download-final { border-color: var(--view-accent); background: var(--view-accent); color: var(--on-view-accent); box-shadow: inset 0 1px 0 #ffffff0c; }
.run #download-final::before { content: none; }
.result-action:hover { border-color: var(--ink-3); background: var(--paper-2); }
.result-action-primary:hover, .run #download-final:hover { border-color: var(--view-accent-hover); background: var(--view-accent-hover); color: var(--on-view-accent); }
.result-action:active { transform: translateY(1px); }
.result-action:focus-visible, .copy-script:focus-visible, .copy-prompt:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 3px; }
.result-action.is-copied, .copy-script.is-copied, .copy-prompt.is-copied { color: var(--sage-strong); border-color: var(--sage-strong); }
.result-action-status { position: absolute; top: calc(100% + 4px); left: 0; right: 0; text-align: center; color: var(--ink-2); font: 400 11px/16px var(--sans); }
.run .running-row { flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; margin-top: 12px; padding-bottom: 0; box-shadow: none; }
.run[data-status="succeeded"] .running-row:not(.is-needed) { display: none; }
.run .running { flex: 0 1 auto; margin: 0; color: var(--ink-2); font: 400 13px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.run .new-question { display: none; }
.run .run-actions { flex-wrap: wrap; justify-content: center; gap: 8px; }
.run .run-actions .text-button { flex: none; height: auto; min-height: 38px; max-width: 100%; padding: 8px 12px; font: 450 12px/1.5 var(--sans); }
.run .failure { max-width: 720px; margin-inline: auto; }
.run .spread { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 12px; }
.watch-below { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; column-gap: 32px; margin-top: 16px; }
.watch-below > .title-block { grid-column: 1; grid-row: 1; }
.watch-details { grid-column: 1; grid-row: 2; min-width: 0; padding-top: 36px; }
.watch-library { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 36px; padding-left: 24px; border-left: 1px solid var(--line); }
.run .film, .run .script { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.run .film { position: relative; top: auto; padding: 0; min-width: 0; }
.player-shell { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.run .frame { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.run .controls {
position: relative;
z-index: 4;
width: 100%;
height: 50px;
min-height: 50px;
margin: 0;
padding: 7px 18px;
gap: 12px;
color: #fff;
background: linear-gradient(to bottom, #171a19d9, #111513f5);
transition: opacity 160ms;
}
.run .control { width: 32px; height: 34px; color: #fff; }
.run .control svg { width: 20px; height: 20px; }
.run .control.play svg { width: 24px; height: 24px; }
.run .control:hover { color: #fff; background: #ffffff12; border-radius: 4px; }
.run .control:focus-visible, .run .rail:focus-visible { outline-color: #fff; }
:where(.page.is-run-view) .run .time { color: #fff; font: 400 12.5px/1.5 var(--data); font-variant-numeric: tabular-nums; }
.run .time-now, .run .time-total, .run .time-sep { color: inherit; }
.run .rail { margin: 0 2px; }
.run .rail-track { height: 4px; background: #ffffff35; border-radius: 4px; overflow: hidden; }
.run .chapter { background: #ffffff35; }
.run .chapter.is-ready { background: #ffffff55; }
.run .chapter.is-failed { background: var(--oxide); }
.run .playhead { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid #21241b; box-shadow: 0 1px 3px #0004; }
.run .rail-tip { color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); box-shadow: none; }
.run .under-frame { min-height: 0; margin-top: 0; padding-top: 0; justify-content: flex-start; }
.run .under-frame:not(:has(> :not([hidden]))) { display: none; }
.run .under-frame .text-link { margin-top: 10px; font: 450 12px/1.5 var(--sans); }
.run .narration-warning { margin-top: 12px; }
.chapter-section:has(.chapter-nav[hidden]) { display: none; }
:where(.page.is-run-view) .chapter-section h2, :where(.page.is-run-view) .watch-library h2 { margin: 0; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.chapter-nav { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 14px; }
.chapter-link { display: flex; flex: 1 1 190px; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font: 450 13px/1.4 var(--sans); color: var(--ink); }
.chapter-link.is-current { background: color-mix(in srgb, var(--view-accent) 9%, var(--paper)); border-color: color-mix(in srgb, var(--view-accent) 22%, var(--line)); }
:where(.page.is-run-view) .chapter-link-dot { display: grid; place-items: center; flex: none; width: 25px; height: 28px; border-radius: 4px; background: var(--paper-2); color: var(--ink-2); font: 500 12px/1 var(--data); }
.chapter-link.is-current .chapter-link-dot { background: var(--view-accent); color: var(--on-view-accent); }
.chapter-link-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.page.is-run-view) .chapter-link-duration { min-width: 0; max-width: none; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 8px; font: 400 11.5px/1.4 var(--data); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chapter-link:disabled { color: var(--ink-3); }
.chapter-link:not(:disabled):hover { border-color: var(--line-2); }
.watch-library-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.watch-library-header .text-link { flex: none; font-size: 12px; }
.watch-video-list { list-style: none; margin: 0; padding: 0; }
.watch-video-list > li + li { margin-top: 18px; }
.watch-video { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; color: var(--ink); text-align: left; border-radius: 6px; }
.watch-video:hover .watch-video-title { text-decoration: underline; text-underline-offset: 3px; }
.watch-video:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 5px; }
.watch-video-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); color: var(--ink-3); }
.watch-video-preview::before { content: "▷"; font: 400 26px/1 var(--sans); }
.watch-video-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.watch-video-copy { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }
.watch-video-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink); font: 500 14px/1.35 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
:where(.page.is-run-view) .watch-video-meta { color: var(--ink-3); font: 400 12.5px/1.4 var(--sans); }
.watch-library-empty { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-3); }
.run .script { width: 100%; max-width: none; height: auto; min-height: 0; max-height: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; }
.run .script-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; margin: 0 0 22px; }
:where(.page.is-run-view) .run .script-header h2 { margin: 0; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.copy-script, .copy-prompt { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 7px; min-height: 33px; min-width: 130px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--ink); font: 400 13px/1.5 var(--sans); white-space: nowrap; }
.copy-script:hover, .copy-prompt:hover { background: var(--paper-2); border-color: var(--ink-3); }
.copy-script svg, .copy-prompt svg { flex: none; }
.run .script-scroll { position: static; inset: auto; flex: none; min-height: 0; max-height: none; height: auto; margin: 0; padding: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.run .script-list { margin: 0; padding: 0; }
.run .scene, .run .scene:last-child { margin: 0; padding: 36px 0; border-top: 1px solid var(--line); }
.run .scene:first-child { padding-top: 0; border-top: 0; }
.run .scene:last-child { padding-bottom: 0; }
.run .scene::before, .run .scene.is-current::before { background: none; box-shadow: none; }
.run .scene-heading { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 0; align-items: baseline; min-height: 30px; padding-left: 0; }
.run .scene-title { grid-column: 2; grid-row: 1; font: 600 22px/1.25 var(--sans); letter-spacing: -.025em; color: var(--ink); }
:where(.page.is-run-view) .run .scene-number, :where(.page.is-run-view) .run .scene.is-current .scene-number { grid-column: 1; grid-row: 1; position: static; display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--ink-3); font: 450 12px/1.5 var(--data); }
:where(.page.is-run-view) .run .scene-duration { grid-column: 3; grid-row: 1; display: block; margin: 0; color: var(--ink-3); font: 400 12px/1.5 var(--data); font-variant-numeric: tabular-nums; }
.run .scene-heading .status-word { grid-column: 2 / -1; grid-row: 2; justify-self: start; margin: 2px 0 0; }
.run[data-status="succeeded"] .scene-heading .status-word.is-ready:not(.is-update) { display: none; }
.run .scene-card, .run .scene-failure, .run .scene-chips { margin-left: 36px; }
.run .scene-card { margin-top: 14px; }
.run .scene-card > summary { min-height: 28px; padding: 2px 0; color: var(--ink-3); font: 450 12px/1.5 var(--sans); }
.run .scene-card.is-readonly > summary { display: none; }
.run .scene-card-body { padding: 0; }
:where(.page.is-run-view) .run .scene-beats { max-width: 70ch; font: 400 20px/1.6 var(--reading); font-optical-sizing: auto; }
:where(.page.is-run-view) .run .scene-card.is-readonly .beat { margin: 0; color: var(--ink); max-width: 70ch; font: 400 20px/1.6 var(--reading); font-optical-sizing: auto; letter-spacing: 0; text-wrap: pretty; hyphens: none; }
.run .scene-card.is-readonly .beat + .beat { margin-top: 14px; }
.run .scene-card.is-readonly .beat.is-two-host { display: flex; flex-direction: column; gap: 10px; }
.run .scene-card.is-readonly .beat-turn { display: block; padding-left: 3.7em; text-indent: -3.7em; }
:where(.page.is-run-view) .run .scene-card.is-readonly .beat-turn-host { display: inline-block; min-width: 3.2em; margin-right: .5em; color: var(--ink-3); font: 500 11px/1.7 var(--data); letter-spacing: .04em; text-transform: uppercase; }
.run .script.is-single-scene .scene-heading { display: none; }
.run .script.is-single-scene .scene-card { margin: 0; }
.run .script.is-playing .scene-card.is-readonly .beat { color: var(--ink); }
.run .script.is-playing .scene-card.is-readonly .beat.is-spoken { color: var(--ink); }
.run .script.is-tall .scene-card.is-readonly .beat { line-height: 1.75; }
:where(.page.is-run-view) .run .scene-beats:lang(hi),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(hi),
:where(.page.is-run-view) .run .scene-beats:lang(bn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bn),
:where(.page.is-run-view) .run .scene-beats:lang(bho),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bho),
:where(.page.is-run-view) .run .scene-beats:lang(gu),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(gu),
:where(.page.is-run-view) .run .scene-beats:lang(kn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(kn),
:where(.page.is-run-view) .run .scene-beats:lang(kok),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(kok),
:where(.page.is-run-view) .run .scene-beats:lang(mai),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mai),
:where(.page.is-run-view) .run .scene-beats:lang(ml),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ml),
:where(.page.is-run-view) .run .scene-beats:lang(mr),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mr),
:where(.page.is-run-view) .run .scene-beats:lang(ne),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ne),
:where(.page.is-run-view) .run .scene-beats:lang(or),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(or),
:where(.page.is-run-view) .run .scene-beats:lang(pa),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(pa),
:where(.page.is-run-view) .run .scene-beats:lang(sd),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(sd),
:where(.page.is-run-view) .run .scene-beats:lang(si),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(si),
:where(.page.is-run-view) .run .scene-beats:lang(ta),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ta),
:where(.page.is-run-view) .run .scene-beats:lang(te),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(te),
:where(.page.is-run-view) .run .scene-beats:lang(ur),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ur),
:where(.page.is-run-view) .run .scene-beats:lang(my),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(my),
:where(.page.is-run-view) .run .scene-beats:lang(zh-TW),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(zh-TW),
:where(.page.is-run-view) .run .scene-beats:lang(ja),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ja),
:where(.page.is-run-view) .run .scene-beats:lang(ko),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ko),
:where(.page.is-run-view) .run .scene-beats:lang(lo),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(lo),
:where(.page.is-run-view) .run .scene-beats:lang(zh),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(zh),
:where(.page.is-run-view) .run .scene-beats:lang(th),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(th),
:where(.page.is-run-view) .run .scene-beats:lang(ar-EG),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ar-EG),
:where(.page.is-run-view) .run .scene-beats:lang(ar),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ar),
:where(.page.is-run-view) .run .scene-beats:lang(ps),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ps),
:where(.page.is-run-view) .run .scene-beats:lang(fa),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(fa) { font: 400 18px/1.75 var(--sans); }
:where(.page.is-run-view) .run .scene-beats:lang(mn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mn),
:where(.page.is-run-view) .run .scene-beats:lang(be),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(be),
:where(.page.is-run-view) .run .scene-beats:lang(bg),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bg),
:where(.page.is-run-view) .run .scene-beats:lang(el),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(el),
:where(.page.is-run-view) .run .scene-beats:lang(mk),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mk),
:where(.page.is-run-view) .run .scene-beats:lang(ru),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ru),
:where(.page.is-run-view) .run .scene-beats:lang(sr),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(sr),
:where(.page.is-run-view) .run .scene-beats:lang(uk),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(uk),
:where(.page.is-run-view) .run .scene-beats:lang(am),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(am),
:where(.page.is-run-view) .run .scene-beats:lang(hy),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(hy),
:where(.page.is-run-view) .run .scene-beats:lang(ka),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ka),
:where(.page.is-run-view) .run .scene-beats:lang(he),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(he) { font: 400 18px/1.6 var(--sans); }
.run .script-footer { margin: 0; }
.run .script-footer:has(> :not([hidden])) { margin-bottom: 16px; }
.run .script-footer:not(:has(> :not([hidden]))) { display: none; }
.run .gutter-bar, .run .follow { display: none; }
.prompt-details { width: 100%; margin: 48px auto 0; border-top: 1px solid var(--line); }
.prompt-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.run .read-all { display: inline-flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 33px; padding: 0; color: var(--ink); font: 500 14px/1.5 var(--sans); }
.run .read-all svg { flex: none; transition: transform 140ms; }
.run .read-all[aria-expanded="true"] .prompt-marker { transform: rotate(90deg); }
.run .read-all[aria-expanded="true"] .prompt-chevron { transform: rotate(180deg); }
:where(.page.is-run-view) .prompt-toggle-label { margin-left: auto; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
.prompt-chevron { color: var(--ink-3); }
.run .read-all:hover { color: var(--sage-strong); }
.run-prompt { display: grid; gap: 14px; margin: 4px 0 14px; padding: 12px 16px; border-left: 2px solid var(--line-2); }
.run-prompt .copy-prompt { justify-self: end; }
.run-prompt p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font: 400 18px/1.6 var(--reading); font-optical-sizing: auto; }
.result-dialog { width: min(460px, calc(100vw - 40px)); box-sizing: border-box; margin: auto; padding: 24px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px #0002; }
.result-dialog::backdrop { background: #171a124d; backdrop-filter: none; }
.result-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.result-dialog h2 { margin: 0; font: 700 26px/1.2 var(--sans); letter-spacing: -.02em; }
.result-dialog .dialog-close { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 5px; }
.result-dialog .dialog-close:hover { background: var(--paper-2); }
.result-dialog p { margin: 14px 0 18px; color: var(--ink-2); font: 400 14px/1.5 var(--sans); }
.result-dialog label { display: block; margin-bottom: 6px; color: var(--ink-2); font: 500 12px/1.5 var(--sans); }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { min-width: 0; flex: 1; padding: 10px; border: 1px solid var(--line-2); border-radius: 6px; font: 400 13px/1.5 var(--sans); }
.share-link-row .result-action { min-width: 96px; min-height: 40px; padding: 9px 12px; font-size: 13px; }
.share-download { margin-top: 16px; min-height: 42px; font-size: 14px; }
.result-dialog .share-dialog-status { margin-bottom: 0; }
.result-dialog .share-dialog-status:empty { display: none; }
#script-copy-text { display: block; width: 100%; height: 260px; resize: vertical; padding: 12px; border: 1px solid var(--line-2); border-radius: 6px; font: 400 16px/1.5 var(--sans); }
.result-dialog footer { display: flex; justify-content: flex-end; margin-top: 16px; }
:root[data-format="portrait"] .run .player-shell { width: min(100%, calc(var(--portrait-frame-h) * 9 / 16)); margin-inline: auto; }
:root[data-format="portrait"] .run .frame { width: 100%; }
:root[data-format="portrait"] .run .controls { width: 100%; margin: 0; }
:root[data-format="portrait"] .run .under-frame { width: auto; }
:root[data-format="portrait"] .run .controls { gap: 7px; padding-inline: 10px; }
:root[data-format="portrait"] .run .time { font-size: 11px; }
:root[data-format="portrait"] .run .control { width: 28px; }
.run .film:fullscreen .player-shell { display: flex; flex-direction: column; width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--paper-seen, var(--film-paper)); }
.run .film:fullscreen .frame { position: relative; inset: auto; flex: 1 1 0; width: 100%; height: auto; min-height: 0; margin-inline: 0; aspect-ratio: auto; border-radius: 0; --film: var(--paper-seen, var(--film-paper)); }
.run .film:fullscreen .controls { position: relative; flex: none; }
.run[data-look="board"] .film:fullscreen .player-shell { background: var(--paper-seen, var(--board-paper)); }
.run[data-look="board"] .film:fullscreen .frame { --film: var(--paper-seen, var(--board-paper)); }
.is-run-view .studio-footer { width: min(100%, 1600px); margin: 24px auto 0; padding: 18px var(--gutter); gap: 20px; border-top: 0; font-size: 11px; }
.is-run-view .footer-themes { gap: 14px; padding-right: 20px; }
.is-run-view .footer-themes svg { width: 16px; height: 16px; }
@media (max-width: 1050px) {
.watch-below { grid-template-columns: minmax(0, 1fr); }
.watch-library { grid-column: 1; grid-row: 3; margin-top: 36px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.watch-video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.watch-video-list > li + li { margin: 0; }
}
@media (max-width: 600px) {
.watch-video-list { grid-template-columns: minmax(0, 1fr); }
.watch-video { grid-template-columns: 140px minmax(0, 1fr); }
.watch-below { margin-top: 16px; }
.page.is-run-view { --bar-h: 64px; --gutter: 20px; }
.is-run-view .bar-links { gap: 8px; }
.is-run-view .bar-link:not(#link-new) { width: 44px; min-height: 44px; padding: 0; }
.is-run-view .bar-link { font-size: 13px; }
.is-run-view .bar-link:not(#link-new) > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-run-view #link-new > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
.is-run-view #link-new { min-height: 38px; padding: 8px 12px; gap: 7px; }
.is-run-view #link-new svg { width: 18px; height: 18px; }
.run .title-block { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.run .question.q-40, .run .question.q-28, .run .question.q-19 { white-space: normal; overflow-wrap: anywhere; }
.result-actions { gap: 10px; justify-content: flex-start; margin: 0; }
.result-action, .run #download-final { min-height: 42px; min-width: 0; gap: 7px; padding: 9px 11px; font-size: 13px; }
.run #download-final { min-width: 124px; font-size: 13px; }
#share-video { min-width: 94px; }
.result-action svg { width: 18px; height: 18px; }
.run .spread { margin-top: 8px; }
.run .controls { gap: 7px; height: 44px; min-height: 44px; padding: 5px 10px; }
.run .control { width: 28px; min-width: 28px; height: 32px; padding: 0; }
.run .control svg { width: 18px; height: 18px; }
.chapter-nav, .run .script, .prompt-details { width: 100%; }
.chapter-link { flex-basis: 160px; }
.chapter-link { min-height: 42px; }
.chapter-link-dot { width: 24px; height: 26px; }
.watch-details { padding-top: 28px; }
.run .script { margin-top: 44px; }
.run .script-header { gap: 12px; margin-bottom: 18px; }
.copy-script, .copy-prompt { min-width: 118px; min-height: 32px; padding: 5px 9px; font-size: 12px; }
.run .scene, .run .scene:last-child { padding: 28px 0; }
.run .scene:first-child { padding-top: 0; }
.run .scene:last-child { padding-bottom: 0; }
.run .scene-heading { grid-template-columns: 28px minmax(0, 1fr) auto; }
.run .scene-title { font-size: 20px; }
.run .scene-card, .run .scene-failure, .run .scene-chips { margin-left: 0; }
.run .scene-card { margin-top: 12px; }
:where(.page.is-run-view) .run .scene-beats, .run .scene-card.is-readonly .beat { font-size: 18px; }
.prompt-details { margin-top: 36px; }
.run-prompt { padding: 10px 12px; }
.run-prompt p { font-size: 17px; }
.is-run-view .studio-footer { gap: 14px; margin-top: 8px; }
}
@media (max-width: 370px) {
.page.is-run-view { --gutter: 16px; }
.result-actions { gap: 7px; }
.run #download-final { min-width: 103px; }
#share-video { min-width: 77px; }
.result-action, .run #download-final { gap: 5px; padding-inline: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.result-action, .run #download-final, .run .controls, .run .read-all svg, .caption-strip { transition: none; }
}
.run[data-look="board"] .frame { --film: #1e2429; }
.run[data-look="board"] .frame-progress { color: #f3f1ea; }
.run[data-look="board"] .frame-progress::after { background: #f3f1ea; }
.page.is-run-view {
--col-max: 1280px; --transport-h: 54px;
--gutter: max(clamp(22px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
--edge: var(--frame-edge);
--signal-hover: #f76342;
--run-ease: cubic-bezier(.16, 1, .3, 1);
--sh-rest: 0 1px 1px var(--landing-shadow-soft), 0 12px 32px -14px var(--landing-shadow-deep);
--sh-lift: 0 2px 3px var(--landing-shadow-soft), 0 28px 56px -18px var(--landing-shadow-deep);
}
:root:not([data-format="portrait"]) .page.is-run-view { --col-max: clamp(640px, calc((100svh - 242px) * 16 / 9), 1280px); }
@keyframes run-draw-y { from { transform: scaleY(0); } }
@keyframes run-shimmer { to { background-position: 200% 0; } }
@keyframes run-nib-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes run-pulse { 50% { opacity: .35; } }
.is-run-view .bar { height: 68px; background: var(--landing-bar-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.is-run-view .bar-links { gap: 4px; align-items: center; }
.is-run-view .bar-link {
display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 0; padding: 0 12px;
border: 0; border-radius: 999px; background: none; color: var(--ink-2);
font: 500 14px/1 var(--sans); letter-spacing: -.004em;
transition: color 160ms ease, background-color 160ms ease;
}
.is-run-view .bar-link:hover { color: var(--ink); background: var(--paper-2); }
.is-run-view .bar-link svg { width: 16px; height: 16px; opacity: .85; }
.is-run-view #link-new {
order: 1; flex-direction: row-reverse; gap: 12px; height: 40px; margin-left: 6px;
padding: 0 6px 0 18px; border: 0; background: var(--ink); color: var(--paper); font-weight: 600;
box-shadow: 0 1px 2px var(--landing-shadow-deep), 0 10px 22px -12px var(--landing-shadow-deep), inset 0 1px 0 #ffffff1f;
transition: background-color 200ms ease, transform 200ms var(--run-ease);
}
.is-run-view #link-new:hover { background: #242a28; color: var(--paper); transform: translateY(-1px); }
.is-run-view #link-new svg {
box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%;
background: var(--signal); color: #171a19; opacity: 1;
transition: background-color 160ms ease, translate 220ms var(--run-ease);
}
.is-run-view #link-new:hover svg { background: var(--signal-hover); translate: 2px 0; }
.is-run-view #studio-preferences {
order: 2; position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 14px;
border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2);
color: var(--ink); font: 600 13px/1 var(--sans);
transition: box-shadow 160ms ease, background-color 160ms ease;
}
.is-run-view #studio-preferences::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.is-run-view #studio-preferences:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
.run .spread { margin-top: 18px; }
.player-shell {
position: relative; z-index: 1; overflow: visible;
border: 1px solid var(--edge); border-radius: 10px; background: var(--paper);
box-shadow: var(--sh-rest);
animation: land 1.1s .1s var(--run-ease) both;
}
.player-shell::before {
content: ""; position: absolute; inset: 8px -5px -7px 6px; z-index: -1;
border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); rotate: .6deg;
box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 22px 40px -22px var(--landing-shadow-deep);
}
.page.is-run-view .frame { --film: var(--paper); border-radius: 9px 9px 0 0; box-shadow: none; }
.page.is-run-view .frame { --transport-h: 0px; }
.run .film:fullscreen .player-shell { animation: none; }
.run .film:fullscreen .player-shell::before { content: none; }
.run .frame:has(> .status-layer.is-visible)::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
background-size: 48px 48px; background-position: center;
-webkit-mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.run .status-layer { gap: 0; color: var(--ink); }
.run .stage-rail {
position: static; display: flex; align-items: center; width: auto; margin: 0 0 24px;
transform: none;
}
.run .stage-rail > li {
position: relative; display: flex; align-items: center; gap: 10px;
color: var(--ink-4); font: 500 13.5px/1.5 var(--sans); letter-spacing: -.008em;
}
.run .stage-rail > li::before { content: none; }
.run .stage-rail > li + li::before {
content: ""; position: static; inset: auto; width: 56px; height: 1px; margin: 0 16px;
background: var(--line-2);
}
.run .stage-rail > li.is-done + li::before { background: var(--ink-3); }
.run .stage-dot { width: 8px; height: 8px; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.run .stage-rail > li .stage-name { font: inherit; color: inherit; }
.run .stage-rail > li.is-done { color: var(--ink-3); }
.run .stage-rail > li.is-done .stage-dot { background: var(--ink-3); box-shadow: none; }
.run .stage-rail > li.is-active { color: var(--ink); }
.run .stage-rail > li.is-active .stage-dot { background: var(--signal); box-shadow: none; animation: ping 1.4s ease-out infinite; }
.run .frame-title {
max-width: 34ch; font-family: var(--sans); font-weight: 600;
font-size: clamp(17px, 2.6cqi, 20px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink);
}
.run .frame-line {
max-width: 34ch; margin-top: 4px; font: 400 clamp(15px, 2.2cqi, 18px)/1.5 var(--sans);
color: var(--ink-2);
}
.run .frame-count {
position: static; margin-top: 18px; letter-spacing: -.005em;
font: 500 13.5px/1.5 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.run .frame-progress {
position: absolute; left: 0; right: 0; bottom: var(--transport-h); z-index: 2;
width: auto; height: 3px; margin: 0; color: var(--signal);
}
.run .frame-progress span {
inset: 0 auto 0 0; width: var(--p, 0%); height: auto; background: var(--signal);
animation: none; transition: width 600ms var(--run-ease);
}
.run .frame-progress::after {
content: ""; position: absolute; left: var(--p, 0%); bottom: 0; z-index: 3;
width: 34px; height: 34px; margin: 0 0 -4px -2px; border-radius: 0; background: var(--ink);
opacity: 1; transition: left 600ms var(--run-ease);
-webkit-mask: var(--run-nib) center / contain no-repeat;
mask: var(--run-nib) center / contain no-repeat;
animation: run-nib-in 520ms .2s var(--run-ease) both;
}
.page.is-run-view {
--run-nib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
}
@keyframes sb-card-in { from { opacity: 0; translate: 0 -14px; rotate: -1.4deg; scale: 1.03; } 45% { opacity: 1; } }
@keyframes sb-card-lay { from { box-shadow: 0 0 0 1px var(--film-line), 0 26px 34px -22px var(--landing-shadow-deep); } }
@keyframes sb-num-in { from { clip-path: inset(-30% 100% -30% 0); } }
@keyframes sb-fade-in { from { opacity: 0; } }
@keyframes sb-play-in { 0% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes sb-zoom-lift {
0% { box-shadow: 0 0 0 1px var(--film-line), 0 10px 22px -16px var(--landing-shadow-deep); }
40% { box-shadow: 0 0 0 1px var(--film-line), 0 44px 70px -36px var(--landing-shadow-deep); }
100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
@keyframes sb-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 40%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal) 0%, transparent); } }
@keyframes sb-dot { 30% { opacity: 1; } 60% { opacity: .2; } }
@keyframes sb-hatch { to { background-position: -11.3px 0; } }
.run .status-layer.has-sheet > :not(.storyboard) { display: none; }
.run .frame:has(> .status-layer.is-visible > .storyboard:not([hidden]))::before { content: none; }
.run .frame:has(> .status-layer.is-visible > .storyboard:not([hidden])) .buffering { display: none; }
.run .frame.is-handing .layer { transition: none; }
.storyboard { position: absolute; inset: 0; container-type: size; color: var(--ink); text-align: start; --band: 15.56%; }
.storyboard[hidden] { display: none; }
.sb-letter {
position: absolute; inset: 0 0 var(--transport-h); display: grid; place-content: center; justify-items: center;
gap: clamp(10px, 2.2cqi, 22px); padding: 0 8%;
transition: opacity 450ms ease, translate 600ms var(--run-ease);
}
.storyboard:not([data-view="letter"]) .sb-letter {
opacity: 0; translate: 0 -4%; visibility: hidden;
transition: opacity 450ms ease, translate 600ms var(--run-ease), visibility 0s 600ms;
}
.sb-question {
display: grid; justify-items: center; gap: .1em; margin: 0; text-align: center; color: var(--ink);
font: 700 clamp(18px, 3.3cqi, 40px)/1.28 var(--hand);
font-variant-ligatures: none;
--slant: .16em; --wet-len: 2.6em;
--wet-ink: color-mix(in srgb, var(--ink) 78%, #2f5bd3);
}
.sb-question[data-size="m"] { font-size: clamp(16px, 2.75cqi, 34px); }
.sb-question[data-size="s"] { font-size: clamp(15px, 2.25cqi, 28px); }
.sb-row { position: relative; display: grid; justify-items: center; }
.sb-row > * { grid-area: 1 / 1; }
.sb-line, .sb-wet { white-space: nowrap; }
.sb-wet { visibility: hidden; color: var(--wet-ink); -webkit-text-stroke: .018em var(--wet-ink); pointer-events: none; }
.storyboard.is-lettering :is(.sb-line, .sb-wet) {
clip-path: polygon(-40% -50%, var(--front) -50%, calc(var(--front) - 2 * var(--slant)) 150%, -40% 150%);
}
.storyboard.is-lettering .sb-question[dir="rtl"] :is(.sb-line, .sb-wet) {
clip-path: polygon(140% -50%, var(--front) -50%, calc(var(--front) + 2 * var(--slant)) 150%, 140% 150%);
}
.storyboard.is-lettering .sb-wet {
visibility: visible; opacity: var(--wet, 0);
-webkit-mask-image: linear-gradient(90deg, transparent calc(var(--wet-at) - var(--wet-len)), #000 var(--wet-at));
mask-image: linear-gradient(90deg, transparent calc(var(--wet-at) - var(--wet-len)), #000 var(--wet-at));
}
.storyboard.is-lettering .sb-question[dir="rtl"] .sb-wet {
-webkit-mask-image: linear-gradient(90deg, #000 var(--wet-at), transparent calc(var(--wet-at) + var(--wet-len)));
mask-image: linear-gradient(90deg, #000 var(--wet-at), transparent calc(var(--wet-at) + var(--wet-len)));
}
.sb-rule {
position: absolute; left: -3%; top: var(--base, 80%); width: 106%; height: 4px; translate: 0 -30%;
overflow: visible; pointer-events: none; opacity: 0;
}
.sb-rule path {
fill: none; stroke: var(--ink-4); stroke-width: 1.1; stroke-linecap: round;
stroke-dasharray: 1 1; stroke-dashoffset: 1;
}
.sb-question[dir="rtl"] .sb-rule { scale: -1 1; }
.storyboard.is-ruling .sb-rule { opacity: .75; transition: opacity 160ms ease calc(var(--r, 0) * 90ms); }
.storyboard.is-ruling .sb-rule path { stroke-dashoffset: 0; transition: stroke-dashoffset 380ms cubic-bezier(.3, .6, .3, 1) calc(var(--r, 0) * 90ms); }
.storyboard.is-dry .sb-rule { opacity: 0; transition: opacity 600ms ease; }
.storyboard.is-dry .sb-rule path { stroke-dashoffset: 0; }
.sb-type {
white-space: nowrap; visibility: hidden; color: var(--ink-4);
font: 400 calc(var(--type-k, 1) * 1em)/calc(1.28 / var(--type-k, 1)) var(--sans); letter-spacing: -.012em;
}
.storyboard.is-typed .sb-type { visibility: visible; }
.sb-word {
display: inline-block; transform-origin: 50% 82%;
transition: transform 300ms cubic-bezier(.3, .7, .4, 1) calc(var(--w, 0) * 14ms), opacity 200ms ease calc(var(--w, 0) * 14ms);
}
.storyboard.is-lying .sb-word {
transform: scaleY(.04); opacity: 0;
transition: transform 220ms cubic-bezier(.4, 0, .2, 1) calc(var(--w, 0) * 12ms), opacity 150ms ease calc(var(--w, 0) * 12ms + 70ms);
}
.storyboard.is-lettering .sb-note { transition: none; }
.sb-note { margin: 0; color: var(--ink-3); font: 500 clamp(12px, 1.35cqi, 15px)/1.3 var(--sans); opacity: 0; transition: opacity 400ms ease; }
.storyboard:not(.is-lettering) .sb-note { opacity: 1; }
.sb-dots i { font-style: normal; opacity: .2; animation: sb-dot 1.4s infinite; }
.sb-dots i:nth-child(2) { animation-delay: .2s; }
.sb-dots i:nth-child(3) { animation-delay: .4s; }
.sb-note.is-thinking { color: var(--ink-3); font-size: clamp(13px, 1.5cqi, 16.5px); letter-spacing: -.006em; }
.sb-note.is-thinking .sb-note-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sb-think { display: inline-flex; align-items: baseline; white-space: pre; color: var(--ink-2); --think-lit: var(--ink); }
.sb-think[hidden] { display: none; }
.sb-think-by { color: var(--ink-3); }
.sb-think-mark { position: relative; align-self: center; flex: none; width: 1.3em; height: 1.3em; margin-right: .5em; color: var(--ink-3); }
.sb-think-mark svg {
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sb-think-mark path { stroke-dasharray: 1 2; animation: sb-mark-draw 640ms 120ms cubic-bezier(.45, 0, .25, 1) backwards; }
.sb-think-mark svg.is-was { animation: sb-mark-out 200ms ease forwards; }
.sb-think-mark .is-set path { animation: none; }
.sb-think-word { position: relative; display: inline-block; }
.sb-think-now, .sb-think-was { display: inline-block; }
.sb-think-was { position: absolute; left: 0; top: 0; }
.sb-think-fit { position: absolute; left: 0; top: 0; visibility: hidden; }
.sb-think-word i { display: inline-block; font-style: normal; }
.sb-think-now i {
animation: sb-think-in 440ms calc(var(--i) * var(--step, 22ms) + 90ms) cubic-bezier(.2, .8, .2, 1) backwards,
sb-think-lit 1900ms calc(var(--i) * 58ms + 780ms) linear infinite;
}
.sb-think-now.is-set i { animation-name: none, sb-think-lit; }
.sb-think-was i { animation: sb-think-out 220ms calc(var(--i) * 9ms) cubic-bezier(.5, 0, .9, .5) forwards; }
.sb-ghost .sb-think { color: inherit; --think-lit: var(--ink-2); }
@keyframes sb-think-in { from { opacity: 0; transform: translateY(.6em); filter: blur(3px); } }
@keyframes sb-think-out { to { opacity: 0; transform: translateY(-.5em); filter: blur(3px); } }
@keyframes sb-think-lit { 6% { color: var(--think-lit); } 0%, 17%, 100% { color: inherit; } }
@keyframes sb-mark-draw { from { stroke-dashoffset: 1.01; } }
@keyframes sb-mark-out { to { opacity: 0; scale: .86; } }
.sb-brush {
position: absolute; left: 0; top: 0; z-index: 2; width: clamp(64px, 9cqi, 116px); aspect-ratio: 150 / 24;
opacity: 0; pointer-events: none;
}
.sb-brush svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 50%; will-change: transform; }
.sb-brush-shadow { filter: blur(2px); }
.sb-brush-shadow path { fill: var(--landing-shadow-deep); }
.sb-brush .brush-handle { fill: var(--ink); }
.sb-brush .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
.sb-brush .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
.sb-brush .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
.sb-brush .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
.sb-brush .brush-hairs { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: .5; }
.sb-brush .brush-paint { fill: var(--ink); }
.sb-head {
position: absolute; left: 5%; right: 5%; top: clamp(14px, 4.4cqi, 32px); display: flex; justify-content: space-between;
align-items: baseline; gap: 16px; margin: 0; opacity: 0; transition: opacity 500ms ease;
}
.storyboard[data-view="cards"] .sb-head { opacity: 1; }
.sb-title {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 50% 50%;
color: var(--ink); font: 700 clamp(15px, 1.95cqi, 23px)/1.3 var(--hand); font-variant-ligatures: none;
}
.sb-count { flex: none; color: var(--ink-3); font: 500 clamp(11px, 1.25cqi, 14px)/1.2 var(--data); font-variant-numeric: tabular-nums; }
.sb-cards {
position: absolute; left: 5%; right: 5%; top: calc(clamp(14px, 4.4cqi, 32px) + 44px); bottom: calc(var(--transport-h) + 16px);
display: grid; grid-template-columns: repeat(var(--cols, 3), var(--tile, minmax(0, 1fr))); gap: var(--gap, 16px);
justify-content: center; align-content: center; margin: 0; padding: 0; list-style: none;
}
.storyboard:not([data-view="cards"]) .sb-cards { display: none; }
.sb-card { min-width: 0; transform-origin: 0 0; animation: sb-card-in 560ms calc(var(--i, 0) * 90ms + var(--lead, 0ms)) cubic-bezier(.2, .8, .2, 1) backwards; }
.sb-card:not(.sb-ghost) > .sb-tile { animation: sb-card-lay 640ms calc(var(--i, 0) * 90ms + var(--lead, 0ms)) cubic-bezier(.2, .8, .2, 1) backwards; }
.storyboard.is-rising .sb-letter { opacity: 1; translate: none; visibility: visible; transition: none; }
.storyboard.is-rising .sb-note { opacity: 0; transition: opacity 180ms ease; }
.storyboard.is-rising .sb-head { transition: none; }
.storyboard.is-rising .sb-title { opacity: 0; }
.storyboard.is-rising .sb-count { animation: sb-fade-in 420ms 320ms both; }
.storyboard.is-risen:not([data-view="letter"]) .sb-letter { transition: none; }
.sb-tile {
position: relative; aspect-ratio: var(--aspect, 1.7778); overflow: hidden; container-type: inline-size;
border-radius: 6px; background: var(--film-paper); color: var(--film-ink);
--mark-ink: var(--film-ink); --mark-paper: var(--film-paper);
box-shadow: 0 0 0 1px var(--film-line), 0 10px 22px -16px var(--landing-shadow-deep);
transition: box-shadow 400ms ease, translate 520ms cubic-bezier(.3, 1.5, .5, 1);
}
.storyboard.is-board .sb-tile { background: var(--board-paper); color: var(--board-ink); --mark-ink: var(--board-ink); --mark-paper: var(--board-paper); }
.sb-card[data-state="ready"] .sb-tile { translate: 0 -3px; box-shadow: 0 0 0 1.5px var(--ink), 0 18px 30px -18px var(--landing-shadow-deep); }
.sb-heading {
position: absolute; left: 50%; top: calc(var(--band) / 2); max-width: 92%; overflow: hidden; translate: -50% -50%;
font: 700 calc(4.45cqi * var(--fit, 1))/1.2 var(--hand); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.sb-mark { position: absolute; pointer-events: none; }
.sb-sketch, .sb-voice { left: 12%; top: 25%; width: 76%; height: 64%; overflow: visible; opacity: 0; transition: opacity 360ms ease; }
:is(.sb-card, .sb-stage)[data-state="drawing"] .sb-sketch,
:is(.sb-card, .sb-stage)[data-state="drawn"] .sb-voice { opacity: 1; }
.sb-lines { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.sb-lines path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.sb-pencil, .sb-pencil-shadow { opacity: 0; }
.sb-pencil-shadow path { fill: var(--landing-shadow-deep); fill-opacity: .45; }
.sb-pencil .pencil-body, .sb-pencil .pencil-lead { fill: var(--mark-ink); }
.sb-pencil .pencil-facet { fill: none; stroke: var(--mark-paper); stroke-opacity: .28; stroke-width: .5; }
.sb-pencil .pencil-wood { fill: color-mix(in srgb, var(--mark-paper) 55%, #c89b62); stroke: var(--mark-ink); stroke-width: .35; stroke-linejoin: round; }
.sb-pencil .pencil-ferrule { fill: color-mix(in srgb, var(--mark-paper) 45%, var(--film-ink-2)); }
.sb-pencil .pencil-rib { fill: none; stroke: var(--mark-ink); stroke-opacity: .35; stroke-width: .35; }
.sb-pencil .pencil-eraser { fill: color-mix(in srgb, var(--mark-paper) 40%, #e0837a); }
.sb-pencil .pencil-chalk { display: none; fill: var(--mark-ink); }
.storyboard.is-board .sb-pencil > :not(.pencil-chalk) { display: none; }
.storyboard.is-board .sb-pencil .pencil-chalk { display: inline; }
.storyboard.is-board .sb-pencil-shadow { display: none; }
.sb-bars { fill: none; stroke: currentColor; stroke-opacity: .16; stroke-linecap: round; }
.sb-inked { fill: none; stroke: currentColor; stroke-opacity: .8; stroke-linecap: round; }
.sb-cues { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-linecap: round; }
.sb-inked path, .sb-cues path, .sb-nib { opacity: 0; }
.sb-nib .nib-body { fill: var(--mark-ink); }
.sb-nib .nib-slit { fill: none; stroke: var(--mark-paper); stroke-width: .5; stroke-linecap: round; }
.sb-nib .nib-hole { fill: var(--mark-paper); }
.sb-play {
left: 50%; top: 57%; display: grid; place-items: center; width: 15%; aspect-ratio: 1; translate: -50% -50%;
border-radius: 50%; background: currentColor; opacity: 0; scale: .8; transition: opacity 300ms ease, scale 400ms var(--run-ease);
}
.sb-play svg { width: 46%; fill: var(--film-paper); }
.storyboard.is-board .sb-play svg { fill: var(--board-paper); }
:is(.sb-card, .sb-stage)[data-state="ready"] .sb-play { opacity: 1; scale: 1; animation: sb-play-in 520ms cubic-bezier(.3, .7, .3, 1) 80ms backwards; }
.sb-meta {
display: flex; align-items: center; gap: 9px; min-height: 1.7em; margin: 10px 1px 0;
color: var(--ink-2); font: 500 clamp(11px, 1.2cqi, 13.5px)/1.25 var(--sans);
}
.sb-numeral {
position: relative; flex: none; display: grid; place-items: center; min-width: 2.1em; height: 1.7em;
color: var(--ink-4); font: 650 clamp(12.5px, 1.35cqi, 15px)/1 var(--sans); font-variant-numeric: tabular-nums;
transition: color 400ms ease;
}
.sb-num { display: block; animation: sb-num-in 360ms calc(var(--i, 0) * 90ms + var(--lead, 0ms) + 200ms) ease-out backwards; }
:is([data-state="drawing"], [data-state="drawn"]) .sb-numeral { color: var(--ink-2); }
[data-state="ready"] .sb-numeral { color: var(--ink); }
.sb-ring { position: absolute; left: 50%; top: 50%; width: 2.35em; height: 1.95em; translate: -50% -50%; overflow: visible; pointer-events: none; }
.sb-ring path {
fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.01;
transition: stroke-dashoffset 560ms cubic-bezier(.4, 0, .2, 1) 140ms;
}
[data-state="ready"] .sb-ring path { stroke-dashoffset: 0; }
.sb-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: sb-ping 1.6s ease-out infinite; }
[data-state="queued"] .sb-dot { background: var(--line-2); animation: none; }
[data-state="drawn"] .sb-dot { background: var(--ink-3); animation: none; }
[data-state="ready"] .sb-dot { width: 8px; height: 9px; border-radius: 0; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: none; }
.sb-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-len { margin-left: auto; color: var(--ink-4); font: 500 clamp(10px, 1.1cqi, 12.5px)/1 var(--data); font-variant-numeric: tabular-nums; }
.sb-ghost { animation: sb-fade-in 500ms 200ms backwards; }
.storyboard .sb-ghost .sb-tile { background: none; box-shadow: none; border: 1.5px dashed var(--line-2); }
.sb-ghost .sb-meta { color: var(--ink-4); }
.sb-stage { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s 500ms; }
.storyboard[data-view="stage"] .sb-stage { opacity: 1; visibility: visible; transition: opacity 500ms ease; }
.sb-stage .sb-tile {
position: absolute; inset: 0; width: min(100cqw, 100cqh * var(--aspect, 1.7778)); height: auto; margin: auto;
border-radius: 0; box-shadow: none;
}
.sb-stage .sb-tile { --floor: calc(var(--transport-h) + 50px); }
.sb-stage .sb-play { top: calc((var(--band) + 100% - var(--floor)) / 2); }
.sb-stage :is(.sb-sketch, .sb-voice) { top: calc(var(--band) + 4%); height: calc(100% - var(--band) - var(--floor) - 8%); }
.sb-caption {
position: absolute; left: 4%; bottom: calc(var(--transport-h) + 14px); display: inline-flex; align-items: center; gap: 8px;
max-width: 92%; margin: 0; padding: 6px 12px 6px 10px; border-radius: 999px;
background: color-mix(in srgb, var(--film-paper) 92%, transparent); color: var(--film-ink-2);
box-shadow: 0 0 0 1px var(--frame-edge), 0 6px 16px -10px var(--landing-shadow-deep);
font: 500 12.5px/1.2 var(--sans); white-space: nowrap;
}
.sb-caption b { color: var(--film-ink); font-weight: 650; }
.sb-caption-line { overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 480px) {
.sb-caption-more { display: none; }
.storyboard[data-mode="late"] .sb-mark { display: none; }
}
.sb-caption-line::before { content: "\00b7\00a0"; }
.sb-stage[data-state="queued"] .sb-caption .sb-dot { background: var(--film-line); animation: none; }
.sb-stage:is([data-state="drawn"], [data-state="ready"]) .sb-caption .sb-dot { background: var(--film-ink-2); animation: none; }
.storyboard[data-mode="late"] .sb-tile { --floor: calc(var(--transport-h) + 5% + 64px); }
.storyboard[data-mode="late"] .sb-caption {
left: 4%; right: 4%; bottom: calc(var(--transport-h) + 5%); flex-direction: column; gap: 6px; padding: 0;
background: none; box-shadow: none; text-align: center; white-space: normal;
}
.storyboard[data-mode="late"] .sb-caption .sb-dot { display: none; }
.storyboard[data-mode="late"] .sb-caption b { font: 650 clamp(15px, 2cqi, 22px)/1.2 var(--sans); letter-spacing: -.01em; }
.storyboard[data-mode="late"] .sb-caption-line { font: 500 clamp(12px, 1.4cqi, 15px)/1.3 var(--sans); }
.storyboard[data-mode="late"] .sb-caption-line::before { content: none; }
.storyboard.is-leaving .sb-head { opacity: 0; transition: opacity 300ms ease; }
.storyboard.is-leaving .sb-card:not(.is-lead) {
opacity: 0; transform: translateY(10px) scale(.97);
transition: opacity 260ms ease calc(var(--n, 0) * 35ms), transform 380ms cubic-bezier(.4, 0, .2, 1) calc(var(--n, 0) * 35ms);
}
.storyboard.is-leaving .sb-card.is-lead { visibility: hidden; }
.sb-zoom {
position: absolute; left: var(--left); top: var(--top); z-index: 3; width: var(--w); height: var(--h); aspect-ratio: auto;
transform-origin: 0 0; will-change: transform;
}
.sb-zoom.is-growing {
border-radius: 0; box-shadow: none; animation: sb-zoom-lift 720ms cubic-bezier(.2, .8, .2, 1) both;
transition: transform 720ms cubic-bezier(.2, .8, .2, 1), border-radius 720ms ease;
}
.sb-zoom.is-growing .sb-heading { opacity: 0; transition: opacity 260ms 200ms ease; }
.sb-zoom .sb-mark { display: none; }
.storyboard.is-landing .sb-stage :is(.sb-heading, .sb-mark, .sb-caption) { opacity: 0; transition: opacity 300ms ease; }
.run .controls.is-making { background: var(--paper); color: var(--ink-3); box-shadow: inset 0 1px 0 var(--line); }
.run .controls.is-making > :is(.control, .time) { display: none; }
.run .controls.is-making::before {
content: ""; order: -2; flex: none; width: 7px; height: 7px; border-radius: 50%;
background: var(--signal); animation: sb-ping 1.6s ease-out infinite;
}
.run .controls.is-making::after { content: attr(data-making); order: -1; flex: none; color: var(--ink-2); font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.run .controls.is-making .rail { pointer-events: none; }
.run .controls.is-making .playhead { visibility: hidden; }
.run .controls.is-making .rail-track { top: 14px; height: 6px; }
.run .controls.is-making .chapter { height: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.run .controls.is-making .chapter:not(.is-ready):not(.stub) {
background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 24%, transparent) 0 4px, transparent 4px 8px);
background-size: 11.3px 11.3px; animation: sb-hatch 900ms linear infinite;
}
.run .controls.is-making .chapter.is-ready { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.run .controls.is-making .chapter.stub { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 20%, transparent) 0 6px, transparent 6px 11px); }
.caption-strip {
display: grid; grid-template-rows: 1fr; container-type: inline-size;
background: var(--paper); color: var(--film-ink);
transition: grid-template-rows 320ms var(--run-ease), background-color var(--t-fade) var(--ease-in);
}
.caption-strip.is-off { grid-template-rows: 0fr; }
.caption-room { min-height: 0; overflow: hidden; }
.caption-lines {
--caption-lh: 1.4;
--caption-size: clamp(14px, calc(1.6cqi + 6px), 22px);
display: grid; align-content: start; justify-items: center;
box-sizing: content-box; height: calc(2 * var(--caption-size) * var(--caption-lh));
margin: 0; padding: calc(.45 * var(--caption-size)) 5% calc(.6 * var(--caption-size));
font: 500 var(--caption-size)/var(--caption-lh) var(--sans);
letter-spacing: -.004em; text-align: center; font-kerning: normal;
}
.caption-line { display: block; white-space: nowrap; unicode-bidi: plaintext; }
.caption-lines:is(:lang(hi), :lang(bho), :lang(mai), :lang(mr), :lang(ne), :lang(kok), :lang(bn), :lang(as), :lang(or),
:lang(pa), :lang(gu), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(si), :lang(th), :lang(lo), :lang(my), :lang(km),
:lang(ar), :lang(ur), :lang(fa), :lang(ps), :lang(sd), :lang(am)) { --caption-lh: 1.62; }
.player-shell:has(> .frame > .status-layer:not(.is-visible)) .caption-strip { background: var(--paper-seen, var(--film-paper)); }
.run[data-look="board"] .player-shell:has(> .frame > .status-layer:not(.is-visible)) .caption-strip { background: var(--paper-seen, var(--board-paper)); }
.run[data-look="board"] .caption-strip { color: var(--board-ink); }
.run .film:fullscreen .caption-strip { background: var(--paper-seen, var(--film-paper)); }
.run[data-look="board"] .film:fullscreen .caption-strip { background: var(--paper-seen, var(--board-paper)); }
.run .film:fullscreen .caption-lines { --caption-size: clamp(16px, calc(1.2cqi + 6px), 34px); }
.run .controls { height: var(--transport-h); min-height: var(--transport-h); padding: 0 18px; border-radius: 0 0 9px 9px; }
.run .control { width: 34px; height: 34px; border-radius: 6px; }
.run .control:hover { background: #ffffff14; }
.run .rail { height: 34px; margin: 0 4px; }
.run .rail-track { top: 15px; height: 4px; gap: 3px; background: none; border-radius: 0; overflow: visible; }
.run .chapter { position: relative; height: 4px; border-radius: 3px; overflow: clip; background: #ffffff47; }
.run .chapter::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: #fff; }
.run .chapter.stub::after { content: none; }
.run .rail:hover .chapter { background: #ffffff61; }
.run .playhead { top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1px solid #21241b; box-shadow: 0 1px 3px #00000040; }
.run .rail-tip {
bottom: 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 150px;
padding: 8px 10px; border: 1px solid var(--edge); border-radius: 8px;
background: var(--paper); color: var(--ink); box-shadow: var(--sh-lift);
}
:where(.page.is-run-view) .run .rail-tip-num { color: var(--ink-2); font: 600 12px/1.5 var(--sans); letter-spacing: -.008em; }
.run .rail-tip-text { font: 500 13px/1.3 var(--sans); white-space: normal; }
:where(.page.is-run-view) .run .rail-tip-time { color: var(--ink-3); font: 400 11px/1.4 var(--data); font-variant-numeric: tabular-nums; }
.watch-below { column-gap: 40px; margin-top: 28px; }
.run .title-block { align-items: start; gap: 8px 24px; padding-bottom: 26px; }
.run .question.q-40, .run .question.q-28, .run .question.q-19 {
font: 800 clamp(28px, 2.9vw, 40px)/1.08 var(--sans); letter-spacing: -.04em;
white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance;
}
.run .title-block > .run-facts:not(.run-heading-row) { grid-column: 1; }
.run-facts {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 12px 0 0;
color: var(--ink-3); font: 500 14px/1.5 var(--sans); letter-spacing: -.005em;
}
.run-facts > span { display: inline-flex; align-items: center; }
.run-facts > span + span::before { content: "\00b7"; margin: 0 13px; color: var(--line-2); }
.run-facts b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-facts .is-live { gap: 7px; color: var(--signal-text); }
.run-facts .is-made { color: var(--signal-text); }
.run-facts .is-music, .run-facts .is-web { display: inline; font-weight: 400; }
.run-facts .is-music a, .run-facts .is-web a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.run-facts .is-music a:hover, .run-facts .is-web a:hover { color: var(--ink-2); }
.run-facts .is-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: run-pulse 1.2s ease-in-out infinite; }
.run .title-block > .result-actions { grid-column: 1 / -1; grid-row: auto; align-self: start; justify-content: flex-start; }
.result-actions { gap: 8px; }
.run #share-video { order: 1; }
.run #download-final { order: 2; }
.result-actions .video-menu { position: relative; inset: auto; transform: none; order: 0; }
.result-actions .video-menu > summary { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: inherit; list-style: none; }
.result-actions .video-menu > summary svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.result-actions .video-menu > summary:hover, .result-actions .video-menu[open] > summary { color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.result-actions .video-menu .row-menu-actions { top: calc(100% + 6px); z-index: 6; }
.result-action, .run #download-final {
min-height: 36px; min-width: 0; gap: 8px; padding: 0 14px;
border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: -.004em;
}
.result-action svg { width: 16px; height: 16px; opacity: .9; }
.result-action:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.run #download-final {
flex-direction: row-reverse; height: 40px; min-height: 40px; gap: 12px; padding: 0 6px 0 18px;
background: var(--ink); color: var(--paper); font-weight: 600;
box-shadow: 0 1px 2px var(--landing-shadow-deep), 0 10px 22px -12px var(--landing-shadow-deep), inset 0 1px 0 #ffffff1f;
transition: background-color 200ms ease, transform 200ms var(--run-ease);
}
.run #download-final:hover { background: #242a28; color: var(--paper); transform: translateY(-1px); }
html[data-theme="dark"] .run #download-final:hover { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .run #download-final:hover { background: var(--ink-2); }
}
.run #download-final svg {
box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%;
background: var(--signal); color: #171a19; opacity: 1;
transition: background-color 160ms ease, translate 220ms var(--run-ease);
}
.run #download-final:hover svg { background: var(--signal-hover); translate: 0 2px; }
.run .running-row { margin-top: 14px; }
.run .running { color: var(--ink-3); font: 400 13px/1.5 var(--sans); }
.run[data-status="succeeded"] .running-row:not(.is-needed) .running { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.run .running-row #cancel-run, .run .run-actions .text-button:not(.is-primary) {
height: 36px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1 var(--sans);
}
.run .running-row #cancel-run:hover, .run .run-actions .text-button:not(.is-primary):hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.chapter-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.chapter-link {
display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px 10px;
min-height: 60px; padding: 10px 12px 10px 10px;
border: 1px solid var(--edge); border-radius: 8px; background: var(--paper);
box-shadow: var(--sh-rest); font: 500 14px/1.3 var(--sans); letter-spacing: -.012em;
transition: box-shadow 400ms var(--run-ease), transform 400ms var(--run-ease), border-color 200ms ease;
}
.chapter-link:not(:disabled):hover { transform: translateY(-2px); border-color: var(--edge); box-shadow: var(--sh-lift); }
:where(.page.is-run-view) .chapter-link-dot { width: 28px; height: 28px; border-radius: 6px; grid-row: 1 / span 2; }
.chapter-link-title { grid-column: 2; white-space: normal; text-wrap: balance; }
:where(.page.is-run-view) .chapter-link-duration { grid-column: 2; grid-row: 2; margin: 0; padding: 0; font-size: 11px; }
.chapter-link:disabled .chapter-link-duration { font-family: var(--sans); font-weight: 500; font-size: 11.5px; }
.chapter-link.is-retry .chapter-link-duration { font-family: var(--sans); font-size: 11.5px; color: var(--oxide); font-weight: 600; }
.chapter-link.is-current { background: var(--paper); border-color: var(--signal-text); box-shadow: 0 0 0 3px #f0442026, var(--sh-lift); }
.chapter-link.is-current .chapter-link-dot { background: var(--signal); color: #171a19; }
.run .script { margin-top: 56px; }
.copy-script, .copy-prompt {
min-height: 36px; min-width: 0; gap: 8px; padding: 0 12px;
border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: -.004em;
}
.copy-script:hover, .copy-prompt:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); border-color: transparent; }
.copy-script svg, .copy-prompt svg { width: 16px; height: 16px; opacity: .9; }
.run .scene { position: relative; }
.run .scene, .run .scene:last-child { padding: 34px 0; }
.run .scene.is-current::before {
content: ""; position: absolute; left: -18px; top: 34px; bottom: 34px; width: 2px; height: auto;
border-radius: 2px; background: var(--signal); box-shadow: none;
transform-origin: top; animation: run-draw-y 900ms var(--run-ease) both;
}
.run .scene:first-child.is-current::before { top: 0; }
:where(.page.is-run-view) .run .scene.is-current .scene-number { color: var(--signal-text); }
.run .script.is-playing .scene.is-current .scene-card.is-readonly .beat { color: var(--ink-3); }
.run .script.is-playing .scene.is-current .scene-card.is-readonly .beat.is-spoken {
color: var(--ink); background: linear-gradient(to top, #f0442022 0 .28em, transparent .28em);
}
.run .scene-heading { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
:where(.page.is-run-view) .run .scene-title { font: 650 22px/1.25 var(--sans); letter-spacing: -.028em; }
:where(.page.is-run-view) .run .scene-duration { grid-column: 3; font-size: 12px; }
.run .scene-heading .status-word {
grid-column: 4; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 7px;
margin: 0 0 0 16px; padding: 0; border: 0; background: none;
color: var(--ink-3); font: 500 13px/1.5 var(--sans); letter-spacing: -.005em;
}
.run .scene-heading .status-word::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.run .scene-heading .status-word.is-working { color: var(--signal-text); background: none; border: 0; }
.run .scene-heading .status-word.is-working::before { animation: run-pulse 1.2s ease-in-out infinite; }
.run .scene-heading .status-word.is-ready { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--ink-3); font: 500 13px/1.5 var(--sans); }
.run .scene-card, .run .scene-failure, .run .scene-chips { margin-left: 44px; }
.run .script-empty { margin: 0 0 0 44px; color: var(--ink-3); font: 400 15px/1.5 var(--sans); }
.run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after {
content: ""; display: block; height: 62px; max-width: 70ch; margin: 14px 0 0 44px;
background: linear-gradient(100deg, var(--paper-2) 30%, var(--paper) 50%, var(--paper-2) 70%);
background-size: 200% 100%;
-webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px), linear-gradient(to right, #000 52%, transparent);
mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px), linear-gradient(to right, #000 52%, transparent);
-webkit-mask-composite: source-in; mask-composite: intersect;
animation: run-shimmer 1.8s linear infinite;
}
.run .read-all:hover { color: var(--signal-text); }
.run-prompt {
margin: 2px 0 14px; padding: 6px 0 6px 22px; border-left: 2px solid var(--signal);
animation: fade-up 360ms var(--run-ease) both;
}
.run-prompt p { order: 0; max-width: 62ch; font: 400 20px/1.5 var(--reading); }
.run-prompt .copy-prompt { order: 1; justify-self: start; }
.watch-library { padding-left: 28px; }
.watch-video-preview {
border: 1px solid var(--edge); border-radius: 6px; background: #fff;
box-shadow: var(--sh-rest); transition: box-shadow 400ms var(--run-ease), border-color 200ms ease;
}
.watch-video-preview img { object-fit: cover; background: #fff; mix-blend-mode: multiply; }
.watch-video:hover .watch-video-preview { border-color: var(--signal-text); box-shadow: var(--sh-lift); }
.watch-video:hover .watch-video-title { color: var(--signal-text); text-decoration: none; }
.watch-library-header .text-link:hover { color: var(--signal-text); }
@media (max-width: 1050px) {
.chapter-nav { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
}
@media (max-width: 640px) {
.run .spread { margin-top: 8px; }
.run .status-layer { padding: 12px 14px calc(var(--transport-h) + 12px); }
.run .stage-rail { margin-bottom: 12px; }
.run .stage-rail > li + li::before { width: 20px; margin: 0 8px; }
.run .stage-rail > li .stage-name { font-size: 12px; }
.run .stage-rail > li:not(.is-active) .stage-name {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
}
.run .stage-rail > li:not(.is-active) { gap: 0; }
.run .frame-count { margin-top: 10px; }
.page.is-run-view { --transport-h: 46px; }
.run .controls { gap: 7px; padding: 0 10px; }
.run .control { width: 28px; height: 32px; }
.watch-below { margin-top: 18px; }
.run .title-block { padding-bottom: 18px; }
.run .title-block > .result-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
.result-actions { grid-row: auto; margin-top: 4px; }
.chapter-nav { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.chapter-link { min-height: 48px; }
.run .script { margin-top: 40px; }
.run .scene, .run .scene:last-child { padding: 26px 0; }
.run .scene.is-current::before { left: -11px; top: 26px; bottom: 26px; }
.run .scene-heading { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
:where(.page.is-run-view) .run .scene-title { font-size: 19px; }
.run .scene-card, .run .scene-failure, .run .scene-chips,
.run .script-empty { margin-left: 0; }
.run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after { margin-left: 0; }
.watch-library { padding-left: 0; }
.run-prompt p { font-size: 18px; }
}
@media (max-width: 390px) {
.is-run-view .bar-link:not(#link-new) { padding: 0 8px; }
.is-run-view #link-new { gap: 8px; padding-left: 12px; }
.is-run-view #studio-preferences { margin-left: 8px; }
.is-run-view #studio-preferences::before { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.player-shell, .sb-card, .sb-card > .sb-tile, .sb-num, .sb-play, .sb-heading, .sb-dot, .sb-dots i,
.sb-think-word i, .sb-think-mark path, .sb-think-mark svg,
.run .controls.is-making::before, .run .controls.is-making .chapter,
.run .frame-progress::after, .run .scene.is-current::before, .run-prompt,
.run .stage-rail > li.is-active .stage-dot, .run-facts .is-live i,
.run .scene-heading .status-word.is-working::before,
.run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after { animation: none !important; }
.run .frame-progress span, .run .frame-progress::after, .chapter-link,
.watch-video-preview, .is-run-view #link-new, .run #download-final, .sb-tile, .sb-ring path { transition: none; }
.run .frame-progress::after { display: none; }
}
.is-run-view .studio-footer { width: min(100%, var(--col-max)); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.create.is-ghost { position: fixed; z-index: 0; box-sizing: border-box; margin: 0; pointer-events: none; }
.create.is-ghost, .create.is-ghost *, .create.is-ghost *::before, .create.is-ghost *::after { transition: none !important; animation: none !important; }
.create.is-ghost .caret { display: none; }
.create.is-sheeted .composer-box { background: none; border-color: transparent; box-shadow: none; }
.create.is-sheeted .composer-box::before, .create.is-sheeted .composer-box::after { display: none; }
.create.is-sheeted .composer-toolbar { border-top-color: transparent; }
.create.is-flying .field, .create.is-flying .field::placeholder { color: transparent; caret-color: transparent; }
.create.is-sheeted .composer-form { z-index: auto; }
.create.is-sheeted :is(.create-title, .create-meta, .create-length-note, .engine, .composer-error, .create-try, .recently) { position: relative; z-index: -2; }
.press-sheet, .press-pad {
position: absolute; z-index: -1; box-sizing: border-box; pointer-events: none;
border: 1px solid var(--edge); background: var(--paper);
}
.press-pad { box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 22px 40px -22px var(--landing-shadow-deep); }
.press-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.press-word {
position: absolute; white-space: pre; transform-origin: 50% 50%;
font-family: var(--sans); font-weight: 400; letter-spacing: -.012em;
color: color-mix(in srgb, var(--ink-4) calc(var(--m, 0) * 100%), var(--press-ink, var(--ink)));
}
.press-nib {
position: absolute; left: 0; top: 0; display: grid; place-items: center; overflow: hidden;
border-radius: 50%; background: var(--signal); color: #171a19; font: 500 16px/1 var(--sans);
}
.page.is-pressing .run .player-shell { border-color: transparent; background: transparent; box-shadow: none; animation: none; }
.page.is-pressing .run .player-shell::before { display: none; }
.page.is-pressing .run :is(.frame, .caption-strip) { background: transparent; transition: none; }
.page.is-pressing .run .frame::before { opacity: var(--press-p, 1); }
.page.is-pressing .run .status-layer { transition: none; }
.page.is-pressing .run .controls.is-making { background: transparent; transition: none; }
.page.is-pressing .run .controls.is-making::before { opacity: var(--press-dot, 1); }
.page.is-pressing .run .controls.is-making::after { opacity: var(--press-label, 1); }
.page.is-pressing .run .controls .rail { opacity: var(--press-rail, 1); clip-path: inset(-4px -4px -4px var(--press-rail-clip, 0px)); }
.page.is-settling .run :is(.frame, .caption-strip, .controls) { transition: none !important; }
.player-shell.is-landed { animation: none; }
.run .controls.is-press-failed::before { background: var(--error); animation: none; }
.run .controls.is-press-failed::after { color: var(--error); }
.run-facts .is-pro { gap: 6px; color: var(--ink); font-weight: 600; }
.run-facts .is-pro i {
width: 9px; height: 12px; background: var(--pro-ember);
-webkit-mask: var(--pro-bolt) center / contain no-repeat; mask: var(--pro-bolt) center / contain no-repeat;
}
.run-facts .is-pro[data-tier="pro"] i { background: linear-gradient(160deg, #ffd27a, #ffa033); }
.run .frame-line.is-thinking, .run:is([data-tier="pro"], [data-tier="max"]) .sb-note-text {
background: linear-gradient(100deg, var(--ink-2) 0 38%, var(--signal) 46%, var(--pro-amber) 50%, var(--signal) 54%, var(--ink-2) 62% 100%) 0 0 / 300% 100% no-repeat;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: pro-thinking 2.6s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes pro-thinking { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.run:is([data-tier="pro"], [data-tier="max"]) .sb-letter .sb-think { --think-lit: var(--signal); }
.run:is([data-tier="pro"], [data-tier="max"]) .sb-think-mark { color: var(--signal); }
.run:is([data-tier="pro"], [data-tier="max"]) .controls.is-making::before { background: var(--pro-ember); box-shadow: 0 0 10px #ffa033b3; }
.press-sheet.is-pro > .pro-comet { inset: -1px; }
.press-sheet.is-pro { box-shadow: 0 0 0 0 transparent, 0 26px 54px -30px #f0442073, var(--sh-rest); }
.press-nib.is-pro { background: var(--pro-ember); box-shadow: 0 0 0 2px #ffb23f40, 0 0 16px 2px #ffa033a6; }
.press-nib .press-bolt {
width: 45%; height: 55%; background: #171a19;
-webkit-mask: var(--pro-bolt) center / contain no-repeat; mask: var(--pro-bolt) center / contain no-repeat;
}
.player-shell.is-landed.is-pro-landed::after {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
animation: pro-landed 1100ms cubic-bezier(.2, .8, .2, 1) 1 both;
}
@keyframes pro-landed {
0% { box-shadow: 0 0 0 0 #ffb23f00; }
24% { box-shadow: 0 0 0 2px #ffb23fb3, 0 0 36px 4px #f044204d; }
100% { box-shadow: 0 0 0 14px #ffb23f00, 0 0 60px 10px #f0442000; }
}
@media (prefers-reduced-motion: reduce) {
.run .frame-line.is-thinking { animation: none; background: none; color: var(--ink-2); }
.run:is([data-tier="pro"], [data-tier="max"]) .sb-note-text { animation: none; background: none; color: inherit; }
.player-shell.is-landed.is-pro-landed::after { content: none; }
}
.run .controls { container: transport / inline-size; }
.run .controls:has(> .speed-sheet:not([hidden])) { z-index: 40; }
.film:fullscreen.is-idle .controls:has(> .speed-sheet:not([hidden])) { opacity: 1; }
@container transport (max-width: 290px) {
.run .time-sep, .run .time-total { display: none; }
}
@container transport (max-width: 250px) {
.run .control.speed { display: none; }
}
@container transport (max-width: 215px) {
.run .control.captions { display: none; }
}
@container transport (max-width: 170px) {
.run .time { display: none; }
}
@container transport (max-width: 120px) {
.run .control.mute { display: none; }
}
:root.is-film-full { overflow: hidden; }
.run .film.is-full {
position: fixed; inset: 0; z-index: 1000; display: block !important; box-sizing: border-box;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
background: #111513;
}
.run .film.is-full > :not(.player-shell) { display: none; }
.run .film.is-full .player-shell { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: var(--paper-seen, var(--film-paper)); animation: none; }
.run .film.is-full .player-shell::before { content: none; }
.run .film.is-full .frame { flex: 1 1 0; width: 100%; height: auto; min-height: 0; margin-inline: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; --film: var(--paper-seen, var(--film-paper)); }
.run .film.is-full .agent-stage, .run .film.is-full .controls .agent-motion { display: none; }
.run .film.is-full .caption-strip { background: var(--paper-seen, var(--film-paper)); }
.run .film.is-full .controls { flex: none; border-radius: 0; }
.run[data-look="board"] .film.is-full .player-shell, .run[data-look="board"] .film.is-full .caption-strip { background: var(--paper-seen, var(--board-paper)); }
.run[data-look="board"] .film.is-full .frame { --film: var(--paper-seen, var(--board-paper)); }

.control.speed {
width: auto; min-width: 38px; padding: 0 7px;
font: 650 12.5px/1 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
touch-action: pan-y; -webkit-user-select: none; user-select: none;
transition: color 200ms ease, background-color 160ms ease;
}
.control.speed[hidden] { display: none; }
.control.speed[data-side="fast"] { color: var(--speed-fast, #ff9a70); }
.control.speed[data-side="slow"] { color: var(--speed-slow, #9ccbff); }
.control.speed[aria-expanded="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
.control.speed:active { scale: .94; }
.speed-now {
position: relative; display: block; height: 16px; overflow: hidden; line-height: 16px;
text-align: left; transition: width 320ms cubic-bezier(.2, .8, .2, 1);
}
.speed-now .speed-figure { display: inline-block; white-space: nowrap; }
.speed-now .speed-figure.is-leaving { position: absolute; left: 0; top: 0; }
.speed-sheet {
--x: .3333; --lo: .3333; --hi: .3333;
--ease: cubic-bezier(.2, .8, .2, 1);
--spring: cubic-bezier(.3, 1.4, .5, 1);
position: absolute; bottom: calc(100% + 10px); left: 8px; z-index: 30;
box-sizing: border-box; width: min(300px, calc(100% - 16px));
padding: 13px 16px 8px;
border: 1px solid var(--speed-line, #ffffff24); border-radius: 14px;
background: var(--speed-bg, #1a1d1cf0); color: var(--speed-ink, #fff);
-webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 14px 34px #0000004a, 0 2px 6px #0000002e;
font-family: var(--sans); text-align: left;
transform-origin: var(--speed-nub, 50%) calc(100% + 10px);
-webkit-user-select: none; user-select: none; touch-action: none;
-webkit-tap-highlight-color: transparent;
}
.speed-sheet[hidden] { display: none; }
.speed-sheet::after {
content: ""; position: absolute; top: 100%; left: var(--speed-nub, 50%);
width: 14px; height: 7px; translate: -50% -.5px;
background: var(--speed-bg, #1a1d1cf0); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.speed-sheet.is-opening { animation: speed-in 300ms var(--spring); }
.speed-sheet.is-closing { animation: speed-out 140ms cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes speed-in { from { opacity: 0; transform: translateY(8px) scale(.92); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes speed-out { to { opacity: 0; transform: translateY(5px) scale(.96); } }
.speed-sheet.is-wall .speed-rail { animation: speed-wall 240ms var(--ease); }
@keyframes speed-wall { 25% { translate: calc(var(--wall, 1) * 3px) 0; } 60% { translate: calc(var(--wall, 1) * -1.5px) 0; } }
.speed-sheet[data-side="slow"] { --wall: -1; }
.speed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.speed-read {
position: relative; flex: none; height: 32px; overflow: hidden;
font: 680 27px/32px var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums;
transition: color 220ms ease;
}
.speed-read[data-side="fast"] { color: var(--speed-fast, #ff9a70); }
.speed-read[data-side="slow"] { color: var(--speed-slow, #9ccbff); }
.speed-read .speed-figure { display: block; white-space: nowrap; }
.speed-read .speed-figure.is-leaving { position: absolute; left: 0; top: 0; }
.speed-note {
min-width: 0; padding-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--speed-soft, #ffffffa6); font: 500 12px/1.2 var(--sans); font-variant-numeric: tabular-nums;
}
.speed-slider { position: relative; height: 36px; margin: 2px -6px 0; border-radius: 10px; cursor: grab; outline: none; }
.speed-sheet.is-dragging .speed-slider { cursor: grabbing; }
.speed-slider:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--speed-ink, #fff) 70%, transparent); }
.speed-rail { position: absolute; inset: 0 16px; }
.speed-track {
position: absolute; left: -4px; right: -4px; top: 50%; height: 4px; margin-top: -2px;
border-radius: 2px; background: var(--speed-line, #ffffff2e);
}
.speed-fill {
position: absolute; top: 0; bottom: 0;
left: calc(4px + var(--lo) * (100% - 8px)); width: calc((var(--hi) - var(--lo)) * (100% - 8px));
border-radius: 2px; background: var(--speed-fast, #ff9a70);
}
.speed-sheet[data-side="slow"] .speed-fill { background: var(--speed-slow, #9ccbff); }
.speed-notch {
position: absolute; top: calc(50% + 5px); width: 1px; height: 3px; margin-left: -.5px;
border-radius: .5px; background: var(--speed-soft, #ffffffa6); opacity: .4;
transform-origin: 50% 0;
transition: opacity 160ms ease, background-color 160ms ease;
}
.speed-notch.is-quarter { width: 1.5px; height: 6px; margin-left: -.75px; opacity: .7; }
.speed-notch.is-home { top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 1px; opacity: .75; transform-origin: 50%; }
.speed-notch.is-lit { opacity: 1; background: var(--speed-ink, #fff); }
.speed-notch.is-click { animation: speed-click 280ms var(--ease); }
@keyframes speed-click { 30% { scale: 1.6 2.2; } }
.speed-thumb { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 0; height: 0; pointer-events: none; }
.speed-knob {
position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
background: var(--speed-knob, #fff);
box-shadow: 0 1px 3px #00000059, 0 0 0 0 transparent;
transform: scale(var(--sx, 1), var(--sy, 1));
transition: scale 180ms var(--spring), box-shadow 180ms ease;
}
.speed-knob::after {
content: ""; position: absolute; inset: 6.5px; border-radius: 50%;
background: var(--speed-fast, #ff9a70); scale: 0;
transition: scale 220ms var(--spring), background-color 220ms ease;
}
.speed-sheet[data-side] .speed-knob::after { scale: 1; }
.speed-sheet[data-side="slow"] .speed-knob::after { background: var(--speed-slow, #9ccbff); }
.speed-sheet.is-dragging .speed-knob {
scale: 1.14;
box-shadow: 0 3px 10px #00000059, 0 0 0 7px color-mix(in srgb, var(--speed-ink, #fff) 13%, transparent);
}
.speed-marks { position: relative; height: 20px; margin: -2px 10px 0; }
.speed-mark {
position: absolute; top: 0; translate: -50% 0; padding: 2px 4px; border: 0; border-radius: 5px;
background: none; color: var(--speed-soft, #ffffffa6); cursor: pointer;
font: 500 11px/14px var(--sans); font-variant-numeric: tabular-nums;
transition: color 160ms ease;
-webkit-tap-highlight-color: transparent;
}
.speed-mark:hover { color: var(--speed-ink, #fff); }
.speed-mark.is-current { color: var(--speed-ink, #fff); font-weight: 680; }
.speed-chip {
position: absolute; left: 50%; top: 14px; z-index: 6; translate: -50% 0;
display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 12px;
border-radius: 999px; background: #111513c7; color: #fff;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font: 650 14px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
opacity: 0; scale: .9; pointer-events: none;
transition: opacity 200ms ease, scale 260ms cubic-bezier(.3, 1.4, .5, 1);
}
.speed-chip::before { font-weight: 700; }
.speed-chip[data-side="fast"]::before { content: "»"; color: #ff9a70; }
.speed-chip[data-side="slow"]::before { content: "«"; color: #9ccbff; }
.speed-chip.is-on { opacity: 1; scale: 1; }
.speed-live, .speed-haptic {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}
.speed-haptic { position: fixed; left: -200px; top: 0; }
@media (prefers-reduced-motion: reduce) {
.speed-sheet, .speed-sheet *, .speed-sheet::after, .speed-now, .speed-chip, .control.speed {
animation: none !important; transition: none !important;
}
}

.result-dialog .publish { margin: 18px 0 20px; padding: 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--paper-2); }
.result-dialog .publish[hidden] { display: none; }
.result-dialog .publish-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.result-dialog .publish h3 { margin: 0; font: 650 16px/1.3 var(--sans); letter-spacing: -.01em; }
.result-dialog .publish p { margin: 4px 0 0; color: var(--ink-2); font: 400 13.5px/1.45 var(--sans); }
.publish-switch {
position: relative; flex: none; width: 44px; height: 26px; margin-top: 1px; padding: 0;
border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer;
transition: background-color 180ms ease;
}
.publish-switch span {
position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
background: var(--paper); box-shadow: 0 1px 3px #171a1933; transition: translate 180ms ease;
}
.publish-switch[aria-checked="true"] { background: var(--ink); }
.publish-switch[aria-checked="true"] span { translate: 18px 0; }
.publish-switch:disabled { cursor: default; opacity: .5; }
.publish-switch:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.result-dialog .publish-link { margin-top: 14px; }
.result-dialog .publish-link[hidden] { display: none; }
.result-dialog .publish-link input { background: var(--paper); }
.result-dialog .publish-embed { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 500 13px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.result-dialog .publish-embed:hover { color: var(--ink); }
.result-dialog .publish-embed.is-copied { color: var(--ink); text-decoration: none; }
.result-dialog .publish .publish-keep { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; }
.result-dialog .publish .publish-keep:empty, .result-dialog .publish .publish-status:empty { display: none; }
.result-dialog .publish .publish-status { margin-top: 8px; color: var(--ink); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
.publish-switch, .publish-switch span { transition: none; }
}

dialog.versions {
--versions-ease: cubic-bezier(.2, .8, .2, 1);
--versions-pad: 22px;
position: fixed;
inset: 0 0 0 auto;
box-sizing: border-box;
width: min(420px, 100vw);
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
overflow: visible;
}
dialog.versions:not([open]) { display: none; }
dialog.versions::backdrop { background: color-mix(in srgb, #171a19 22%, transparent); animation: versions-fade 200ms var(--versions-ease, ease-out); }
:root[data-theme="dark"] dialog.versions::backdrop { background: #0000008c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) dialog.versions::backdrop { background: #0000008c; } }
.versions-panel {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100%;
border-left: 1px solid var(--line);
background: var(--paper);
box-shadow: -24px 0 60px -28px var(--landing-shadow-deep, #0003);
animation: versions-in-side 260ms var(--versions-ease);
}
.versions-header { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px var(--versions-pad) 16px; }
.versions-heading { flex: 1; min-width: 0; }
.versions-header h2 { margin: 0; color: var(--ink); font: 600 20px/1.25 var(--sans); letter-spacing: -.018em; }
.versions-lede { margin: 5px 0 0; color: var(--ink-3); font: 400 13.5px/1.45 var(--sans); text-wrap: pretty; }
.versions-close { display: grid; flex: none; place-items: center; width: 36px; height: 36px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.versions-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.versions-close:hover { background: var(--paper-2); color: var(--ink); }
.versions-grip { display: none; }
.versions-note { margin: 0 var(--versions-pad) 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); font: 400 13px/1.45 var(--sans); }
.versions-note[hidden] { display: none; }
.versions-list { flex: 1; min-height: 0; margin: 0; padding: 4px 12px 20px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border-top: 1px solid var(--line); }
.versions-item {
--thumb-w: 72px; --thumb-h: 40.5px;
position: relative;
display: grid;
grid-template-columns: var(--thumb-w) minmax(0, 1fr);
align-items: start;
gap: 14px;
margin-top: 4px;
padding: 12px 10px;
border-radius: 12px;
}
:root[data-format="portrait"] .versions-item { --thumb-w: 40px; --thumb-h: 71px; }
.versions-item:not(:last-child)::after {
content: "";
position: absolute;
left: calc(10px + var(--thumb-w) / 2);
top: calc(12px + var(--thumb-h) + 6px);
bottom: -10px;
width: 0;
border-left: 1.5px dotted var(--line-2);
}
.versions-item.is-current { background: color-mix(in srgb, var(--paper-2) 80%, var(--paper)); box-shadow: inset 0 0 0 1px var(--line); }
.versions-thumb { position: relative; display: block; width: var(--thumb-w); height: var(--thumb-h); overflow: hidden; border-radius: 6px; background: var(--film-paper); box-shadow: 0 0 0 1px var(--frame-edge), 0 1px 2px var(--landing-shadow-soft, #0000000a); }
.versions-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.versions-thumb.is-empty { background: repeating-linear-gradient(135deg, var(--film-paper) 0 6px, color-mix(in srgb, var(--film-line) 55%, var(--film-paper)) 6px 7px); }
.versions-item.is-current .versions-thumb { box-shadow: 0 0 0 1.5px var(--ink), 0 2px 6px var(--landing-shadow-soft, #0000000f); }
.versions-item.is-stopped .versions-thumb, .versions-item.is-making .versions-thumb { opacity: .55; }
.versions-body { min-width: 0; padding-top: 1px; }
.versions-top { display: flex; align-items: flex-start; gap: 12px; }
.versions-name { display: -webkit-box; flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font: 500 14.5px/1.35 var(--sans); letter-spacing: -.006em; overflow-wrap: anywhere; text-wrap: pretty; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.versions-item.is-stopped .versions-name { color: var(--ink-3); }
.versions-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: var(--ink-3); font: 400 12.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.versions-now { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.versions-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
.versions-making { display: inline-flex; align-items: center; gap: 6px; color: var(--signal-text); font-weight: 500; }
.versions-making::before { content: ""; width: 10px; height: 10px; box-sizing: border-box; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: versions-spin 900ms linear infinite; }
.versions-stopped { color: var(--ink-4); }
.versions-proof { display: flex; align-items: flex-start; gap: 6px; margin: 7px 0 0; color: var(--ink-2); font: 450 12.5px/1.4 var(--sans); }
.versions-proof svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.versions-error { margin: 7px 0 0; color: var(--error-ink); font: 450 12.5px/1.4 var(--sans); }
.versions-restore { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 32px; margin: -6px 0 -4px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--paper); color: var(--ink); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color 150ms, border-color 150ms, transform 120ms; }
.versions-restore svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.versions-restore:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 30%, var(--line-2)); background: var(--paper-2); }
.versions-restore:active:not(:disabled) { transform: scale(.97); }
.versions-restore:disabled { opacity: .45; cursor: default; }
.versions-restore.is-busy { opacity: 1; border-color: var(--ink); }
.versions-spinner { width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: versions-spin 800ms linear infinite; }
.versions-more { align-self: center; margin: 0 0 18px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 13px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.versions-more:hover:not(:disabled) { color: var(--ink); background: var(--paper-2); }
.versions-more[hidden] { display: none; }
.versions-more.is-failed { color: var(--error-ink); }
dialog.versions :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 640px) {
dialog.versions { --versions-pad: 18px; inset: auto 0 0 0; width: 100vw; height: auto; max-height: 88dvh; }
.versions-panel { max-height: 88dvh; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px -24px var(--landing-shadow-deep, #0003); padding-bottom: env(safe-area-inset-bottom, 0px); animation-name: versions-in-up; }
.versions-header { padding-top: 24px; }
.versions-grip { position: absolute; top: 8px; left: 50%; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); transform: translateX(-50%); }
.versions-list { padding-inline: 6px; }
.versions-item { --thumb-w: 60px; --thumb-h: 33.75px; gap: 12px; padding: 12px 10px; }
:root[data-format="portrait"] .versions-item { --thumb-w: 34px; --thumb-h: 60px; }
}
@media (max-width: 380px) {
.versions-restore { width: 34px; padding: 0; justify-content: center; }
.versions-restore > span:not(.versions-spinner) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes versions-in-side { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes versions-in-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes versions-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes versions-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.versions-panel, dialog.versions::backdrop { animation: none; }
.versions-making::before, .versions-spinner { animation-duration: 2.4s; }
}

.noticed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); color: var(--ink); animation: noticed-in 220ms cubic-bezier(.2, .8, .2, 1); }
.noticed[hidden] { display: none; }
.noticed.is-in-sheet { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.noticed-body { flex: 1 1 280px; min-width: 0; }
.noticed-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; color: var(--ink-3); font: 500 11.5px/1.4 var(--sans); letter-spacing: .02em; }
.noticed-eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1L19 8a2.1 2.1 0 0 0-3-3L5 16z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4-1L19 8a2.1 2.1 0 0 0-3-3L5 16z'/%3E%3C/svg%3E") center / contain no-repeat; }
.noticed-text { margin: 0; color: var(--ink-2); font: 400 16.5px/1.45 var(--hand); overflow-wrap: anywhere; }
.noticed-wrong { color: var(--ink); text-decoration: underline wavy var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.noticed-right { color: var(--ink); font-weight: 700; }
.noticed-actions { display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; }
.noticed-fix, .noticed-dismiss { min-height: 34px; padding: 6px 14px; border-radius: 10px; font: 500 13px/1.4 var(--sans); cursor: pointer; transition: background-color 150ms, color 150ms, transform 120ms; }
.noticed-fix { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); }
.noticed-fix:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.noticed-dismiss { color: var(--ink-2); background: none; border: 1px solid transparent; }
.noticed-dismiss:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--ink) 5.5%, transparent); }
.noticed-fix:active:not(:disabled), .noticed-dismiss:active:not(:disabled) { transform: scale(.97); }
.noticed button:disabled { opacity: .45; cursor: default; }
.noticed :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.noticed-status { flex: 1 0 100%; margin: 0; color: var(--ink-3); font: 400 12.5px/1.5 var(--sans); }
.noticed-status:empty { display: none; }
@keyframes noticed-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .noticed { animation: none; } }
@media (max-width: 760px) {
.noticed { padding: 11px 12px 12px 14px; }
.noticed-actions { flex: 1 1 100%; justify-content: flex-end; }
.noticed-fix, .noticed-dismiss { min-height: 44px; }
}

.page[data-view="home"] .bar .wordmark-logo { animation: ink-write .8s .15s cubic-bezier(.45, 0, .2, 1) both; }
#home .h1 .w { animation: word-rise 1.05s var(--ease) both; animation-delay: calc(90ms + var(--i) * 70ms); }
#home .hero-layer { animation: fade-up .9s .02s var(--ease) both; }
#home .hero-layer a::before { animation: draw-x .7s .38s cubic-bezier(.6, 0, .25, 1) both; }
#home .hero-deck { animation: fade-up .9s .44s var(--ease) both; }
#home .promise { animation: fade-up .9s .52s var(--ease) both; }
#home .hero-start { animation: land 1.1s .64s var(--ease) both; }
#home .caret { animation: blink 1.1s steps(1, end) 1.4s infinite; }
#home .hero-sheet { animation: lay 1.6s .12s var(--ease) both; }
#home .clip { animation: ink 1.9s .5s cubic-bezier(.5, 0, .3, 1) both; }
#home .clip img { animation: settle 2.2s .5s var(--ease) both; }
#home .nib { animation: nib 1.9s .5s cubic-bezier(.5, 0, .3, 1) both, nib-life 2.05s .5s linear both; }
#home details[open] > p { animation: disclose 360ms var(--ease) both; }
@keyframes word-rise { from { transform: translate3d(0, 118%, 0); } }
@keyframes pen { from { stroke-dashoffset: calc(var(--pen, 1.2) + .05); } to { stroke-dashoffset: 0; } }
@keyframes ink-write { from { clip-path: inset(-.3em 100% -.35em -.1em); } to { clip-path: inset(-.3em -.25em -.35em -.1em); } }
@keyframes ink-dry { from { color: var(--signal); } 55% { color: var(--signal-text); } to { color: var(--ink); } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes land { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ping { from { box-shadow: 0 0 0 0 #f0442073; } to { box-shadow: 0 0 0 12px #f0442000; } }
@keyframes lay { from { opacity: 0; transform: rotate(-4.5deg) translate3d(36px, -18px, 0) scale(1.04); } }
@keyframes ink { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 108% 0, 100% 100%, 0 100%); } }
@keyframes nib { from { left: 0%; } to { left: 104%; } }
@keyframes nib-life { 0% { opacity: 0; translate: 0 -8px; } 6%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }
@keyframes settle { from { scale: 1.05; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes disclose { from { opacity: 0; translate: 0 6px; } }
@keyframes drift { to { translate: 0 -56px; } }
@keyframes pop { from { opacity: 0; scale: .6; } }
@keyframes band-open { from { clip-path: inset(0 max(20px, 3.4vw) round 32px); } to { clip-path: inset(0 0 round 0); } }
@keyframes band-close { from { clip-path: inset(0 0 round 0); } to { clip-path: inset(0 max(20px, 3.4vw) round 32px); } }
@keyframes hairline { to { opacity: 1; } }
@keyframes progress { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes focus-in { from { opacity: 0; filter: blur(.16em); transform: translate3d(0, .12em, 0); } }
@keyframes type-word { from { opacity: 0; transform: translate3d(0, .18em, 0); } }
@keyframes press { 45% { scale: .9; background-color: var(--signal-hover); } }
@keyframes card-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes render-head-life { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ribbon-frame { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes ribbon-picture { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes type-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes print-land { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); } }
@keyframes run-through { 0% { opacity: 1; transform: scaleX(0); } 78% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes arrow-ne {
0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .8, .2); }
40% { translate: var(--through) calc(-1 * var(--through)); }
40.01% { translate: calc(-1 * var(--through)) var(--through); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
100% { translate: 0 0; }
}
@keyframes arrow-e {
0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .8, .2); }
40% { translate: var(--through) 0; }
40.01% { translate: calc(-1 * var(--through)) 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
100% { translate: 0 0; }
}
@keyframes card-focus { from { scale: .94; opacity: .7; } 32%, 68% { scale: 1; opacity: 1; } to { scale: .94; opacity: .7; } }
@supports (animation-timeline: view(inline)) {
@media (max-width: 640px) {
#home :is(.films > .example, .paths > .path) { animation: card-focus linear both; animation-timeline: view(inline); }
}
}
@supports (animation-timeline: view()) {
.page[data-view="home"] .bar::before { animation: hairline linear both; animation-timeline: scroll(nearest); animation-range: 0px 120px; }
.page[data-view="home"] .bar::after { animation: progress linear both; animation-timeline: scroll(nearest); }
#home .clip img { animation: settle 2.2s .5s var(--ease) both, drift linear both; animation-timeline: auto, scroll(nearest); animation-range: normal, 0px 760px; }
#home .night { animation: band-open var(--scrub) both, band-close var(--scrub) forwards; animation-timeline: view(), view(); animation-range: cover 0px cover 420px, cover calc(100% - 420px) cover 100%; }
}
@property --night-top { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --night-end { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --on-night { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lens { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lens-round { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes night-top { from { --night-top: 100%; } to { --night-top: 0%; } }
@keyframes night-end { from { --night-end: 100%; } to { --night-end: 0%; } }
@keyframes night-ink-in { from { --on-night: 0; } to { --on-night: 1; } }
@keyframes night-ink-out { from { --on-night: 1; } to { --on-night: 0; } }
@keyframes night-lens { to { --lens: max(20px, 3.4vw); } }
@keyframes night-round { from { --lens-round: 0px; } to { --lens-round: 32px; } }
@supports (timeline-scope: --night) {
.page[data-view="home"] { timeline-scope: --night, --night-lens; }
#home .night { view-timeline: --night block, --night-lens block; view-timeline-inset: 0px, auto; }
.page[data-view="home"] .bar {
--glass-foot: calc(var(--cap-top) + var(--cap-h));
--glass-mid: calc(var(--cap-top) + var(--cap-h) / 2);
animation-name: night-top, night-end, night-ink-in, night-ink-out, bar-lift !important;
animation-timing-function: linear !important;
animation-fill-mode: both, both, both, forwards, both !important;
animation-timeline: --night, --night, --night, --night, scroll(root) !important;
animation-range:
exit-crossing calc(0% - var(--glass-foot)) exit-crossing calc(0% - var(--cap-top)),
exit-crossing calc(100% - var(--glass-foot)) exit-crossing calc(100% - var(--cap-top)),
exit-crossing calc(0% - var(--glass-mid) - 10px) exit-crossing calc(0% - var(--glass-mid) + 10px),
exit-crossing calc(100% - var(--glass-mid) - 10px) exit-crossing calc(100% - var(--glass-mid) + 10px),
0px 72px !important;
}
.page[data-view="home"] .bar-inner {
animation: night-lens var(--scrub) both, night-round linear both;
animation-timeline: --night-lens, --night;
animation-range: cover calc(100% - 420px) cover 100%, exit-crossing calc(100% - var(--glass-foot) - 32px) exit-crossing calc(100% - var(--glass-foot));
}
.page:has(#home.motion-settled) .bar-inner { animation: none; }
.page[data-view="home"] .bar-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.page[data-view="home"] .bar-inner::before { --lens-in: max(0px, var(--lens) - var(--cap-x)); background: #171d1cd6; clip-path: inset(var(--night-top) var(--lens-in) calc(100% - var(--night-end)) round 0 0 var(--lens-round) var(--lens-round)); }
.page[data-view="home"] .landing-nav a, .page[data-view="home"] .bar-link { color: color-mix(in srgb, #ffffffad calc(var(--on-night) * 100%), var(--ink-2)); }
.page[data-view="home"] :is(.landing-nav a:hover, .landing-nav a[aria-current], .bar-link:hover) { color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
.page[data-view="home"] .bar-link:hover { background: color-mix(in srgb, #ffffff14 calc(var(--on-night) * 100%), var(--paper-2)); }
.page[data-view="home"] .bar-link:focus-visible { outline-color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
.page[data-view="home"] .account-button-balance { color: color-mix(in srgb, #ffffff8c calc(var(--on-night) * 100%), var(--ink-3)); }
.page[data-view="home"] .nav-pill { background: color-mix(in srgb, #ffffff14 calc(var(--on-night) * 100%), var(--paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff1f calc(var(--on-night) * 100%), var(--line)); }
.page[data-view="home"] .landing-header-cta { background: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); --cta-ink: color-mix(in srgb, #171a19 calc(var(--on-night) * 100%), var(--paper)); }
.page[data-view="home"] .landing-header-cta:hover { background: color-mix(in srgb, #ecece8 calc(var(--on-night) * 100%), #242a28); }
.page[data-view="home"] .profile { background: color-mix(in srgb, #ffffff0a calc(var(--on-night) * 100%), var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff38 calc(var(--on-night) * 100%), var(--line-2)); color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
.page[data-view="home"] .profile:hover { background: color-mix(in srgb, #ffffff1f calc(var(--on-night) * 100%), var(--paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff5c calc(var(--on-night) * 100%), var(--ink-4)); }
.page[data-view="home"] .profile::before { background: color-mix(in srgb, #ffffff24 calc(var(--on-night) * 100%), var(--line)); }
}
#home.is-animated [data-reveal="fade"]:not(.is-in) { opacity: 0; }
#home [data-reveal="fade"].is-playing { animation: fade-up 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
#home.is-animated [data-reveal="rise"]:not(.is-in) .w { transform: translate3d(0, 118%, 0); }
#home [data-reveal="rise"].is-playing .w { animation: word-rise 1050ms var(--ease) both; animation-delay: calc(var(--i) * 62ms); }
#home.is-animated [data-reveal="rise"]:not(.is-in) .it .w { transform: none; clip-path: inset(-.3em 100% -.35em -.1em); }
#home [data-reveal="rise"].is-playing .it .w { animation: ink-write 720ms cubic-bezier(.45, 0, .2, 1) both, ink-dry 1100ms ease-out both; animation-delay: calc(var(--i) * 62ms + 260ms), calc(var(--i) * 62ms + 380ms); }
#home.is-animated :is([data-reveal="rise"], [data-reveal="focus"]):not(.is-in) .stroke path { stroke-dashoffset: calc(var(--pen, 1.2) + .05); }
#home [data-reveal="rise"].is-playing .stroke path { animation: pen 1150ms cubic-bezier(.6, 0, .25, 1) both; animation-delay: calc(var(--n) * 62ms + 480ms); }
#home.is-animated [data-reveal="focus"]:not(.is-in) .w { opacity: 0; }
#home [data-reveal="focus"] .mark .w { --beat: 170ms; }
#home [data-reveal="focus"].is-playing .w { animation: focus-in 1500ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 92ms + var(--beat, 0ms)); }
#home [data-reveal="focus"].is-playing .stroke path { animation: pen 1250ms cubic-bezier(.6, 0, .25, 1) both; animation-delay: calc(var(--n) * 92ms + 820ms); }
#home .poster { container-type: inline-size; }
#home .poster-card { position: absolute; inset: -1px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 6.4cqi 7cqi; background: var(--paper); }
#home .poster-q { max-width: 16em; color: var(--ink); font: 700 clamp(15px, 5.6cqi, 46px)/1.08 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
#home .qw { display: inline-block; }
#home .poster-go { align-self: flex-end; display: inline-flex; align-items: center; gap: .6em; padding: .78em 1.2em; border-radius: .6em; background: var(--signal); color: var(--ink); font: 700 clamp(8px, 1.55cqi, 15px)/1 var(--sans); box-shadow: 0 1px 0 #171a192e, inset 0 1px 0 #ffffff47; }
#home .poster-go span { font-weight: 400; font-size: 1.35em; }
#home :is(.render-head, .rivals-nib) { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
#home :is(.render-head, .rivals-nib)::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--signal); }
#home :is(.render-head, .rivals-nib)::after { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 14px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); }
#home :is(.render-head, .rivals-nib) i { position: absolute; right: 100%; top: 0; bottom: 0; width: 14cqi; background: linear-gradient(to right, #f0442000, #f044201a); }
#home.is-animated [data-reveal="film"]:not(.is-in) :is(.print, .play, .dur, .film-title, .qw, .poster-go, .example-facts) { opacity: 0; }
#home [data-reveal="film"].is-playing .print { animation: print-land 900ms var(--ease) both; animation-delay: var(--d0); }
#home [data-reveal="film"].is-playing .qw { animation: type-word 360ms var(--ease) both; animation-delay: calc(var(--d0) + 200ms + var(--i) * 34ms); }
#home [data-reveal="film"].is-playing .poster-go { animation: fade-up 520ms var(--ease) both, press 320ms cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--d0) + 200ms), var(--t-press); }
#home [data-reveal="film"].is-playing .poster-card { animation: card-out var(--sweep) cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--t-sweep); }
#home [data-reveal="film"].is-playing .render-head { animation: sweep var(--sweep) cubic-bezier(.65, 0, .35, 1) both, render-head-life var(--sweep) linear both; animation-delay: var(--t-sweep), var(--t-sweep); }
#home [data-reveal="film"].is-playing .poster-media img { animation: settle 1700ms var(--ease) both; animation-delay: var(--t-sweep); }
#home [data-reveal="film"].is-playing :is(.play, .dur) { animation: pop 650ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .72); }
#home [data-reveal="film"].is-playing .film-title { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .4); }
#home [data-reveal="film"].is-playing .example-facts { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .6); }
#home .path:nth-child(1) { --seg: 620ms; --seg-at: 0ms; --seg-ease: cubic-bezier(.5, 0, 1, 1); --copy-at: 240ms; }
#home .path:nth-child(2) { --seg: 310ms; --seg-at: 620ms; --seg-ease: linear; --copy-at: 700ms; }
#home .path:nth-child(3) { --seg: 620ms; --seg-at: 930ms; --seg-ease: cubic-bezier(0, 0, .5, 1); --copy-at: 1100ms; }
#home .path-copy > p { --k: 1; }
#home .path-copy > .arrow { --k: 2; }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art { transform: translate3d(-100%, 0, 0); }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art img { transform: translate3d(100%, 0, 0); }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-copy > * { opacity: 0; }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art, #home [data-reveal="ribbon"].is-playing .path-art { clip-path: inset(-12% 0); pointer-events: none; }
#home [data-reveal="ribbon"].is-near:not(.is-in) .path-art, #home [data-reveal="ribbon"].is-playing .path-art,
#home [data-reveal="ribbon"].is-near:not(.is-in) .path-art img, #home [data-reveal="ribbon"].is-playing .path-art img { will-change: transform; }
#home [data-reveal="ribbon"].is-playing .path-art { animation: ribbon-frame var(--seg) var(--seg-ease) both; animation-delay: var(--seg-at); }
#home [data-reveal="ribbon"].is-playing .path-art img { animation: ribbon-picture var(--seg) var(--seg-ease) both; animation-delay: var(--seg-at); }
#home [data-reveal="ribbon"].is-playing .path-copy > * { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--copy-at) + var(--k, 0) * 70ms); }
#home .code .cl { width: max-content; max-width: 100%; }
#home.is-animated [data-reveal="code"]:not(.is-in) { opacity: 0; }
#home.is-animated [data-reveal="code"]:not(.is-in) .code { transform: rotateY(-16deg) rotateX(5deg) translate3d(40px, 30px, 0); }
#home.is-animated [data-reveal="code"]:not(.is-in) .cl { clip-path: inset(0 100% 0 0); }
#home [data-reveal="code"].is-playing { animation: fade-up 1100ms var(--ease) both; }
#home [data-reveal="code"].is-playing .cl { animation: type-line var(--dur) steps(var(--c), jump-end) both; animation-delay: var(--at); }
#home.is-animated [data-reveal="code"]:not(.is-in) .reply { opacity: 0; }
#home [data-reveal="code"].is-playing .code-run i { animation: run-through 760ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--typed, 2200ms); }
#home [data-reveal="code"].is-playing .reply { animation: print-land 950ms var(--ease) both; animation-delay: calc(var(--typed, 2200ms) + 620ms); }
#rivals.is-racing .rivals-lane.is-done .rivals-sheet { animation: card-out 760ms cubic-bezier(.65, 0, .35, 1) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-nib { display: block; animation: sweep 760ms cubic-bezier(.65, 0, .35, 1) both, render-head-life 760ms linear both; }
#rivals.is-racing .rivals-lane.is-done .rivals-run { animation: fade-out 300ms 560ms ease-out both; }
#rivals.is-racing .rivals-lane.is-done .rivals-cover > * { animation: settle 1500ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .play { animation: pop 620ms 480ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-made { animation: fade-up 800ms 380ms var(--ease) both; }
#home.is-animated [data-reveal="bars"]:not(.is-in) :is(.rivals-bar-name, .rivals-bar-val) { opacity: 0; }
#home.is-animated [data-reveal="bars"]:not(.is-in) .rivals-fill { transform: scaleX(0); }
#home [data-reveal="bars"].is-playing :is(.rivals-bar-name, .rivals-bar-val) { animation: fade-up 750ms var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
#home [data-reveal="bars"].is-playing .rivals-fill { animation: draw-x var(--draw, 900ms) cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
#home.is-animated [data-reveal="list"]:not(.is-in) > * { opacity: 0; }
#home [data-reveal="list"].is-playing > * { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
@media (prefers-reduced-motion: reduce) {
html:has(#home:not([hidden])) { scroll-behavior: auto; }
.page[data-view="home"] *, .page[data-view="home"] *::before, .page[data-view="home"] *::after { animation: none !important; transition: none !important; }
}
#home:not(.is-animated) :is(.hero-layer, .hero-deck, .h1 .w, .promise, .hero-start, .caret, .hero-sheet, .clip, .clip img, .nib), #home:not(.is-animated) .hero-layer a::before { animation: none; }
#home:not(.is-animated) .nib, #home.motion-settled .nib, #home.motion-settled .caret { display: none; }
#home.motion-settled *:not(.arr > i, .hero-start-go svg), #home.motion-settled *::before, #home.motion-settled *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
#home [data-reveal], #home [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
#home .stroke path { stroke-dashoffset: 0 !important; }
#home .poster-card, #home .render-head, #home .nib, #home .caret { display: none; }
#home .poster-loop, #home .code-run { display: none; }
#home .clip { clip-path: none !important; }
.page[data-view="home"] .bar::before, .page[data-view="home"] .bar::after { animation: none !important; }
.page[data-view="home"] .bar { animation-name: night-top, night-end, night-ink-in, night-ink-out !important; transition: --bar-lift 160ms ease !important; }
}
@keyframes landing-ink-draw { from { transform: scaleX(0) rotate(-.5deg); } to { transform: scaleX(1) rotate(-.5deg); } }
.intro { --intro-w: clamp(132px, 34vw, 196px); display: none; }
html:is([data-intro="wait"], [data-intro="write"], [data-intro="out"]) .intro { display: block; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
html:is([data-intro="wait"], [data-intro="write"]) .intro { pointer-events: auto; }
.intro-paper { position: absolute; inset: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 34px 60px -34px var(--landing-shadow-deep); will-change: transform; }
.intro-word { position: absolute; left: 50%; top: 46vh; width: var(--intro-w); aspect-ratio: 2087 / 753; margin: calc(var(--intro-w) * -753 / 4174) 0 0 calc(var(--intro-w) / -2); transform-origin: 0 0; color: var(--signal); -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; will-change: transform; }
.intro-word svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-word path { visibility: hidden; }
.intro-word :is(.intro-ridge, .intro-wash) { stroke: var(--signal-text); }
.intro-word :is(.intro-ridge, .intro-cover) { stroke-linecap: butt; }
.intro-brush { position: absolute; left: 0; top: 0; width: calc(var(--intro-w) * .86); aspect-ratio: 150 / 24; opacity: 0; will-change: opacity; }
.intro-brush svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 50%; will-change: transform; }
.intro-shadow { filter: blur(2.5px); }
.intro-shadow path { fill: var(--landing-shadow-deep); }
.intro-tool .brush-handle { fill: var(--ink); }
.intro-tool .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
.intro-tool .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
.intro-tool .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
.intro-tool .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
.intro-tool .brush-hairs { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: .5; }
.intro-tool .brush-paint { fill: var(--signal); }
html:is([data-intro="wait"], [data-intro="write"]) #home *, html:is([data-intro="wait"], [data-intro="write"]) #home *::before, html:is([data-intro="wait"], [data-intro="write"]) #home *::after { animation-play-state: paused !important; }
html:is([data-intro="wait"], [data-intro="write"]) #home :is(.hero-layer, .hero-deck, .h1 .w, .promise, .hero-start, .caret, .hero-sheet, .clip, .clip img, .nib), html:is([data-intro="wait"], [data-intro="write"]) #home .hero-layer a::before { animation: none !important; }
html[data-intro] .page[data-view="home"] .bar .wordmark-logo { animation: none; }
@media screen { html:is([data-intro="wait"], [data-intro="write"], [data-intro="out"]) #wordmark .wordmark-logo { visibility: hidden; } }
@media (prefers-reduced-motion: reduce), print { .intro { display: none !important; } }

@property --bar-lift { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes bar-lift { from { --bar-lift: 0; } to { --bar-lift: 1; } }
.page[data-view] .bar {
--cap-h: 56px; --cap-top: 10px; --cap-pad: 14px; --cap-round: 999px; --bar-pad-top: 0px; --bar-rest: var(--paper);
--glass-edge-blur: 8px;
--glass-fill: calc(var(--bar-lift) * (1 - var(--on-night, 0)) * 100%);
--glass-line: calc(var(--bar-lift) * 100%);
--glass-light: calc(var(--bar-lift) * (1 - (1 - var(--glass-night-light)) * var(--on-night, 0)) * 100%);
position: sticky; top: 0;
justify-content: center; align-items: flex-start;
pointer-events: none;
background: color-mix(in srgb, var(--bar-rest) calc((1 - var(--bar-lift)) * 100%), transparent);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
@supports (animation-timeline: scroll()) {
.page[data-view] .bar { animation: bar-lift linear both; animation-timeline: scroll(root); animation-range: 0px 72px; }
}
.page[data-view="home"] .bar {
--bar-rest: var(--landing-bar-glass); height: calc(var(--bar-h) + var(--bar-pad-top));
--cap-x: calc((100vw - min(var(--col), 100vw - 2 * var(--gutter))) / 2 - var(--cap-pad));
}
.page.is-run-view .bar { --bar-rest: var(--landing-bar-glass); }
@media (max-width: 899.98px) {
.page[data-view] .bar { --cap-h: 52px; --cap-top: calc(env(safe-area-inset-top) + 6px); --cap-pad: max(0px, var(--gutter) - 8px); --cap-round: 20px; }
}
@media (max-width: 640px) {
.page[data-view="home"] .bar { --bar-pad-top: env(safe-area-inset-top); }
}
.page[data-view] .bar-inner {
position: relative;
top: calc((50% - var(--cap-h) / 2) * (1 - var(--bar-lift)) + (var(--cap-top) - var(--bar-pad-top)) * var(--bar-lift));
flex: none; box-sizing: content-box;
width: min(var(--col-max), 100%); height: var(--cap-h);
margin-inline: 0; padding-inline: calc(var(--cap-pad) * var(--bar-lift));
border-radius: var(--cap-round);
pointer-events: auto;
background:
radial-gradient(160px 12px at 90px 3px, color-mix(in srgb, var(--glass-spec) var(--glass-fill), transparent), transparent 70%),
radial-gradient(ellipse 70% 120% at 50% -45%, color-mix(in srgb, var(--glass-sheen) var(--glass-fill), transparent), transparent 70%),
linear-gradient(color-mix(in srgb, var(--glass-tint-edge) var(--glass-fill), transparent), color-mix(in srgb, var(--glass-tint-core) var(--glass-fill), transparent) 38% 62%, color-mix(in srgb, var(--glass-tint-edge) var(--glass-fill), transparent));
box-shadow:
inset 0 1.5px 1px -.5px color-mix(in srgb, var(--glass-inner-hi) var(--glass-light), transparent),
inset 0 -1.5px 2px -1px color-mix(in srgb, var(--glass-inner-lo) var(--glass-light), transparent),
inset 10px 0 14px -12px color-mix(in srgb, var(--glass-glow) var(--glass-light), transparent),
inset -10px 0 14px -12px color-mix(in srgb, var(--glass-glow) var(--glass-light), transparent),
0 0 0 .5px color-mix(in srgb, var(--glass-outline) var(--glass-line), transparent),
0 1px 2px color-mix(in srgb, var(--glass-shadow-near) var(--glass-line), transparent),
0 8px 18px -6px color-mix(in srgb, var(--glass-shadow-mid) var(--glass-line), transparent),
0 22px 48px -18px color-mix(in srgb, var(--glass-shadow-far) var(--glass-line), transparent);
--glass-backdrop: blur(calc(var(--glass-blur) * var(--bar-lift))) saturate(calc(1 + .9 * var(--bar-lift))) brightness(calc(1 + (var(--glass-bright) - 1) * var(--bar-lift)));
-webkit-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop);
}
.page[data-view="home"] .bar-inner { width: min(var(--col), 100% - 2 * var(--gutter)); }
.page[data-view] .bar-inner::after {
content: ""; position: absolute; inset: 0; padding: 1.25px; border-radius: inherit; pointer-events: none;
background: linear-gradient(to bottom right, var(--glass-rim-hi), var(--glass-rim-side) 30%, var(--glass-rim-side) 70%, var(--glass-rim-lo));
-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude;
opacity: calc(var(--bar-lift) * (1 - (1 - var(--glass-night-light)) * var(--on-night, 0)));
}
.page[data-view] .bar { --bar-ink-2: var(--ink-2); --bar-ink-3: var(--ink-3); }
.page[data-view] .bar-inner {
--ink-2: color-mix(in srgb, var(--ink) var(--glass-fill), var(--bar-ink-2));
--ink-3: color-mix(in srgb, var(--ink) var(--glass-fill), var(--bar-ink-3));
}
.page[data-view] .bar::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: calc(var(--cap-top) + var(--cap-h) + 28px);
background: linear-gradient(color-mix(in srgb, var(--paper) calc(var(--bar-lift) * (1 - var(--on-night, 0)) * 72%), transparent), transparent calc(var(--cap-top) + var(--cap-h) * .7));
opacity: 1; animation: none; pointer-events: none;
-webkit-backdrop-filter: blur(calc(var(--glass-edge-blur) * var(--bar-lift))); backdrop-filter: blur(calc(var(--glass-edge-blur) * var(--bar-lift)));
-webkit-mask: linear-gradient(black calc(100% - 44px), transparent); mask: linear-gradient(black calc(100% - 44px), transparent);
}
.page[data-view="home"] .bar::after {
left: 50%; right: auto; bottom: auto;
top: calc(var(--bar-pad-top) + (var(--bar-h) - var(--cap-h)) / 2 * (1 - var(--bar-lift)) + (var(--cap-top) - var(--bar-pad-top)) * var(--bar-lift));
width: calc(min(var(--col), 100% - 2 * var(--gutter)) + 2 * var(--cap-pad) * var(--bar-lift)); height: var(--cap-h);
translate: -50% 0; border-radius: var(--cap-round);
background: linear-gradient(to top, var(--signal) 2px, transparent 2px);
pointer-events: none;
}
@media (max-width: 899.98px) {
.page[data-view="home"] .bar::after { content: none; }
}
html:has(.page:is([data-view="composer"], [data-view="run"])) { scroll-padding-top: calc(env(safe-area-inset-top) + 80px); }
@media (max-width: 760px), (max-height: 500px) {
.page.is-run-view .bar { position: relative; --bar-lift: 0 !important; animation: none; }
.page.is-run-view .bar::before { content: none; }
html:has(.page.is-run-view) { scroll-padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.page[data-view] .bar { animation: none; transition: --bar-lift 160ms ease; }
.page[data-view] .bar.is-scrolled { --bar-lift: 1; }
}
@media (prefers-reduced-transparency: reduce) {
.page[data-view] .bar { background: color-mix(in srgb, var(--paper) calc((1 - var(--bar-lift)) * 100%), transparent); }
.page[data-view] .bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.page[data-view] .bar-inner {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: color-mix(in srgb, var(--paper) var(--glass-fill), transparent);
}
}
@media (min-width: 641px) {
#bar :is(#account-button, #link-runs) {
height: 34px; margin: 0; padding: 0 14px; gap: 8px;
border: 0; border-radius: 999px; background: var(--paper);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink); font: 500 13.5px/1 var(--sans); letter-spacing: -.006em; white-space: nowrap;
transition: box-shadow 160ms ease, color 160ms ease;
}
#bar :is(#account-button, #link-runs):hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px var(--landing-shadow-soft); }
#bar :is(#account-button, #link-runs):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 2px; }
.page:not([data-view="home"]) #bar .bar-links { gap: 8px; }
#bar #link-runs svg { width: 15px; height: 15px; color: var(--ink-3); opacity: 1; }
#bar #account-button:has(.account-button-balance) { padding-right: 4px; }
#bar .account-button-balance {
display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
background: var(--paper-2); color: var(--ink-2); font: 500 12.5px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
}