/* Home */
.hero{padding-block:64px 44px;text-align:center}
.hero h1{font-size:clamp(38px,5vw,66px);max-width:13em;margin-inline:auto}
.hero h1 span{display:inline-block}
.hero .hero-intro{font-size:19px;margin:20px auto 0;max-width:600px}
.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero .hero-actions{justify-content:center;margin-top:32px}
.hero-platforms{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 22px;margin-top:28px;font-size:14px;color:var(--faint)}
.hero-platforms a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);transition:color .2s}
.hero-platforms a:hover{color:var(--ink)}
.hero-platforms .icon{width:17px;height:17px}

.ui-shot{display:block;width:100%;height:auto;border-radius:24px;background:#fafaf8}

.film{max-width:1000px}
.film .motion-stage{background:var(--paper);box-shadow:0 0 0 1px #e4e4e0}
.films-tabs{display:flex;justify-content:center;gap:4px 28px;flex-wrap:wrap;margin-bottom:20px}
.films-tab{padding:8px 0;font:500 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9a9b9f;box-shadow:inset 0 -1.5px 0 transparent;transition:color .2s,box-shadow .2s}
.films-tab:hover{color:var(--ink)}
.films-tab[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}

.ws{display:grid;grid-template-columns:260px minmax(0,1fr) 290px;height:min(700px,84vh);min-height:580px;border-radius:24px;background:#fafaf8;box-shadow:0 0 0 1px #e4e4e0;overflow:hidden}
.ws-side,.ws-summary{background:#f3f3f0;overflow-y:auto;scrollbar-width:thin}
.ws-side{padding:26px 14px}
.ws-team{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 22px}
.ws-team strong{font:400 19px/1.2 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.ws-avatars{display:flex}
.ws-avatars span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#dcdcd6;color:var(--ink);font-size:11px;font-weight:600;box-shadow:0 0 0 2px #f3f3f0}
.ws-avatars span+span{margin-left:-6px}
.ws-label{display:flex;align-items:center;gap:8px;margin:0 10px 10px;font:500 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a8b8f}
.ws-library{display:flex;flex-direction:column;gap:2px}
.ws-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:14px 12px;border-radius:14px;text-align:left;transition:background .2s}
.ws-item:hover{background:#ebebe7}
.ws-item.is-active{background:#fafaf8;box-shadow:0 1px 2px #2021240d}
.ws-item-date{font-size:11px;color:#9a9b9f}
.ws-item-title{font:400 16px/1.3 var(--serif);color:var(--ink)}
.ws-item-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.55;color:#7a7b80}
.ws-item-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.ws-tag{padding:2px 6px;border-radius:2px;background:#4a4b4f;color:#fff;font:500 10px/1.4 var(--sans);letter-spacing:.02em}
.ws-main{display:flex;flex-direction:column;min-width:0;padding:30px 36px 0}
.ws-kicker{font:500 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9a9b9f}
.ws-title{margin-top:8px;font:400 30px/1.2 var(--serif);letter-spacing:-.015em}
.ws-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:13px;color:#8a8b8f}
.ws-player{display:flex;align-items:center;gap:14px;margin-top:20px;padding:8px 16px 8px 8px;border-radius:999px;background:#f0f0ec}
.ws-play{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink)}
.ws-play svg{width:13px;height:13px}
.ws-track{flex:1;height:3px;border-radius:2px;background:#dcdcd7;overflow:hidden}
.ws-track span{display:block;height:100%;background:var(--ink);transition:width .6s ease}
.ws-clock{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7a7b80;white-space:nowrap}
.ws-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:16px}
.ws-search{display:flex;align-items:center;gap:6px;flex:1 1 180px;min-width:150px;max-width:260px;padding:7px 12px;border-radius:10px;background:#f0f0ec}
.ws-search .icon{width:15px;height:15px;color:#9a9b9f}
.ws-search input{width:100%;min-width:0;border:0;background:none;outline:0;font-size:13px}
.ws-speakers,.ws-modes{display:flex;flex-wrap:wrap;gap:2px 14px}
.ws-filter,.ws-mode{padding:6px 0;font:500 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#9a9b9f;box-shadow:inset 0 -1.5px 0 transparent;transition:color .2s,box-shadow .2s}
.ws-filter:hover,.ws-mode:hover{color:var(--ink)}
.ws-filter.is-on,.ws-mode.is-on{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--ink)}
.ws-bar{display:flex;align-items:center;gap:20px;margin-top:22px}
.ws-bar .ws-label{margin:0}
.ws-modes{margin-left:auto}
.ws-copy{padding:6px 0;font:500 12px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ws-copy:hover{opacity:.7}
.ws-segments{list-style:none;margin:10px -12px 0;padding:0 0 24px;overflow-y:auto;flex:1;scrollbar-width:thin}
.ws-seg{--rule:#9a9b9f;position:relative;padding:12px 14px 12px 28px;border-radius:12px;transition:background .3s}
.ws-seg::before{content:'';position:absolute;left:14px;top:14px;bottom:14px;width:2px;border-radius:1px;background:var(--rule);opacity:.55}
.ws-seg.is-active::before{opacity:1;width:3px}
.ws-seg-head{display:flex;align-items:baseline;gap:10px}
.ws-speaker{font:600 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rule)}
.ws-time{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a6a7ab}
.ws-time:hover{color:var(--ink)}
.ws-speaker-0{--rule:#4f8a6e}.ws-speaker-1{--rule:#b0843d}.ws-speaker-2{--rule:#3d6a8f}.ws-speaker-3{--rule:#7a5a94}
.ws-text{margin-top:6px;font-size:16px;line-height:1.7;color:var(--ink)}
.ws-tr{margin-top:4px;font-size:15px;line-height:1.7;color:#8a8b8f}
.ws-empty{padding:24px 14px;font-size:14px;color:#8a8b8f}
.ws mark{background:#f3e3a6;color:inherit;border-radius:2px;padding:0 1px}
.ws-summary{padding:30px 24px}
.ws-summary .ws-label{margin:26px 0 10px}
.ws-summary .ws-label:first-child{margin-top:0}
.ws-pro{padding:1px 4px;border-radius:2px;box-shadow:inset 0 0 0 1px #b5b6ba;font-size:9px;letter-spacing:.1em;color:#8a8b8f}
.ws-overview{font-size:14px;line-height:1.75;color:var(--ink)}
.ws-points{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.65;color:#4a4b4f}
.ws-points li{position:relative;padding-left:16px}
.ws-points li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--ink)}
.ws-points li+li{margin-top:6px}
.ws-actions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ws-check{display:flex;align-items:flex-start;gap:10px;width:100%;padding:6px 8px;margin-left:-8px;border-radius:10px;text-align:left;font-size:13px;line-height:1.6;color:var(--ink)}
.ws-check:hover{background:#ebebe7}
.ws-box{flex:none;width:12px;height:12px;margin-top:5px;border-radius:1px;box-shadow:inset 0 0 0 1.2px #6b6c70;transition:background .2s,box-shadow .2s}
.ws-check.is-done .ws-box{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:none}
.ws-check.is-done span:last-child{color:#9a9b9f;text-decoration:line-through}

.devices-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.device{display:flex;flex-direction:column;min-width:0}
.device-art{position:relative;aspect-ratio:4/3;border-radius:20px;background:var(--surface);overflow:hidden;transition:background .2s}
.device:hover .device-art{background:var(--surface-strong)}
.device-art>.shot{position:absolute;left:12%;top:14%;width:118%}
.device-art>.shot-window,.device-art>.shot-browser{border-radius:8px}
.device-art .shot-bar{height:20px;padding:0 9px;gap:4px}
.device-art .shot-bar i{width:6px;height:6px}
.device-art .shot-bar span{font-size:8px;padding:0 8px}
.device-art>.shot-phone{left:50%;width:46%;transform:translateX(-50%);border-radius:24px;box-shadow:0 0 0 4px #2c2d31,0 20px 40px -16px #18191c40}
.device h3{margin-top:18px;font-size:19px}
.device p{margin-top:6px;font-size:14.5px;line-height:1.65}
.device-art .shot-empty{justify-items:start;padding-left:24%}
.device-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-size:14px;font-weight:500}
.device-more .icon{width:16px;height:16px;transition:transform .2s}
.device:hover .device-more .icon{transform:translateX(3px)}

.sources h2,.exporter h2{letter-spacing:-.03em}
.sources-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.source-tile picture{display:block}
.source-tile .ui-shot{aspect-ratio:7/5;object-fit:contain;border-radius:18px}
.source-tile h3{display:flex;align-items:center;gap:8px;margin:20px 4px 0;font-size:17px}

.exporter h2{margin-bottom:32px}
.code{border-radius:20px;background:#1c1d20;color:#d6d6d2;overflow:hidden}
.code-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:14px 16px 14px 20px;background:#232427}
.code-tabs{display:flex;gap:2px}
.code-tab{padding:6px 12px;border-radius:8px;font:500 13px/1 var(--sans);color:#8e8f94;transition:background .2s,color .2s}
.code-tab:hover{color:#fff}
.code-tab.is-on{background:#34353a;color:#fff}
.code-name{margin-left:auto;font:13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7d7e83;overflow-wrap:anywhere}
.code-download{padding:8px 16px;border-radius:8px;background:#fff;color:#202124;font:500 13px/1 var(--sans);transition:background .2s}
.code-download:hover{background:#e6e6e2}
.code-body{counter-reset:line;margin:0;max-height:440px;overflow:auto;padding:20px 0 24px;font:14px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:#3a3b40 transparent}
.code-line{display:block;padding:0 28px 0 72px;position:relative}
.code-line::before{counter-increment:line;content:counter(line);position:absolute;left:0;width:48px;text-align:right;color:#4d4e53;user-select:none}
.tk-time{color:#8fb3d1}
.tk-name{color:#e0b072}
.tk-head{color:#fff;font-weight:600}
.tk-mute{color:#6b6c71}


@media(max-width:1100px){
 .ws{grid-template-columns:220px minmax(0,1fr) 250px}
 .ws-main{padding:26px 24px 0}
 .devices-grid,.sources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 .ws{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
 .ws-side{min-width:0;padding:16px;overflow:visible}
 .ws-team{padding:0 4px 12px}
 .ws-side .ws-label{display:none}
 .ws-library{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
 .ws-item{flex:none;width:240px}
 .ws-side{padding:18px 12px}
 .ws-segments{max-height:420px}
 .ws-summary{overflow:visible}
}
@media(max-width:600px){
 .hero{padding-block:36px 32px}
 .hero h1{font-size:34px}
 .hero .hero-intro{font-size:16px}
 .hero-platforms{gap:6px 16px}
 .hero-platforms>span{width:100%}
 .films-tabs{gap:2px 18px;margin-bottom:14px}
 .films-tab{font-size:12px;letter-spacing:.08em}
 .devices-grid{gap:24px 14px}
 .device-art{border-radius:16px}
 .device h3{margin-top:12px;font-size:17px}
 .device p{font-size:13.5px;line-height:1.6}
 .device-more{font-size:13px}
 .device-art>.shot-phone{border-radius:16px;box-shadow:0 0 0 3px #2c2d31,0 12px 24px -10px #18191c40}
 .device-art .shot-empty span{font-size:10px;padding:3px 8px}
 .sources-grid{gap:14px}
 .source-tile h3{font-size:15px;margin-top:12px}
 .ui-shot{border-radius:18px}
 .ws{border-radius:22px;margin-inline:-8px}
 .ws-main{padding:20px 16px 0}
 .ws-title{font-size:24px}
 .ws-bar{flex-wrap:wrap;gap:8px 16px}
 .ws-seg{padding:10px 10px 10px 22px}
 .ws-seg::before{left:10px}
 .ws-text{font-size:15px}
 .ws-summary{padding:22px 20px}
 .code{border-radius:16px;margin-inline:-8px}
 .code-name{margin-left:0;width:100%;order:3}
 .code-body{font-size:12px}
 .code-line{padding:0 16px 0 44px}
 .code-line::before{width:28px}
}

@media(prefers-reduced-motion:reduce){.ws-track span{transition:none}}

/* Dark: the demo follows the web app's dark theme, a charcoal panel one step above the page. */
@media(prefers-color-scheme:dark){
 .ui-shot{background:#1e1e1f}
 /* The film and source tiles were recorded light and are nearly greyscale; inverting the tone keeps their hues. */
 .film .motion-stage video,.source-tile>.ui-shot{filter:invert(.9) hue-rotate(180deg) saturate(.55)}
 .film .motion-stage{background:#1f1f20;box-shadow:0 0 0 1px #ffffff12}
 .films-tab{color:#85868a}
 .ws{background:#1d1e21;box-shadow:0 0 0 1px #ffffff12}
 .ws-side,.ws-summary{background:#212225}
 .ws-avatars span{background:#3a3b40;box-shadow:0 0 0 2px #212225}
 .ws-item:hover,.ws-check:hover{background:#2a2b2e}
 .ws-item.is-active{background:#2e2f33;box-shadow:none}
 .ws-tag{background:#3a3b40;color:#ececea}
 .ws-player,.ws-search{background:#26272a}
 .ws-track{background:#3a3b40}
 .ws-speaker-0{--rule:#8cc4a6}.ws-speaker-1{--rule:#dcae63}.ws-speaker-2{--rule:#8db5da}.ws-speaker-3{--rule:#bba0d6}
 .ws mark{background:#5a4a1c}
 .ws-pro{box-shadow:inset 0 0 0 1px #4c4d51}
 .ws-points{color:#bdbec1}
 .ws-box{box-shadow:inset 0 0 0 1.2px #8a8b8f}
 .ws-check.is-done .ws-box{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161719' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/9px no-repeat}
 .code{background:#1d1e21;box-shadow:0 0 0 1px #ffffff12}
 .code-bar{background:#232427}
 .device-art>.shot-phone{box-shadow:0 0 0 4px #3a3b40,0 20px 40px -16px #00000099}
}
@media(prefers-color-scheme:dark) and (max-width:600px){
 .device-art>.shot-phone{box-shadow:0 0 0 3px #3a3b40,0 12px 24px -10px #00000099}
}