/* Style C scenes (cl-20261108-53, -54): app screens rebuilt from sample mode, a hand and marker notes drawn by
   assets/js/scenes.js. CLS 0: fixed heights; the loop changes only opacity, transform, clip-path and stroke offsets.
   Without .sc-live every part but .sc-tmp shows, so the markup is the still. No gradients, floating shadows or springs. */

/* ---------- the rows ---------- */
.fx{--fx-ink:var(--ink,#17181c);--fx-ink-2:var(--ink-2,#3c3f46);--fx-ink-3:var(--ink-3,#5b606b);--fx-line:var(--line,#e7e8ec);
  --fx-acc:var(--accent,var(--sage,#2f44d4));--fx-soft:var(--accent-soft,var(--sage-soft,#eef0fc));--fx-acc-line:var(--accent-line,var(--sage-line,#d7ddf8));
  --fx-wash:var(--wash,var(--rail,#f5f6fc))}
.fx-head{text-align:center;max-width:600px;margin:0 auto}
.fx-head h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:30px;line-height:1.14;margin:8px 0 0}
.fx-list{display:grid;gap:64px;margin-top:44px}
.fx-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center}
.fx-row:nth-child(even){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.fx-row:nth-child(even) .fx-copy{order:2}
.fx-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--fx-soft);border:1px solid var(--fx-acc-line);color:var(--fx-acc)}
.fx-ic svg{width:22px;height:22px}
.fx-copy h3{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:26px;line-height:1.15;margin:16px 0 0;color:var(--fx-ink)}
.fx-copy p{font-size:15.5px;color:var(--fx-ink-3);margin:10px 0 0;max-width:440px}
.fx-ticks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.fx-ticks li{position:relative;display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--fx-ink-2)}
/* the tick is drawn (an empty content string over a mask), so screen readers say nothing for it */
.fx-ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--fx-soft)}
.fx-ticks li::after{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;background:var(--fx-acc);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.4 10.3l2.4 2.4 4.8-5.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.fx-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:15px;font-weight:600;color:var(--fx-acc);text-decoration:underline;text-decoration-color:var(--fx-acc-line);text-underline-offset:3px}
.fx-cta:hover{text-decoration-color:currentColor}
@media(max-width:760px){
  .fx-list{gap:52px;margin-top:32px}
  .fx-row,.fx-row:nth-child(even){grid-template-columns:minmax(0,1fr);gap:22px}
  .fx-row:nth-child(even) .fx-copy{order:0}
  .fx-copy h3{font-size:23px}
}

