/* finesse · component: desktop-story · register=brand
 * Product geometry and neutral monitor surfaces: src/components/Orb.vue, src/styles.css. */
.desktop-story {
  --desktop-bg:#191919; --desktop-panel:#232323; --desktop-surface:#202020;
  --desktop-ink:#e8e8e8; --desktop-muted:#a8a8a8; --desktop-line:#ffffff16;
  --desktop-accent:#a68cff; --desktop-memory:#5b9bd8; --desktop-cpu:#3db3a0;
  --desktop-green:#6fc492; --desktop-focus:#b8a5ff;
  --desktop-ease:cubic-bezier(.23,1,.32,1); --desktop-fast:120ms; --desktop-med:200ms;
  --desktop-radius:22px; --desktop-gloss:linear-gradient(160deg,#ffffff0c,transparent 48%,#19191924);
  --desktop-fs-tiny:10px; --desktop-fs-small:12px; --desktop-fs-base:13px; --desktop-fs-large:18px;
  --desktop-sp-1:4px; --desktop-sp-2:8px; --desktop-sp-3:12px; --desktop-sp-4:16px; --desktop-sp-6:24px;
}
.desktop-story *, .desktop-story *::before, .desktop-story *::after { box-sizing:border-box; }
.desktop-story [hidden] { display:none !important; }
.desktop-story button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.desktop-story button:focus-visible, .desktop-story [role="button"]:focus-visible { outline:2px solid var(--desktop-focus); outline-offset:3px; }
.desktop-story__stage { position:relative; min-width:0; height:610px; overflow:clip; border:1px solid var(--desktop-line); border-radius:16px; color:var(--desktop-ink); background:#101013; isolation:isolate; }
.desktop-story__camera { position:absolute; inset:0; transform-origin:55% 44%; }
.desktop-story__desktop-bar { height:42px; display:flex; align-items:center; justify-content:space-between; gap:var(--desktop-sp-3); padding:0 var(--desktop-sp-6); background:#17171b; border-bottom:1px solid var(--desktop-line); font-size:var(--desktop-fs-small); color:var(--desktop-muted); }
.desktop-story__desktop-bar > span:first-child { display:flex; align-items:center; gap:var(--desktop-sp-2); color:var(--desktop-ink); }
.desktop-story__desktop-bar b { color:#bea6f0; font-size:var(--desktop-fs-base); letter-spacing:-.06em; }
.desktop-story__demo-label { color:#c2b5e3; letter-spacing:.08em; }
.desktop-story__ae { position:absolute; inset:54px 14px 63px; overflow:hidden; border:1px solid #ffffff13; border-radius:7px; background:#202023; color:#b6b5bd; font-size:var(--desktop-fs-tiny); }
.desktop-story__ae-tools { height:30px; display:flex; justify-content:space-between; align-items:center; padding:0 var(--desktop-sp-3); border-bottom:1px solid #111114; }
.desktop-story__ae-body { display:grid; grid-template-columns:148px minmax(0,1fr) 122px; grid-template-rows:minmax(0,1fr); min-height:0; height:calc(100% - 156px); gap:1px; background:#111114; }
.desktop-story__project, .desktop-story__composition, .desktop-story__effects { min-width:0; background:#202023; }
.desktop-story__panel-title { height:30px; display:flex; justify-content:space-between; align-items:center; padding:0 var(--desktop-sp-3); border-bottom:1px solid #ffffff0b; }
.desktop-story__project-thumb { display:grid; place-items:center; margin:var(--desktop-sp-3); height:70px; background:#303044; color:#d6d2e9; font-size:32px; }
.desktop-story__project > strong, .desktop-story__project > span { display:block; padding:0 var(--desktop-sp-3); margin-bottom:var(--desktop-sp-2); white-space:nowrap; font-weight:400; }
.desktop-story__project > span { color:#98989f; }
.desktop-story__file { padding:var(--desktop-sp-2) var(--desktop-sp-3); border-block:1px solid #ffffff05; }
.desktop-story__file.is-selected { color:#d6c9fb; background:#7772a029; }
.desktop-story__composition { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.desktop-story__art-frame { position:relative; min-height:0; flex:1; overflow:hidden; background:#121215; }
.desktop-story__art { position:absolute; inset:0; display:block; width:100%; height:100%; }
.desktop-story__comp-footer { flex:none; display:flex; justify-content:space-between; gap:var(--desktop-sp-2); padding:var(--desktop-sp-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.desktop-story__effects > span { display:block; margin:var(--desktop-sp-2); padding:var(--desktop-sp-1) var(--desktop-sp-2); background:#161619; color:#8e8e96; }
.desktop-story__effects p { margin:var(--desktop-sp-3); color:#aaa9b2; }
.desktop-story__timeline { height:126px; border-top:1px solid #111114; }
.desktop-story__timeline-head { height:28px; display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; padding:0 var(--desktop-sp-3); border-bottom:1px solid #ffffff0b; white-space:nowrap; overflow:hidden; }
.desktop-story__timeline-head > span:last-child { color:#92929b; }
.desktop-story__tracks { display:grid; grid-template-columns:180px minmax(0,1fr); height:96px; }
.desktop-story__track-names, .desktop-story__track-bars { display:flex; flex-direction:column; justify-content:space-evenly; }
.desktop-story__track-names { padding:0 var(--desktop-sp-3); border-right:1px solid #ffffff10; }
.desktop-story__track-bars { position:relative; padding:0 var(--desktop-sp-3); background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffff0b calc(25% - 1px),#ffffff0b 25%); }
.desktop-story__track-bars > i { height:12px; border:1px solid #9182bf66; background:#77639970; border-radius:2px; }
.desktop-story__track-bars > i:nth-child(2) { margin-left:4%; background:#719b8970; border-color:#8dbba266; }
.desktop-story__track-bars > i:nth-child(3) { margin-left:12%; background:#7887ae70; border-color:#98a7ce66; }
.desktop-story__track-bars > i:nth-child(4) { background:#7a788470; border-color:#9f9dab55; }
.desktop-story__playhead { position:absolute; inset:0 auto 0 0; width:1px; background:#a895dc; }
.desktop-story__playhead::before { content:''; position:absolute; top:0; left:-4px; width:9px; height:7px; background:#a895dc; clip-path:polygon(0 0,100% 0,50% 100%); }
.desktop-story__floating { position:absolute; inset:42px 0 64px; pointer-events:none; }
.desktop-story__floating > * { pointer-events:auto; }
.desktop-story__orb-group { position:absolute; left:calc(100% - 116px); top:292px; width:80px; height:112px; display:flex; flex-direction:column; align-items:center; touch-action:none; }
.desktop-story__orb { position:relative; width:72px; height:72px; flex:none; border-radius:50%; background:var(--desktop-gloss),var(--desktop-surface); box-shadow:inset 0 0 0 1px #ffffff22,0 6px 16px #0006; user-select:none; }
.desktop-story[data-enhanced] .desktop-story__orb { cursor:grab; touch-action:none; }
.desktop-story__orb.is-dragging { cursor:grabbing; }
.desktop-story__orb::before { content:''; position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle at 42% 28%,#2e2e2e,#191919 78%); box-shadow:inset 0 1px 2px #000a,0 1px 0 #ffffff28; }
.desktop-story__orb > svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.desktop-story__orb-rim { fill:none; stroke:#ffffff3d; stroke-width:1; }
.desktop-story__orb-track { fill:none; stroke:#454545; stroke-width:3; }
.desktop-story__orb-value { fill:none; stroke:var(--desktop-memory); stroke-width:5; }
.desktop-story__orb > img { position:absolute; inset:24%; width:52%; height:52%; object-fit:contain; pointer-events:none; }
.desktop-story__orb-caption { font-size:var(--desktop-fs-small); color:#dedce5; margin-top:var(--desktop-sp-2); text-shadow:0 1px 3px #000; white-space:nowrap; pointer-events:none; }
.desktop-story__orb-menu { position:absolute; top:32px; right:-14px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#e8e8e8; font-size:20px !important; line-height:1; isolation:isolate; }
.desktop-story__orb-menu::before { content:''; position:absolute; inset:9px; z-index:-1; border:1px solid #ffffff22; border-radius:50%; background:#2e2d32; }
.desktop-story__island { position:absolute; left:50%; right:auto; top:28px; translate:-50% 0; width:360px; max-width:calc(100% - 24px); border-radius:var(--desktop-radius); background:var(--desktop-gloss),var(--desktop-surface); box-shadow:inset 0 0 0 1px #ffffff20,inset 0 1px 0 #ffffff24,0 5px 14px #0006; color:var(--desktop-ink); }
.desktop-story[data-enhanced] .desktop-story__island { width:304px; }
.desktop-story[data-enhanced] .desktop-story__island[data-open="true"] { width:360px; }
.desktop-story__island-head { position:relative; display:flex; align-items:center; gap:10px; width:100%; height:44px; padding:0 14px; border:0; border-radius:var(--desktop-radius); background:none; color:inherit; text-align:left; }
.desktop-story__island-logo { display:block; flex:none; width:22px; height:22px; }
.desktop-story__identity { flex:1; min-width:0; position:relative; padding-right:var(--desktop-sp-2); }
.desktop-story__project-name { display:block; overflow:hidden; white-space:nowrap; font-size:var(--desktop-fs-small); font-weight:600; line-height:1.5; letter-spacing:-.015em; }
.desktop-story__project-name > span { display:block; width:max-content; }
.desktop-story__status-dot { position:absolute; top:0; right:0; width:5px; height:5px; border-radius:50%; background:var(--desktop-green); box-shadow:0 0 0 2px var(--desktop-surface); transition:opacity var(--desktop-fast),transform var(--desktop-med) var(--desktop-ease); }
.desktop-story__rings { display:flex; justify-content:flex-end; flex:none; width:68px; gap:var(--desktop-sp-1); transform-origin:right center; transition:opacity var(--desktop-fast),transform var(--desktop-med) var(--desktop-ease); }
.desktop-story__rings > svg { width:20px; height:20px; flex:none; }
.desktop-story__rings > svg > .desktop-story__orb-rim { fill:none; stroke:#ffffff3d; stroke-width:1; }
.desktop-story__rings > svg > .desktop-story__orb-track { fill:none; stroke:#454545; stroke-width:3; }
.desktop-story__rings > svg > circle:last-of-type { fill:currentColor; }
.desktop-story__caret { display:none; position:absolute; right:18px; font-size:20px; color:var(--desktop-muted); }
.desktop-story__island-body { overflow:hidden; border-radius:0 0 var(--desktop-radius) var(--desktop-radius); }
.desktop-story__island-content { padding:0 var(--desktop-sp-3) var(--desktop-sp-3); }
.desktop-story__context { display:flex; align-items:center; justify-content:space-between; gap:var(--desktop-sp-2); min-height:42px; padding:0 var(--desktop-sp-1); }
.desktop-story__context > div { min-width:0; }
.desktop-story__context strong { display:block; font-size:var(--desktop-fs-small); font-weight:600; }
.desktop-story__context > div > span { display:block; color:var(--desktop-muted); font-size:var(--desktop-fs-tiny); line-height:1.6; }
.desktop-story__phase { color:var(--desktop-green); background:#6fc49212; border:1px solid #6fc49230; border-radius:999px; padding:2px 6px; font-size:var(--desktop-fs-tiny); white-space:nowrap; }
.desktop-story__metrics { margin:var(--desktop-sp-1) 0 var(--desktop-sp-2); padding:var(--desktop-sp-1) 10px; background:#171717d6; border:1px solid #ffffff08; border-radius:12px; }
.desktop-story__metrics > div { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:43px; }
.desktop-story__metrics > div + div { border-top:1px solid #ffffff09; }
.desktop-story__dial { position:relative; display:grid; place-items:center; width:32px; height:32px; color:var(--metric-color); font-size:14px; }
.desktop-story__dial::before { content:''; position:absolute; inset:2px; border-radius:50%; background:conic-gradient(from 210deg,currentColor 0deg var(--metric-arc),#454545 var(--metric-arc) 300deg,transparent 300deg); mask-image:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px)); }
.desktop-story__metrics dt { color:var(--desktop-muted); font-size:var(--desktop-fs-small); }
.desktop-story__metrics dt > small { display:block; margin-top:2px; color:#aaa; font-size:var(--desktop-fs-tiny); white-space:nowrap; }
.desktop-story__metrics dd { margin:0; font-size:var(--desktop-fs-large); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.desktop-story__metrics dd > small { color:var(--desktop-muted); font-size:var(--desktop-fs-tiny); font-weight:400; margin-left:2px; }
.desktop-story__island-actions { display:flex; align-items:center; justify-content:space-between; gap:var(--desktop-sp-2); }
.desktop-story__island-actions > span { font-size:var(--desktop-fs-tiny); color:var(--desktop-muted); }
.desktop-story__capture { display:flex; justify-content:center; align-items:center; gap:6px; height:44px; min-width:44px; padding:0 var(--desktop-sp-2); border:1px solid #ffffff14; border-radius:8px; color:var(--desktop-ink); background:#ffffff05; font-size:var(--desktop-fs-small) !important; }
.desktop-story__capture > svg { width:16px; height:16px; flex:none; }
.desktop-story__compact-camera { position:absolute; top:0; right:80px; display:flex; align-items:center; gap:0; }
.desktop-story__compact-camera .desktop-story__capture { border:0; border-radius:0; padding:0; width:36px; min-width:36px; background:none; }
.desktop-story__compact-camera .desktop-story__capture > span { display:none; }
.desktop-story[data-enhanced] .desktop-story__island:not([data-open="true"]) .desktop-story__island-head { width:calc(100% - 152px); padding-right:6px; }
.desktop-story__island > .desktop-story__rings { position:absolute; top:12px; right:14px; }
.desktop-story[data-enhanced] .desktop-story__island:not([data-open="true"]) .desktop-story__island-body { height:0; visibility:hidden; }
.desktop-story__island[data-open="true"] .desktop-story__rings, .desktop-story:not([data-enhanced]) .desktop-story__rings { position:absolute; right:14px; opacity:0; transform:translateX(6px) scale(.9); pointer-events:none; }
.desktop-story__island[data-open="true"] .desktop-story__status-dot, .desktop-story:not([data-enhanced]) .desktop-story__status-dot { opacity:0; transform:scale(.25); }
.desktop-story__island[data-open="true"] .desktop-story__identity, .desktop-story:not([data-enhanced]) .desktop-story__identity { margin-right:18px; }
.desktop-story__island[data-open="true"] .desktop-story__caret { display:block; }
.desktop-story__menu { position:absolute; z-index:5; width:244px; max-width:calc(100% - 16px); max-height:calc(100% - 16px); overflow:auto; padding:var(--desktop-sp-1); border:1px solid #ffffff24; border-radius:7px; background:#272729; box-shadow:0 10px 30px #0009; }
.desktop-story__menu-heading { display:block; padding:var(--desktop-sp-2); font-size:var(--desktop-fs-tiny); color:var(--desktop-muted); }
.desktop-story__menu > button { display:flex; justify-content:flex-start; align-items:center; gap:var(--desktop-sp-2); width:100%; min-height:32px; padding:var(--desktop-sp-2); border:0; border-radius:4px; color:var(--desktop-ink); background:none; text-align:left; font-size:var(--desktop-fs-small); }
.desktop-story__menu > button[aria-checked="true"] { color:var(--desktop-ink); }
.desktop-story__menu > button > span { color:inherit; }
.desktop-story__menu-divider { height:1px; margin:var(--desktop-sp-1); background:var(--desktop-line); }
.desktop-story__capture-preview { position:absolute; left:var(--desktop-sp-6); bottom:var(--desktop-sp-4); z-index:4; width:300px; max-width:calc(100% - 32px); padding:var(--desktop-sp-3); border:1px solid #ffffff22; border-radius:12px; background:#242329; box-shadow:0 8px 22px #0008; }
.desktop-story__capture-preview > div:first-child { display:flex; align-items:center; justify-content:space-between; font-size:var(--desktop-fs-small); }
.desktop-story__capture-preview button { width:44px; height:44px; margin-top:-8px; margin-right:-8px; border:0; border-radius:6px; color:var(--desktop-ink); background:none; font-size:22px; }
.desktop-story__capture-preview p { color:var(--desktop-muted); font-size:var(--desktop-fs-tiny); margin:var(--desktop-sp-2) 0 0; }
.desktop-story__capture-preview .desktop-story__art { position:static; width:100%; height:auto; }
.desktop-story__transport { position:absolute; inset:auto 0 0; min-height:64px; display:flex; align-items:center; gap:var(--desktop-sp-3); padding:var(--desktop-sp-2) var(--desktop-sp-6); border-top:1px solid #ffffff08; background:#17171b; }
.desktop-story__play { display:flex; align-items:center; justify-content:center; gap:var(--desktop-sp-2); flex:none; min-height:44px; padding:0 var(--desktop-sp-3); border:1px solid #bca4ff45; border-radius:8px; color:#e3d8ff; background:#a68cff13; font-size:var(--desktop-fs-small) !important; white-space:nowrap; }
.desktop-story__play > svg { width:15px; height:15px; }
.desktop-story__transport > span { color:var(--desktop-muted); font-size:var(--desktop-fs-small); }
.desktop-story__transport .desktop-story__interaction-hint { margin-left:auto; }
.desktop-story__caption { max-width:82ch; }
.desktop-story__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.desktop-story[data-instant] *, .desktop-story[data-instant] *::before { transition:none !important; }
@media (hover:hover) and (pointer:fine) {
  .desktop-story__play:hover, .desktop-story__capture:hover, .desktop-story__menu > button:hover, .desktop-story__capture-preview button:hover { background:#ffffff0d; }
  .desktop-story__island-head:hover { background:#ffffff04; }
  .desktop-story__orb:hover { box-shadow:inset 0 0 0 1px #ffffff44,0 6px 16px #0006; }
}
.desktop-story button:active { background-color:#ffffff12; }
@media (max-width:900px) {
  .desktop-story__ae-body { grid-template-columns:108px minmax(0,1fr); }
  .desktop-story__effects { display:none; }
  .desktop-story__island { right:auto; }
  .desktop-story__orb-group { left:calc(100% - 116px); top:292px; }
  .desktop-story__transport .desktop-story__interaction-hint { display:none; }
}
@media (max-width:600px) {
  .desktop-story__stage { height:656px; border-radius:12px; }
  .desktop-story__desktop-bar { padding-inline:var(--desktop-sp-3); font-size:var(--desktop-fs-small); }
  .desktop-story__desktop-bar > span:nth-child(2) { display:none; }
  .desktop-story__ae { inset:54px 8px 106px; }
  .desktop-story__ae-tools > span:last-child, .desktop-story__project { display:none; }
  .desktop-story__ae-body { display:block; height:calc(100% - 140px); }
  .desktop-story__composition { height:100%; }
  .desktop-story__art-frame { padding:0; }
  .desktop-story__comp-footer > span:last-child { display:none; }
  .desktop-story__timeline { height:110px; }
  .desktop-story__timeline-head, .desktop-story__tracks { grid-template-columns:108px minmax(0,1fr); }
  .desktop-story__tracks { height:80px; }
  .desktop-story__floating { bottom:106px; }
  .desktop-story__island { top:28px; right:auto; }
  .desktop-story__orb-group { left:calc(100% - 100px); top:334px; }
  .desktop-story__transport { min-height:106px; padding:var(--desktop-sp-3); flex-wrap:wrap; align-content:center; gap:var(--desktop-sp-2); }
  .desktop-story__transport > span { flex:1 0 100%; }
  .desktop-story__capture-preview { left:var(--desktop-sp-4); bottom:var(--desktop-sp-4); }
  .desktop-story__capture-preview .desktop-story__art { width:100%; }
}
@media (max-width:359px) {
  .desktop-story__island-head { padding-inline:10px; gap:var(--desktop-sp-2); }
  .desktop-story__island-logo { width:18px; height:18px; }
  .desktop-story__rings { width:62px; gap:var(--desktop-sp-1); }
  .desktop-story__rings > svg { width:18px; height:18px; }
  .desktop-story__compact-camera { right:68px; }
  .desktop-story__metrics > div { gap:6px; grid-template-columns:30px minmax(0,1fr) auto; }
  .desktop-story__metrics { padding-inline:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .desktop-story *, .desktop-story *::before, .desktop-story *::after { animation:none !important; transition:none !important; }
  .desktop-story__camera { transform:none !important; }
}

/* The assistant is one window. Controls below are the webpage demonstration harness. */
.desktop-story__toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin:0 0 1.25rem; font-size:.75rem; }
.desktop-story__modes { display:flex; padding:4px; border:1px solid #ffffff1c; border-radius:999px; background:#ffffff05; }
.desktop-story__modes button { min-height:36px; min-width:76px; padding:.45rem .9rem; border:0; border-radius:999px; background:transparent; color:#a6a7b1; font-size:.75rem; }
.desktop-story__modes button[aria-pressed="true"] { background:#ede9ff; color:#252332; box-shadow:0 2px 8px #0004; }
.desktop-story__sample-label { display:flex; align-items:center; gap:.45rem; color:#aeb1bd; margin-left:auto; }
.desktop-story__sample-label i { width:5px; height:5px; border-radius:50%; background:#79c4a3; }
.desktop-story__sample-toggle { min-height:36px; padding:.4rem .7rem; border:1px solid #ffffff20; border-radius:6px; color:#dddde4; background:#ffffff06; font-size:.75rem; }
.desktop-story__quick-menu { min-height:40px; padding:.5rem .8rem; border:1px solid #ffffff24; background:#ffffff06; border-radius:7px; color:#dedee5; font-size:12px!important; margin-left:auto; }
.desktop-story__quick-menu > span { color:#90919a; margin-left:.5rem; }
.desktop-story__quick-menu:disabled { opacity:.4; cursor:default; }
.desktop-story__keys { margin:1rem 0 .5rem; max-width:90ch; color:#c1bccf; font-size:.75rem; line-height:1.9; }
.desktop-story__orb-caption b { font-weight:500; font-variant-numeric:tabular-nums; }
.desktop-story__orb[data-alarm="true"] { box-shadow:inset 0 0 0 1px #efb967,0 0 0 4px #efb96718,0 8px 30px #0009; }
.desktop-story[data-sample-phase="rendering"] .desktop-story__status-dot { background:#ddb472; }
.desktop-story[data-sample-phase="rendering"] .desktop-story__phase { color:#ddb472; background:#ddb47212; border-color:#ddb47230; }
.desktop-story__menu-check { display:inline-block; width:12px; flex:none; }
.desktop-story__menu-arrow { margin-left:auto; }
.desktop-story__menu > button:disabled { color:#777780; cursor:default; }
.desktop-story__menu > button:focus-visible { outline-offset:-2px; background:#ffffff16; }
.desktop-story__island-actions { gap:4px; flex-wrap:wrap; }
.desktop-story__island-actions > button:not(.desktop-story__capture) { border:1px solid #ffffff18; min-height:36px; padding:0 8px; border-radius:7px; background:#ffffff05; color:#d8d8dd; font-size:11px; }
.desktop-story__island-actions .desktop-story__capture { min-height:36px; height:36px; font-size:11px!important; }
.desktop-story__action-panel { position:fixed; margin:0; color:var(--desktop-ink); z-index:6; inset:50% auto auto 50%; translate:-50% -50%; width:min(90vw,580px); max-height:calc(100vh - 48px); overflow:auto; border:1px solid #ffffff2c; border-radius:12px; padding:18px; background:#222225; box-shadow:0 20px 80px #000c; }
.desktop-story__action-panel::backdrop { background:#08090bb3; }
.desktop-story__action-panel > div { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
.desktop-story__action-panel > div button { border:0; background:transparent; color:#ccc; width:40px; height:40px; font-size:24px; }
.desktop-story__action-panel p { font-size:12px; color:#aaaab4; line-height:1.8; margin:0 0 14px; }
.desktop-story__action-panel img { display:block; width:100%; height:auto; border-radius:6px; }
@media(max-width:600px) {
 .desktop-story__sample-label { margin-left:0; font-size:.65rem; }
 .desktop-story__toolbar { gap:.65rem; }
 .desktop-story__quick-menu { margin-left:0; }
 .desktop-story__transport > [data-desktop-transport-label] { order:3; }
 .desktop-story__menu > button { min-height:36px; }
}

/* One playback control follows the island, preserving its controller and progress. */
.desktop-story__compact-camera .desktop-story__play { width:36px; min-width:36px; height:44px; min-height:44px; padding:0; border:0; border-radius:0; background:none; }
.desktop-story__compact-camera .desktop-story__play > span,.desktop-story__preview-control .desktop-story__play > span { display:none; }
.desktop-story__preview-control { display:flex; margin-left:auto; }
.desktop-story__preview-control .desktop-story__play { width:36px; height:36px; min-height:36px; padding:0; border:1px solid #ffffff18; border-radius:50%; background:#ffffff05; }
.desktop-story__play[aria-pressed="true"] { color:#cbbcff; background:#9580ff14; }
.desktop-story__context .desktop-story__phase { flex:none; }