/* Chaos → Calm. Positions here are the web layout (content space); chaos-social.css overrides them for 9:16. */
.cc{position:relative;width:100%;aspect-ratio:1080/1350;overflow:hidden;--k:1;--io:cubic-bezier(.45,0,.55,1);--back:cubic-bezier(.34,1.36,.64,1)}
.cc *,.cc *::after{box-sizing:border-box}
.cc-stage{position:absolute;left:0;top:0;width:1080px;height:1350px;transform:scale(var(--k));transform-origin:0 0;overflow:hidden;
  background-color:#F1F5F9;background-image:linear-gradient(to right,rgba(15,23,42,.06) 1px,transparent 1px),linear-gradient(rgba(15,23,42,.06) 1px,transparent 1px);background-size:48px 48px;
  font-family:-apple-system,"SF Pro Text",system-ui,Manrope,sans-serif;color:#1D1D1E;line-height:normal}
.cc-endscale,.cc-cam{position:absolute;inset:0;transform-origin:0 0}
.cc-cam{transform:translate(var(--cam1-x),var(--cam1-y)) scale(var(--cam1-s))}
.cc-stage div,.cc-stage i{position:absolute}
.cc-stage .cc-skin *{position:static}
.cc-sym{display:block;width:auto;fill:currentColor;flex:none}

/* capture mode: render the stage alone at 1:1 */
.cc-capturing body{margin:0}
.cc-capturing body>*:not(.cc-capture-host){display:none!important}
.cc-capture-host{position:fixed;left:0;top:0;width:1080px}

/* app window and chrome (web layout) */
/* drop-shadow, not box-shadow: WebKit tiles big blurred box-shadows, and the tile seams flicker
   during the camera zoom. drop-shadow's blur is half the box-shadow value for the same look. */
.cc-win{left:var(--win-x);top:var(--win-y);width:var(--win-w);height:var(--win-h);background:#fff;border:1px solid #E2E8F0;border-radius:26px;
  filter:drop-shadow(0 40px 50px rgba(15,23,42,.18)) drop-shadow(0 4px 7px rgba(15,23,42,.06))}
.cc-win i{top:22px;width:16px;height:16px;border-radius:50%}
.cc-win i:nth-child(1){left:26px;background:#FF5F57}.cc-win i:nth-child(2){left:52px;background:#FEBC2E}.cc-win i:nth-child(3){left:78px;background:#28C840}
.cc-dnum{left:70px;top:96px;font:700 104px/1 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-2px}
.cc-dmon{left:206px;top:104px;font:400 34px/1.15 -apple-system,system-ui,sans-serif}
.cc-dmon b{display:block;font:700 36px/1.15 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif}
.cc-pillg{left:368px;top:118px;height:52px;border-radius:999px;background:#D4F3EA;color:#3DA686;font-size:24px;display:flex;align-items:center;gap:8px;padding:0 18px}
.cc-pillb{left:516px;top:118px;height:52px;border-radius:999px;background:#DEF3FE;color:#165C81;font-size:25px;display:flex;align-items:center;padding:0 22px}
.cc-bar{left:60px;width:560px;height:76px;border-radius:16px;background:#ECECEC;color:#979797;font-size:25px;display:flex;align-items:center;gap:18px;padding:0 30px}
.cc-bar span{margin-left:auto}
.cc-sb{top:228px}.cc-eb{top:1088px}
.cc-mcard{left:60px;top:340px;width:560px;height:370px;border-radius:30px;background:#DEF3FE;box-shadow:0 6px 18px rgba(22,92,129,.08)}
.cc-agl{left:92px;top:466px;font-size:27px;color:#165C81}
.cc-tile{left:548px;width:50px;height:50px;border-radius:10px;background:#AEDAF2;display:grid;place-items:center;color:#165C81}
.cc-t1{top:430px}.cc-t3{top:492px}
.cc-cnt{left:540px;top:660px;font-size:25px;color:#3DA686;display:flex;gap:6px;align-items:center}
.cc-gap{left:60px;top:732px;width:560px;height:64px;display:flex;align-items:center;color:#9B9B9B;font-size:24px}
.cc-gap>i{position:static!important;width:8px;height:58px;border-radius:4px;background:#ECECEC;margin:0 18px 0 12px}
.cc-gap b{font-weight:600}
.cc-pill{margin:0 auto;background:#ECECEC;border-radius:999px;padding:10px 28px;display:flex;gap:10px;align-items:center}
.cc-vdiv{left:641px;top:76px;width:2px;height:1124px;background:#E5E5E5}
.cc-th{left:664px;top:96px;font:700 64px/1 -apple-system,"SF Pro Display",system-ui,sans-serif;color:#3DA686}
.cc-add{left:664px;top:200px;width:356px;height:68px;border-radius:14px;background:#F5F5F7;display:flex;align-items:center;gap:14px;padding:0 20px;color:#9B9B9B;font-size:25px}
.cc-add .cc-sym{color:#3DA686}
.cc-inbox{left:664px;top:296px;width:356px;font:600 26px -apple-system,system-ui,sans-serif;color:#3DA686;display:flex;gap:10px;align-items:center}
.cc-inbox span{margin-left:auto;color:#9B9B9B;font-weight:400}
.cc-hr{left:664px;width:356px;height:1.5px;background:#ECECEC}
.cc-h1{top:404px}.cc-h2{top:470px}.cc-h3{top:536px}
.cc-srow{left:664px;top:478px;width:356px;padding:0 4px;display:flex;gap:16px;align-items:center;font-size:25px}
.cc-srow .cc-sym{color:#3DA686}

/* fragment layers: Re:Schedule copies are clipped to the window */
.cc-in,.cc-out{inset:0}
.cc-in{clip-path:var(--in-clip)}
.cc-f{left:0;top:0}
.cc-m-flight,.cc-m-snap{transform-origin:0 0}
/* the wrappers have no size of their own, so pivot on the copy's natural centre */
.cc-m-drift,.cc-m-pop{transform-origin:calc(var(--nw) / 2) calc(var(--nh) / 2)}
.cc-skin{position:relative!important;width:var(--nw);height:var(--nh);overflow:hidden}
.cc-f{--glow:22,92,129}.cc-f--sticky,.cc-f--todo,.cc-f--fwd{--glow:61,166,134}

/* "other app" skins: floating, mismatched, readable */
.cc-raw{border-radius:18px;padding:14px 24px;line-height:1.25;font-family:Manrope,system-ui,sans-serif;box-shadow:0 14px 22px rgba(15,23,42,.18)}
.cc-raw--gcal{background:#E2E8F0;border-left:12px solid #94A3B8;color:#334155;font-size:32px}
.cc-raw--gcal b{display:block;font-size:36px}
.cc-raw--mail{background:#fff;border:1px solid #CBD5E1;color:#334155;font-size:34px}
.cc-raw--mail small{display:block;color:#94A3B8;font-size:26px}
.cc-raw--chat{background:#E9E3F5;color:#4C3D6B;font-size:34px;border-radius:34px 34px 34px 6px;display:flex;align-items:center}
.cc-raw--doc{background:#fff;border:1px solid #CBD5E1;border-top:6px solid #9DB6D8;color:#475569;font:500 30px ui-monospace,Menlo,monospace;display:flex;align-items:center}
.cc-raw--todo{background:#fff;color:#475569;font-size:34px;border:2px dashed #94A3B8;display:flex;align-items:center}
.cc-raw--sticky{background:#FDF2C8;color:#7A5B12;font:700 64px Caveat,cursive;box-shadow:0 10px 24px rgba(120,90,10,.18);display:grid;place-items:center;border-radius:6px}

/* Re:Schedule skins: flat, shadowless, app palette */
.cc-tidy{display:flex;align-items:center;gap:14px}
.cc-tidy::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 10px rgba(var(--glow),.22);opacity:0}
.cc-tidy--mhead{display:block}
.cc-tidy--mhead small{display:block;font-size:22px;color:#165C81}
.cc-tidy--mhead b{display:block;font-size:36px;font-weight:700;color:#165C81;margin-top:2px}
.cc-rp{display:inline-flex;align-items:center;gap:8px;margin-left:18px}
.cc-tidy--agi{font-size:25px;color:#165C81;gap:12px;padding-left:2px}
.cc-tidy--dicon{justify-content:center;color:#165C81}
.cc-tidy--tcard{display:block;background:#D4F3EA;border-radius:30px;padding:26px 30px;color:#3DA686}
.cc-tidy--tcard small{font-size:22px}
.cc-tidy--tcard b{display:block;font-size:34px;font-weight:700;margin:2px 0 14px}
.cc-tidy--tcard dl{display:grid;grid-template-columns:160px 1fr;margin:0;font-size:23px;row-gap:6px}
.cc-tidy--tcard dt{font-weight:700}.cc-tidy--tcard dd{margin:0}
.cc-stage .cc-cc{position:absolute;right:28px;top:24px;color:#3DA686}
.cc-stage .cc-fl{position:absolute;right:30px;bottom:26px;color:#FFCC00}
.cc-tidy--trow{font-size:25px;gap:16px;padding:0 4px}
.cc-stage .cc-ring{position:relative;width:32px;height:32px;flex:none;color:#3DA686}
.cc-stage .cc-ring .cc-sym{position:absolute;inset:0}
.cc-stage .cc-lbl{position:relative}
.cc-stage .cc-lbl-done{position:absolute;inset:0;color:#9B9B9B;background:#fff}
.cc-done-in{opacity:0}

/* ---------- motion: everything waits for .cc-play (or a seek) ---------- */
.cc:not(.cc-play) *,.cc:not(.cc-play) *::after{animation-play-state:paused!important}
@keyframes cc-in{from{opacity:0}to{opacity:1}}
@keyframes cc-hide{from{opacity:1}to{opacity:0}}
@keyframes cc-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes cc-cam{
  from{transform:translate(var(--cam0-x),var(--cam0-y)) scale(var(--cam0-s))}
  to{transform:translate(var(--cam1-x),var(--cam1-y)) scale(var(--cam1-s))}}
@keyframes cc-sweep{
  0%{opacity:1;transform:translateX(-260px)}
  99.9%{opacity:1;transform:translateX(1320px)}
  100%{opacity:0;transform:translateX(1320px)}}
.cc-cam{animation:cc-cam 1s var(--io) 7.6s both}
.cc-win{animation:cc-rise .6s var(--io) 2.5s both}
/* Safari keeps an element whose finished animation still fills on its own layer, and the window's
   shadow flickered when the zoom reshuffled layers. So the camera is one layer from the start, and
   the window and camera let go of their animations when done (their resting styles are the end state). */
.cc-cam{will-change:transform;animation-fill-mode:backwards}
.cc-win{animation-fill-mode:backwards}
.cc-ui{animation:cc-in .5s var(--io) 3s both}
.cc-mcard{animation-delay:3.1s;animation-duration:.4s}
.cc-agl{animation-delay:3.8s;animation-duration:.3s}
.cc-stage .cc-sweep{left:0;top:0;width:240px;height:100%;opacity:0;
  background:linear-gradient(to right,transparent,rgba(61,180,245,.26),rgba(96,165,250,.16),transparent);
  animation:cc-sweep .65s var(--io) 2.5s forwards}

/* ---------- fragments: pop in, drift, snap to the stack, bob, fly into the window ---------- */
@keyframes cc-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes cc-drift{
  0%{transform:translate(0,0) rotate(var(--r))}
  20%{transform:translate(var(--d1x),var(--d1y)) rotate(calc(var(--r) + 3deg))}
  40%{transform:translate(var(--d2x),var(--d2y)) rotate(calc(var(--r) - 2deg))}
  60%{transform:translate(var(--d3x),var(--d3y)) rotate(calc(var(--r) + 2deg))}
  78%{transform:translate(0,0) rotate(var(--r))}
  100%{transform:none}}
@keyframes cc-snap{from{transform:translate(var(--s-x),var(--s-y)) scale(var(--s-s))}to{transform:none}}
@keyframes cc-bob{0%,100%{transform:none}25%{transform:translateY(-5px)}75%{transform:translateY(5px)}}
@keyframes cc-flight{from{transform:translate(var(--f-x),var(--f-y)) scale(var(--f-s))}to{transform:none}}
@keyframes cc-outclip{
  from{clip-path:polygon(-4000px -4000px,4000px -4000px,4000px 4000px,-4000px 4000px)}
  to{clip-path:polygon(-4000px var(--out-y),4000px var(--out-y),4000px 4000px,-4000px 4000px)}}
.cc-m-pop{animation:cc-pop .3s var(--back) var(--pop) both}
.cc-m-drift{animation:cc-drift 3.2s linear 0s both}
.cc-m-snap{animation:cc-snap .7s var(--io) 2.5s both}
.cc-m-bob{animation:cc-bob var(--bob) ease-in-out 3.2s both}
.cc-m-flight{animation:cc-flight .8s var(--back) calc(var(--land) - .8s) both}
/* outside copy: from its flight start, only the part below the window edge shows */
.cc-out .cc-f{animation:cc-outclip 0s linear calc(var(--land) - .8s) both}
/* inside copy: appears when its flight starts (the window clip hides it until it crosses) */
.cc-in .cc-f{animation:cc-in 0s linear calc(var(--land) - .8s) both}
.cc-tidy::after{animation:cc-hide .5s ease-out var(--land) forwards}
.cc-in .cc-f--cal2 .cc-tidy{animation:cc-hide .25s linear var(--land) forwards}
.cc-done-in{animation:cc-in .25s linear var(--done) forwards}
.cc-done-out{animation:cc-hide .25s linear var(--done) forwards}