/* ---------- the scene box ---------- */
.sc{position:relative;container-type:inline-size;border-radius:20px;border:1px solid var(--fx-line);overflow:hidden;
  background:radial-gradient(circle at 1px 1px,rgba(23,24,28,.11) 1px,transparent 1.2px) 0 0/16px 16px,var(--fx-wash);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12px;line-height:1.4;color:#17181c;text-align:left;letter-spacing:0;
  --navy:#142774;--blue:#2f44d4;--blue-soft:#eef0fc;--paper:#faf9f5;--pline:#e6e2d8;--ok:#1f7a52;--ok-bg:#eaf6ef;--ok-line:#bfe3cf;
  --amb:#7a5710;--amb-bg:#fdf6ec;--amb-line:#e9d4a9;--teal:#12a69e;--teal-bg:#e3f7f4;--teal-ink:#0b5f5a;--mute:#5b6170;--ln:#e7e8ec;
  --sage:#2c4a3e;--sage-soft:#e7efe9;--cream:#fff8f0;--ease:cubic-bezier(.22,.7,.2,1)}
.sc-stage{position:relative;height:400px}
.sc.desk .sc-stage{height:440px}
.sc.desk.tall .sc-stage{height:452px}
.sc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sc-btn{position:absolute;right:12px;bottom:12px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:#17181c;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.86}
.sc-btn:hover{opacity:1}
.sc-btn:focus-visible{outline:2px solid var(--fx-acc);outline-offset:2px;opacity:1}
.sc-btn svg{width:16px;height:16px}
.sc-btn[hidden]{display:none}
.sc-serif,.sc-t,.sc-title,.sc-h{font-family:Georgia,"Iowan Old Style",serif;font-weight:400;letter-spacing:-.01em}

/* ---------- the phone: the real Aura Field screen (and Compass, below) ---------- */
.sc-ph{position:absolute;top:13px;left:max(16px,calc(50% - 214px));width:236px;height:374px;padding:7px;box-sizing:border-box;border-radius:38px;background:#111317}
.sc-ps{position:relative;height:100%;border-radius:31px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.sc-ps::before{content:"";position:absolute;top:8px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:10px;background:#111317}
.sc-pbar{flex:none;display:flex;align-items:center;justify-content:space-between;height:62px;padding:28px 12px 0;box-sizing:border-box}
.sc-brand{display:flex;align-items:center;gap:6px;font-family:Georgia,serif;font-size:16px;color:var(--navy)}
.sc-brand::before{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23c9ced6' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M11 29h77M11 49h77M11 69h77M29 11v77M49 11v77M69 11v77'/%3E%3C/g%3E%3Ccircle cx='29' cy='29' r='11' fill='%2300d7c1'/%3E%3Ccircle cx='49' cy='49' r='11' fill='%23111317'/%3E%3C/svg%3E") center/contain no-repeat}
.sc-pbody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:2px 11px 0}
.sc-back{font-size:11px;font-weight:600;color:var(--blue)}
.sc-title{font-size:19px;line-height:1.15;color:var(--navy)}
.sc-card{display:grid;gap:2px;padding:9px 11px;border-radius:14px;background:#fff;border:1px solid var(--pline)}
.sc-card.sc-hl{border-color:var(--blue)}
.sc-t{font-size:14.5px;line-height:1.2;color:var(--navy)}
.sc-s{font-size:10.5px;color:var(--mute)}
.sc-on{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ok)}
.sc-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.sc-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-box{display:block;padding:3px 8px;border:1px solid var(--pline);border-radius:9px}
.sc-ln{display:block;height:20px;font-size:11px;line-height:20px;white-space:nowrap;overflow:hidden}
.sc-type{display:inline-block;white-space:nowrap}
.sc-tabs{flex:none;display:flex;justify-content:space-around;align-items:center;height:44px;border-top:1px solid var(--pline);background:#fff;font-size:9px;color:var(--mute)}
.sc-tabs i{display:block;width:16px;height:16px;background:currentColor;mask:var(--m) center/contain no-repeat}
.sc-tabs b{display:grid;justify-items:center;gap:2px;font-weight:600;color:var(--blue)}
/* the five Aura Field tab icons, drawn once (Shifts, Meds, Journal, Docs, Profile) */
.i-sh{--m: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.7' stroke-linecap='round'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E")}
.i-md{--m: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.7'%3E%3Crect x='3.5' y='8.5' width='17' height='7' rx='3.5'/%3E%3Cpath d='M12 8.5v7'/%3E%3C/svg%3E")}
.i-jn{--m: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.7' stroke-linejoin='round'%3E%3Cpath d='M5.5 18.5l1-4L16 5l3 3-9.5 9.5z'/%3E%3C/svg%3E")}
.i-dc{--m: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.7' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5l4 4V20.5H7z'/%3E%3Cpath d='M10 12.5h5M10 16h5'/%3E%3C/svg%3E")}
.i-pr{--m: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.7'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c1-4 4-5.5 7-5.5s6 1.5 7 5.5'/%3E%3C/svg%3E")}
/* pills */
.sc-net{position:relative;width:112px;height:20px}
.sc-net>*{position:absolute;right:0;top:0}
.sc-pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;box-sizing:border-box;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap;background:#fff;border:1px solid var(--pline);color:#17181c}
.sc-pill.ok{background:var(--teal-bg);border-color:#bfe7e1;color:var(--teal-ink)}
.sc-pill.warn{background:var(--amb-bg);border-color:var(--amb-line);color:var(--amb)}
.sc-x{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mute)}
.sc-gd{width:7px;height:7px;border-radius:50%;background:var(--teal)}
/* buttons drawn as part of a screen (spans, not controls) */
.sc-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 13px;box-sizing:border-box;border-radius:9px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--blue);color:#fff;transition:transform .15s var(--ease),filter .15s}
.sc-b.ghost{background:#fff;color:#17181c;border:1px solid var(--pline)}
.sc-b.sage{background:var(--sage)}
.sc-b.wide{display:flex}
/* two or more states drawn in one place: every child sits in the same grid cell */
.sc-swap{display:grid;align-items:center;justify-items:start}
.sc-swap>*{grid-area:1/1}
.sc-swap.end{justify-items:end}
/* the on-screen tick, teal, drawn once as a mask; it draws itself left to right */
.sc-tick{flex:none;position:relative;width:15px;height:15px;border-radius:50%;background:var(--teal)}
.sc-tick::after{content:"";position:absolute;inset:0;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sc-rec{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--teal-ink)}
.sc-q{display:grid;gap:3px}
.sc-in{display:flex;align-items:center;height:27px;padding:0 9px;box-sizing:border-box;border-radius:8px;border:1px solid var(--pline);background:#fff;font-size:11px;white-space:nowrap;overflow:hidden}
.sc-msg{font-size:11px;line-height:1.45}
.sc-act{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:5px}
.sc-swap.sc-act{display:grid;justify-content:stretch}
.sc-dim{opacity:.62}
.sc-strong{font-size:12px;font-weight:600}
.sc-skel{display:block;height:7px;border-radius:4px;background:#e5e7ec}
.sc-skel+.sc-skel{width:86%}.sc-skel+.sc-skel+.sc-skel{width:62%}

/* ---------- the desktop window: the real Aura OS shell ---------- */
.sc-win{position:absolute;left:14px;right:14px;top:14px;height:324px;border-radius:12px;border:1px solid #d9dbe1;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.sc-win.tall{height:372px}
.sc-win.tall .sc-main{gap:5px}
.sc-win.tall .sc-h{font-size:19px}
.sc-chrome{flex:none;display:flex;align-items:center;gap:5px;height:26px;padding:0 11px;background:#f3f4f6;border-bottom:1px solid var(--ln)}
.sc-chrome i{width:8px;height:8px;border-radius:50%;background:#e2e4e9;box-shadow:inset 0 0 0 1px #c9ced6}
.sc-chrome span{margin-left:8px;font-size:10.5px;color:var(--mute)}
.sc-app{flex:1;min-height:0;display:flex}
.sc-side{flex:none;width:112px;display:flex;flex-direction:column;padding:11px 7px 8px;background:#fafafb;border-right:1px solid var(--ln);font-size:11px}
.sc-side b{font-size:12px;font-weight:600;padding:0 6px 6px}
.sc-sec{display:block;height:14px;padding:8px 6px 0;box-sizing:border-box}
.sc-sec::before{content:"";display:block;height:4px;width:44%;border-radius:2px;background:#e7e8ec}
.sc-nav{display:block;height:21px;padding:8px 6px 0 20px;box-sizing:border-box;position:relative}
.sc-nav::before{content:"";position:absolute;left:7px;top:7px;width:7px;height:7px;border-radius:2px;box-shadow:inset 0 0 0 1.4px #b9bcc3}
.sc-nav::after{content:"";display:block;height:5px;width:66%;border-radius:3px;background:#eceef1}
.sc-nav:nth-child(3n)::after{width:50%}.sc-nav:nth-child(3n+1)::after{width:78%}
.sc-side .is-on{display:flex;align-items:center;gap:6px;margin:2px 0;padding:5px 7px;border-radius:7px;background:#17181c;color:#fff;font-weight:500;white-space:nowrap}
.sc-side .is-on::before{content:"";width:7px;height:7px;border-radius:2px;background:#fff}
.sc-me{display:flex;align-items:center;gap:6px;margin-top:auto;padding:4px 6px;border:1px solid var(--ln);border-radius:8px;background:#fff;font-size:10.5px;white-space:nowrap}
.sc-me i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:7.5px;font-weight:600}
.sc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:0 15px 10px}
.sc-top{flex:none;display:flex;align-items:center;justify-content:space-between;height:31px;margin:0 -15px 2px;padding:0 12px 0 15px;border-bottom:1px solid #f0f1f4;font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sc-top::after{content:"";width:118px;height:19px;border-radius:6px;border:1px solid var(--ln)}
.sc-h{font-size:21px;line-height:1.1;color:#17181c}
.sc-sub{font-size:10.5px;color:var(--mute);margin-top:-3px}
.sc-panel{display:grid;gap:7px;padding:10px 12px;border-radius:11px;border:1px solid var(--ln);background:#fff}
.sc-panel.amber{border-left:3px solid #e0a43a}
.sc-panel.note .sc-msg{line-height:1.6}
.sc-panel.note{background:var(--blue-soft);border-color:#d7ddf8}
.sc-tag{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;font-size:8.5px;font-weight:700;letter-spacing:.06em;background:#fdf0dc;color:var(--amb)}
.sc-name{font-size:12.5px;font-weight:600}
.sc-g6{display:flex;align-items:center;gap:6px;min-width:0}
.sc-field{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px;font-size:11px}
.sc-field>span:first-child{color:var(--mute)}
.sc-sel{display:flex;align-items:center;height:26px;padding:0 9px;box-sizing:border-box;border-radius:8px;border:1px solid #d9dbe1;background:#fff;white-space:nowrap;overflow:hidden}
.sc-sel.sc-swap{display:grid;justify-items:start}
.sc-ph-t{color:#9aa0aa}
.sc-track{display:block;height:6px;border-radius:3px;background:#eef0f3;overflow:hidden}
.sc-bar{display:block;height:100%;background:var(--teal);transform-origin:left center}
.sc-clock{display:grid;gap:3px;padding:8px 10px;border-radius:9px;background:#f6f7f9}
.sc-big{font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-count{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-ic{flex:none;width:18px;height:18px;border-radius:5px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:9px}
/* the import panel, after the approved prototype: pick the source, drop the export, every count matched */
.sc-sh{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600}
.sc-sh i{width:15px;height:15px;border-radius:50%;border:1px solid #8e949d;display:grid;place-items:center;font-style:normal;font-size:8.5px;color:var(--mute)}
.sc-step{display:grid;gap:5px;padding:6px 10px;border:1px solid var(--ln);border-radius:10px}
.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sc-tile{position:relative;display:flex;align-items:center;height:28px;padding:0 9px;box-sizing:border-box;border:1px solid var(--ln);border-radius:8px;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden}
.sc-tile .sc-sel-on{position:absolute;inset:-1px;border-radius:8px;box-shadow:inset 0 0 0 1.5px #17181c}
.sc-tile .sc-ck{position:absolute;right:7px;top:7px;width:13px;height:13px}
.sc-drop{display:flex;gap:8px;align-items:center}
.sc-zone{flex:1;min-width:0;height:28px;border:1.5px dashed #8e949d;border-radius:8px;box-sizing:border-box;display:grid;align-items:center;padding:0 9px;font-size:10.5px;color:var(--mute);white-space:nowrap;overflow:hidden}
.sc-zone>*{grid-area:1/1}
.sc-file{display:flex;align-items:center;gap:6px;color:#17181c;font-weight:500}
.sc-file::before{content:"";width:9px;height:11px;border:1.4px solid var(--mute);border-radius:2px}
.sc-sum{display:grid}
.sc-sr{display:grid;grid-template-columns:82px minmax(0,1fr) 92px 15px;align-items:center;gap:8px;height:19px;border-top:1px solid var(--ln);font-size:10.5px;white-space:nowrap}
.sc-sr:first-child{border-top:0}
.sc-sr>span:first-child{font-weight:500}
.sc-sr .sc-n{text-align:right;font-variant-numeric:tabular-nums}
.sc-sr .sc-count{text-align:right}
.sc-sr .sc-tick{width:13px;height:13px}
.sc-gap{display:inline-block}
.sc-done{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding-top:2px}

/* ---------- Compass: the family app, cream with sage, its nav along the top ---------- */
.sc-c .sc-ps{background:var(--cream)}
.sc-c .sc-ps::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sage)}
.sc-c .sc-title,.sc-c .sc-t{color:#17181c}
.sc-c .sc-card{border-color:#ebe4d8;border-radius:12px}
.sc-cnav{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:62px;padding:30px 8px 4px;box-sizing:border-box;border-bottom:1px solid #ebe4d8;font-size:8.5px;color:#5b6a62}
.sc-cnav span{display:grid;place-items:center;border-radius:7px;font-size:11px;line-height:1}
.sc-cnav .is-on{font-size:8.5px;background:var(--sage-soft);color:var(--sage);font-weight:600;white-space:nowrap}
.sc-who{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:12px;background:#fff;border:1px solid #ebe4d8}
.sc-who i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-style:normal;font-size:8.5px;font-weight:600}
.sc-c .sc-rec{color:var(--sage)}

/* ---------- the hand, the marker notes and the gold marks (drawn by scenes.js) ---------- */
.sc-cur{position:absolute;left:0;top:0;z-index:3;width:26px;height:29px;pointer-events:none;opacity:0;will-change:transform}
.sc-cur.finger{width:36px;height:41px}
.sc-cur svg{display:block;width:100%;height:100%}
.sc-ink{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.sc-margin{position:absolute;z-index:2;pointer-events:none}
.sc-ph~.sc-margin{left:calc(max(16px,50% - 214px) + 258px);right:12px;top:0;bottom:60px}
.sc.desk .sc-margin{left:22px;right:66px;top:auto;bottom:0;height:70px}
.sc.desk .sc-win.tall~.sc-margin{height:62px}
.sc.desk.top .sc-win{top:76px}
.sc.desk.top .sc-stage{height:460px}
.sc.desk.top .sc-margin{top:0;bottom:auto;height:72px}
.sc-note{position:absolute;left:var(--x,0);top:var(--y,40%);display:block;width:max-content;font-size:21px;line-height:1.2;visibility:hidden;color:#092344}
.sc-inked .sc-note{visibility:visible}
.sc-note svg{display:block;overflow:visible}
.sc-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the loop states (scenes.js adds .sc-live, toggles .on per step, .sc-out to fade, .sc-snap to reset) ---------- */
.sc-tmp{opacity:0}
.sc-live .sc-tmp.on{opacity:1}
.sc-live [data-step^="show"]{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.sc-live [data-step^="show"]:not(.on){opacity:0;transform:translateY(4px)}
.sc-live [data-step^="tap"].on{transform:scale(.94);filter:brightness(.9)}
.sc-live [data-step^="tick"]{transition:opacity .2s}
.sc-live [data-step^="tick"]::after{transition:clip-path .35s var(--ease) .05s}
.sc-live [data-step^="tick"]:not(.on){opacity:0}
.sc-live [data-step^="tick"]:not(.on)::after{clip-path:inset(0 100% 0 0)}
.sc-out .sc-stage [data-step]:not([data-step^="tap"]),.sc-out .sc-ink,.sc-out .sc-margin,.sc-out .sc-type{opacity:0;transition:opacity .35s var(--ease)}
.sc-snap *,.sc-held *{transition:none!important}
@media (prefers-reduced-motion:reduce){.sc *{transition:none!important}}

/* ---------- per scene ---------- */
/* the invitation: Aura OS sends, Compass accepts; side by side when there is room, stacked when there is not */
.sc-invite .sc-stage{height:460px}
.sc-invite .sc-win{right:auto;width:calc(52% - 24px);height:250px;top:22px}
.sc-invite .sc-ph{left:auto;right:16px;width:206px;height:384px;top:16px}
.sc-invite .sc-main{padding-bottom:8px}
.sc-invite .sc-margin{left:22px;right:auto;width:calc(52% - 34px);top:284px;bottom:64px;height:auto}
[data-scene="medication-round"] .sc-dim{margin-top:4px}

/* ---------- narrow scene boxes (phones, and the two-column rows on small laptops) ---------- */
@container (max-width:419px){
  .sc.desk .sc-stage{height:452px}
  .sc.desk.tall .sc-stage{height:462px}
  .sc.desk.top .sc-stage{height:460px}
  [data-scene="medication-round"] .sc-dim{margin-top:10px}
  .sc-ph{left:8px;width:194px}
  .sc-ph~.sc-margin{left:212px;right:6px}
  .sc-note{left:var(--xn,var(--x,0));top:var(--yn,var(--y,8px));font-size:16px}
  .sc.desk .sc-note{font-size:19px}
  .sc-hl .sc-s{display:none}
  .sc-side{display:none}
  .sc-win{left:10px;right:10px}
  .sc-main{padding:0 11px 9px}
  .sc-top{margin:0 -11px 2px;padding:0 9px 0 11px}
  .sc-top::after{width:84px}
  .sc-field{grid-template-columns:74px minmax(0,1fr)}
  .sc.desk .sc-margin{left:14px;right:62px}
  .sc-sr{grid-template-columns:minmax(0,1fr) 96px 13px;gap:6px}
  .sc-sr .sc-track{display:none}
  .sc-tile{padding:0 6px;font-size:10px}
  .sc-tile .sc-ck{display:none}
}
/* the invitation stacks below 470 px, where the window and the phone no longer fit side by side */
@container (max-width:469px){
  .sc-invite .sc-stage{height:584px}
  .sc-invite .sc-win{left:10px;right:10px;width:auto;top:12px;height:244px}
  .sc-invite .sc-ph{left:12px;right:auto;margin:0;top:268px;width:194px;height:304px}
  .sc-invite .sc-margin{left:218px;right:10px;width:auto;top:300px;bottom:70px}
  .sc-invite .sc-note{font-size:15px}
}