/* Thirty days with the Oracle, as an app: one phone-sized house on any screen. Morning light by day, candlelight by
   night (her light follows the hour where they are). Everything is scoped to .op and sized in px, so the store's theme
   underneath is left exactly as it is. */
html.op-lock,html.op-lock body{overflow:hidden!important;height:100%!important;overscroll-behavior:none}
.op{
  --bg:#08060c;--bg2:#110c19;--glow:rgba(120,82,190,.28);--glow2:rgba(227,190,130,.12);
  --ink:#f2ead9;--ink2:#d9d0bf;--muted:#9c91aa;--faint:#6d6479;
  --gold:#dcb97c;--gold2:#f0d6a2;--on-gold:#1b130a;--goldline:rgba(220,185,124,.38);
  --card:rgba(255,248,235,.045);--card2:rgba(255,248,235,.085);--line:rgba(242,234,217,.1);--line2:rgba(242,234,217,.2);
  --bar:rgba(16,11,23,.74);--float:rgba(21,15,30,.9);--chip:rgba(255,248,235,.08);--press:rgba(255,255,255,.07);
  --shadow:0 40px 120px rgba(0,0,0,.6);--card-shadow:0 18px 50px rgba(0,0,0,.35);
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;--sans:Satoshi,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1);--out:cubic-bezier(.16,1,.3,1);
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--kb:0px;
  position:fixed;inset:0;z-index:2147483000;background:var(--bg);color:var(--ink2);
  font:400 16px/1.55 var(--sans);letter-spacing:normal;text-align:left;text-transform:none;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;color-scheme:dark;isolation:isolate;
  transition:background-color .9s var(--ease),color .9s var(--ease)
}
.op[data-theme=day]{
  --bg:#f4eee3;--bg2:#ece3d3;--glow:rgba(240,190,140,.42);--glow2:rgba(255,236,200,.6);
  --ink:#1c1611;--ink2:#3b3128;--muted:#7d7063;--faint:#a5998b;
  --gold:#9a7238;--gold2:#b8894a;--on-gold:#fffaf1;--goldline:rgba(154,114,56,.42);
  --card:rgba(255,253,248,.62);--card2:rgba(255,253,248,.92);--line:rgba(46,34,22,.1);--line2:rgba(46,34,22,.2);
  --bar:rgba(247,242,233,.8);--float:rgba(250,246,238,.92);--chip:rgba(46,34,22,.06);--press:rgba(46,34,22,.06);
  --shadow:0 40px 120px rgba(92,66,30,.22);--card-shadow:0 18px 50px rgba(92,66,30,.14);
  color-scheme:light
}
.op *,.op *::before,.op *::after{box-sizing:border-box}
.op :where(h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,form,fieldset,legend,label,button,input,textarea,select,a,img,audio,dl,dd,dt,section,header,footer,nav,main){
  margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;
  text-decoration:none;box-shadow:none;max-width:none;min-height:0;min-width:0;border-radius:0;text-align:inherit;float:none
}
.op ul,.op ol{list-style:none}
.op button{cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none}
.op [hidden]{display:none!important}
.op :focus{outline:none}
.op :focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:8px}
.op .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.op svg{display:block;flex:none}

/* ------------------------------------------------------------------ the sky behind the house */
.op-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.op-sky .art{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(38px) saturate(1.05);opacity:0;transform:scale(1.08);transition:opacity 2s var(--ease)}
.op-sky .art.on{opacity:.55}
.op[data-theme=day] .op-sky .art.on{opacity:.38}
.op-sky .veil{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--glow),transparent 70%),radial-gradient(ellipse 70% 50% at 50% 110%,var(--glow2),transparent 70%),linear-gradient(180deg,transparent,var(--bg) 92%)}
.op-sky canvas{position:absolute;inset:0;width:100%;height:100%}

/* ------------------------------------------------------------------ the device: the whole screen on a phone, a phone on a desk */
.op-device{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;background:var(--bg);transition:background-color .9s var(--ease)}
.op-device::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 52% at 50% -8%,var(--glow),transparent 68%);opacity:.9;transition:opacity .9s}
@media (min-width:720px){
  .op{display:grid;place-items:center;padding-bottom:34px}
  .op-device{width:430px;height:min(932px,calc(100% - 64px));border-radius:46px;box-shadow:var(--shadow),0 0 0 1px var(--line2),inset 0 0 0 1px var(--line)}
  .op-device > .op-layer,.op-device > .op-sheet{clip-path:inset(0 round 46px)}
  .op-desk{position:absolute;left:0;right:0;bottom:26px;text-align:center;font:500 11px/1 var(--sans);letter-spacing:.24em;color:var(--muted);z-index:1}
}
@media (max-width:719px){.op-desk{display:none}}
/* on an iPhone's home screen the clock sits over the page in white: by day, a little dusk behind it */
.op-inapp.op-ios[data-theme=day] .op-device::after{content:"";position:absolute;left:0;right:0;top:0;z-index:200;height:calc(var(--st) + 10px);pointer-events:none;background:linear-gradient(rgba(38,28,18,.5),rgba(38,28,18,0))}

.op-screen{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:calc(var(--sb) + 132px)}
.op-screen::-webkit-scrollbar{display:none}
.op-screen.bare{padding-bottom:calc(var(--sb) + 24px)}
.op-screen.withmini{padding-bottom:calc(var(--sb) + 206px)}
.op-screen.bare .op-main{position:static}
.op-head{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(var(--st) + 14px) 20px 12px;transition:background-color .35s var(--ease),box-shadow .35s}
.op-head.solid{background:var(--bar);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.op-word{display:flex;align-items:baseline;gap:9px;font:400 13px/1 var(--sans);letter-spacing:.32em;color:var(--ink);text-transform:lowercase}
.op-word b{font:italic 400 20px/1 var(--serif);letter-spacing:.02em;color:var(--gold)}
.op-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--goldline);background:var(--chip) center/cover no-repeat}
.op-headbtn{height:34px;min-width:34px;padding:0 12px;border-radius:17px;background:var(--chip);color:var(--ink);font:500 12px/34px var(--sans);letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center;gap:6px}

.op-main{position:relative;z-index:1}
.op-main.in{animation:op-in .5s var(--out) both}
@keyframes op-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ type */
.op-kicker{font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;color:var(--muted);text-transform:lowercase}
.op-kicker b{color:var(--gold);font-weight:500}
.op-display{font:300 46px/1 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.op-display i{font-style:italic;color:var(--gold)}
.op-h2{font:300 34px/1.06 var(--serif);letter-spacing:-.006em;color:var(--ink)}
.op-h3{font:400 26px/1.15 var(--serif);color:var(--ink)}
.op-say{font:400 23px/1.42 var(--serif);color:var(--ink)}
.op-qline{font:italic 300 30px/1.18 var(--serif);color:var(--ink)}
.op-body{font:400 15.5px/1.6 var(--sans);color:var(--ink2)}
.op-fine{font:400 13px/1.55 var(--sans);color:var(--muted)}
.op-fine a,.op-fine button{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--goldline)}

/* ------------------------------------------------------------------ buttons */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:27px;background:var(--ink);color:var(--bg);font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:lowercase;transition:transform .2s var(--ease),opacity .2s,background-color .3s}
.op-btn:active{transform:scale(.97)}
.op-btn[disabled]{opacity:.45;pointer-events:none}
.op-btn.gold{background:var(--gold2);color:var(--on-gold)}
.op[data-theme=day] .op-btn.gold{background:var(--ink);color:var(--bg)}
.op-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.op-btn.wide{width:100%}
.op-btn.small{height:42px;padding:0 20px;font-size:12.5px}
.op-link{color:var(--gold);font:500 13px/1.4 var(--sans);letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--goldline)}
.op-iconbtn{width:44px;height:44px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:var(--chip);transition:transform .2s var(--ease)}
.op-iconbtn:active{transform:scale(.92)}
.op-iconbtn svg{width:22px;height:22px}

/* ------------------------------------------------------------------ today */
.op-hello{padding:10px 24px 2px}
.op-hello .op-kicker{margin-bottom:12px}
.op-hello .op-display{margin-bottom:10px}
.op-hello .op-fine{font-size:14px}

.op-strip{display:flex;gap:6px;overflow-x:auto;padding:18px 24px 6px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.op-strip::-webkit-scrollbar{display:none}
.op-cell{flex:none;width:46px;height:64px;border-radius:23px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;scroll-snap-align:center;color:var(--faint);transition:background-color .3s,color .3s,transform .2s var(--ease)}
.op-cell:active{transform:scale(.94)}
.op-cell span{font:italic 400 15px/1 var(--serif)}
.op-cell i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}
.op-cell.open{color:var(--ink2)}
.op-cell.done i{background:var(--gold);box-shadow:none}
.op-cell.med i{width:8px;height:8px;box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px transparent}
.op-cell.med.done i{background:var(--gold)}
.op-cell.today{background:var(--ink);color:var(--bg)}
.op-cell.today i{box-shadow:inset 0 0 0 1px var(--bg)}
.op-cell.today.done i{background:var(--bg)}
.op-cell.viewing:not(.today){background:var(--chip);color:var(--ink)}
.op-cell.shut{opacity:.55}

.op-sect{display:flex;align-items:baseline;justify-content:space-between;padding:30px 24px 0}

/* the hero cards: her whisper, the week's meditation, her letter */
.op-hero{position:relative;display:block;width:calc(100% - 32px);margin:14px 16px 0;height:min(520px,124vw);border-radius:30px;overflow:hidden;background:#0c0910;color:#f6eedf;text-align:left;box-shadow:var(--card-shadow);transform:translateZ(0);transition:transform .35s var(--out)}
.op-hero:active{transform:scale(.985)}
.op-hero.short{height:min(340px,84vw)}
.op-hero .pic{position:absolute;inset:0;overflow:hidden}
.op-hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--out),opacity 1.2s;opacity:0}
.op-hero .pic img.on{opacity:1}
.op-hero.drift .pic img.on{animation:op-drift 34s ease-in-out infinite alternate}
@keyframes op-drift{from{translate:0 0}to{translate:-2% -3%}}
.op-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,4,9,.5) 0%,rgba(6,4,9,0) 26%,rgba(6,4,9,0) 42%,rgba(6,4,9,.86) 100%);pointer-events:none}
.op-hero .top{position:absolute;z-index:2;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.op-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 13px;border-radius:14px;background:rgba(10,7,14,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:500 11px/1 var(--sans);letter-spacing:.16em;color:#f3e9d6;text-transform:lowercase}
.op-tag.gold{background:rgba(240,214,162,.94);color:#1b130a}
.op-hero .bottom{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;display:flex;align-items:flex-end;gap:16px}
.op-hero .text{flex:1;min-width:0}
.op-hero .kick{font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;color:rgba(246,238,223,.72);text-transform:lowercase;margin-bottom:10px}
.op-hero .title{font:300 40px/1.02 var(--serif);letter-spacing:-.01em;color:#fbf4e6;text-wrap:balance}
.op-hero.short .title{font-size:32px}
.op-hero .meta{margin-top:10px;font:400 13px/1.3 var(--sans);color:rgba(246,238,223,.7)}
.op-play{flex:none;width:66px;height:66px;border-radius:50%;background:#f3dcab;color:#1b130a;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .25s var(--out)}
.op-play svg{width:26px;height:26px}
.op-play.on{background:#fbf4e6}
.op-making{position:absolute;z-index:2;left:24px;right:24px;bottom:26px}
.op-making .stage{font:italic 300 28px/1.15 var(--serif);color:#fbf4e6;margin-bottom:14px}
.op-bar{height:3px;border-radius:2px;background:rgba(246,238,223,.18);overflow:hidden}
.op-bar i{display:block;height:100%;width:6%;background:#f3dcab;border-radius:2px;transition:width 1.2s var(--ease)}
.op-making .op-fine{color:rgba(246,238,223,.72);margin-top:12px}
.op-hero .shimmer{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 30%,rgba(255,240,210,.09) 50%,transparent 70%);background-size:220% 100%;animation:op-shimmer 2.8s linear infinite}
@keyframes op-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* the quiet cards */
.op-card{position:relative;margin:14px 16px 0;padding:26px 24px 24px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .9s var(--ease)}
.op-card .op-kicker{margin-bottom:14px}
.op-card .op-say + .op-check,.op-card .op-qline + .op-btn{margin-top:22px}
.op-check{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px 0 8px;border-radius:23px;background:var(--chip);color:var(--ink);font:500 13.5px/1 var(--sans);letter-spacing:.04em;transition:background-color .3s,transform .2s var(--ease)}
.op-check:active{transform:scale(.96)}
.op-check i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);display:flex;align-items:center;justify-content:center;transition:background-color .35s,box-shadow .35s}
.op-check i svg{width:16px;height:16px;opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--out)}
.op-check[aria-pressed=true]{background:transparent;box-shadow:inset 0 0 0 1px var(--goldline)}
.op-check[aria-pressed=true] i{background:var(--gold);box-shadow:none;color:var(--on-gold)}
.op-check[aria-pressed=true] i svg,.op-check[data-note] i svg{opacity:1;transform:none}
.op-answer{margin-top:20px;padding:4px 0 2px 18px;border-left:2px solid var(--goldline)}
.op-answer p{font:400 20px/1.45 var(--serif);color:var(--ink2);white-space:pre-wrap}
.op-answer + .op-fine{margin-top:12px}
.op-quote{font:italic 300 22px/1.4 var(--serif);color:var(--ink2)}
.op-doors{display:grid;gap:10px;margin-top:18px}

/* the end of the day: the house goes quiet */
.op-end{margin:34px 16px 0;padding:44px 22px 40px;border-radius:30px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--glow),transparent 72%),var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.op-orb{position:relative;width:54px;height:54px;margin:0 auto 22px;animation:op-orb 9s ease-in-out infinite}
.op-orb::before,.op-orb::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.op-orb::before{inset:-130%;background:radial-gradient(circle,rgba(240,214,162,.42) 0%,rgba(240,214,162,.14) 30%,rgba(240,214,162,0) 62%)}
.op-orb::after{inset:0;background:radial-gradient(circle at 38% 35%,#fff6e2,#e9cf9b 40%,#b88a4a 75%)}
.op[data-theme=night] .op-orb::before{background:radial-gradient(circle,rgba(240,230,210,.28) 0%,rgba(170,150,220,.14) 32%,rgba(170,150,220,0) 62%)}
.op[data-theme=night] .op-orb::after{background:radial-gradient(circle at 35% 35%,#fbf5e8,#d9d2c4 45%,#8f8a85 85%)}
@keyframes op-orb{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
.op-end .op-h3{margin-bottom:10px}
.op-end .op-fine{max-width:300px;margin:0 auto}
.op-count{margin-top:18px;font:500 12px/1 var(--sans);letter-spacing:.22em;color:var(--gold);text-transform:lowercase}
.op-sharebtn{margin-top:24px}
.op-sharebtn svg{width:18px;height:18px}
.op-rite{display:flex;justify-content:center;gap:6px;margin-top:22px;flex-wrap:wrap}
.op-rite span{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:16px;background:var(--chip);font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--muted);transition:color .3s,box-shadow .3s}
.op-rite span.on{background:transparent;box-shadow:inset 0 0 0 1px var(--goldline);color:var(--gold)}
.op-rite svg{width:14px;height:14px}

/* ------------------------------------------------------------------ the journey */
.op-pagehead{padding:10px 24px 0}
.op-pagehead .op-display{margin:10px 0 8px}
.op-seg{display:flex;gap:4px;margin:22px 20px 0;padding:4px;border-radius:22px;background:var(--chip)}
.op-seg button{flex:1 1 0;min-width:0;height:36px;padding:0 10px;border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font:500 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted);transition:background-color .3s,color .3s,box-shadow .3s}
.op-seg button[aria-pressed=true]{background:var(--card2);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.op-mosaic-card{margin:20px 16px 0;padding:22px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;gap:20px;align-items:center}
.op-mosaic{flex:none;width:118px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border-radius:12px;overflow:hidden;background:var(--line)}
.op-mosaic i{display:block;aspect-ratio:var(--tile,4/5);background-color:var(--chip);background-repeat:no-repeat;background-size:500% 600%;transition:opacity .8s,filter .8s}
.op-mosaic i.off{opacity:.16;filter:grayscale(1)}
.op-mosaic i.new{animation:op-tile 1.4s var(--out) both}
@keyframes op-tile{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.op-mosaic-card .op-h3{font-size:23px;margin:8px 0 6px}
.op-path{position:relative;margin:24px 16px 0}
.op-week{margin-bottom:8px}
.op-week h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:22px 8px 12px}
.op-week h3 b{font:italic 400 22px/1 var(--serif);color:var(--gold)}
.op-week h3 span{font:400 22px/1.1 var(--serif);color:var(--ink)}
.op-week h3 small{flex-basis:100%;padding-left:34px;font:italic 400 15px/1.3 var(--serif);color:var(--muted)}
.op-row{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:12px 10px;border-radius:20px;text-align:left;transition:background-color .25s}
.op-row:active{background:var(--press)}
.op-row .node{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:italic 400 15px/1 var(--serif);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2);position:relative;z-index:1;background:var(--bg)}
.op-row.done .node{background:var(--gold);color:var(--on-gold);box-shadow:none}
.op-row.today .node{background:var(--ink);color:var(--bg);box-shadow:0 0 0 5px var(--chip)}
.op-row.med .node::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 1px var(--goldline)}
.op-row .what{flex:1;min-width:0}
.op-row .what b{display:block;font:400 19px/1.2 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-row .what small{display:block;margin-top:4px;font:400 12.5px/1.3 var(--sans);color:var(--muted)}
.op-row.shut .what b{color:var(--faint)}
.op-row .marks{flex:none;display:flex;gap:6px;color:var(--gold)}
.op-row .marks svg{width:16px;height:16px}
.op-row .marks .dim{color:var(--faint)}
.op-path::before{content:"";position:absolute;left:30px;top:70px;bottom:30px;width:1px;background:var(--line)}
.op-entry{margin:14px 16px 0;padding:22px 24px;border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.op-entry .op-kicker{margin-bottom:10px}
.op-entry .q{font:italic 300 18px/1.35 var(--serif);color:var(--muted);margin-bottom:10px}
.op-entry .a{font:400 20px/1.45 var(--serif);color:var(--ink);white-space:pre-wrap}
.op-empty{margin:40px 28px;text-align:center}
.op-empty .op-h3{margin-bottom:10px}
.op-listen{display:flex;align-items:center;gap:16px;margin:12px 16px 0;padding:14px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);width:calc(100% - 32px);text-align:left;transition:transform .2s var(--ease)}
.op-listen:active{transform:scale(.985)}
.op-listen .thumb{flex:none;width:66px;height:66px;border-radius:16px;overflow:hidden;background:var(--chip) center/cover no-repeat}
.op-listen .what{flex:1;min-width:0}
.op-listen .what b{display:block;font:400 21px/1.15 var(--serif);color:var(--ink)}
.op-listen .what small{display:block;margin-top:5px;font:400 12.5px/1.3 var(--sans);color:var(--muted)}
.op-listen .go{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center}
.op-listen .go svg{width:18px;height:18px}
.op-listen.shut{opacity:.55}
.op-listen.shut .go{background:var(--chip);color:var(--muted)}

/* ------------------------------------------------------------------ you */
.op-frame{margin:16px auto 0;width:min(300px,72vw);padding:16px;background:#f7f2e8;box-shadow:0 0 0 7px #1a140f,0 0 0 8px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.45)}
.op[data-theme=day] .op-frame{box-shadow:0 0 0 7px #241b13,0 30px 70px rgba(70,50,20,.3)}
.op-frame img{display:block;width:100%;height:auto}
.op-you{text-align:center;padding:30px 28px 0}
.op-you .op-h2{margin:10px 0 14px}
.op-you .op-say{font-size:20px;color:var(--ink2)}
/* her words about their Mirror, a line to each paragraph, with her two marks */
.op-why .op-say + .op-say{margin-top:12px}
.op-why b{font-weight:500}
.op-you .op-why b{color:var(--ink)}
.op-why i{font-style:italic}
.op-reveal .op-why{margin-bottom:28px}
.op-reveal .op-why .op-say{margin-bottom:0}
.op-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 16px 0;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.op-stats div{padding:18px 6px;text-align:center}
.op-stats div + div{box-shadow:inset 1px 0 0 var(--line)}
.op-stats b{display:block;font:300 32px/1 var(--serif);color:var(--ink)}
.op-stats small{display:block;margin-top:6px;font:500 11px/1.2 var(--sans);letter-spacing:.12em;color:var(--muted)}
.op-list{margin:20px 16px 0;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.op-li{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:12px 20px;text-align:left;transition:background-color .2s}
.op-li:active{background:var(--press)}
.op-li + .op-li{box-shadow:inset 0 1px 0 var(--line)}
.op-li span{flex:1;font:400 15px/1.3 var(--sans);color:var(--ink)}
.op-li small{font:400 14px/1.3 var(--sans);color:var(--muted);text-align:right}
.op-li > svg{width:16px;height:16px;color:var(--faint)}
.op-li i{display:flex}
.op-li i svg{width:20px;height:20px}
.op-light{display:flex;gap:4px;padding:4px;border-radius:18px;background:var(--chip)}
.op-light button{height:30px;padding:0 12px;border-radius:15px;font:500 12px/1 var(--sans);color:var(--muted)}
.op-light button[aria-pressed=true]{background:var(--card2);color:var(--ink)}
.op-foot{padding:26px 28px 0;text-align:center}
.op-foot .op-fine + .op-fine{margin-top:10px}

/* ------------------------------------------------------------------ the tab bar and the small player above it */
.op-tabs{position:absolute;z-index:30;left:14px;right:14px;bottom:calc(var(--sb) + 12px);height:66px;padding:0 6px;border-radius:33px;display:flex;align-items:center;background:var(--float);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 14px 44px rgba(0,0,0,.22),inset 0 0 0 1px var(--line);transition:transform .45s var(--out),opacity .3s}
.op-tabs.away{transform:translateY(140%);opacity:0}
.op-tab{flex:1;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--faint);font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:lowercase;transition:color .3s,background-color .3s}
.op-tab svg{width:23px;height:23px}
.op-tab[aria-current=page]{color:var(--ink);background:var(--chip)}
.op-mini{position:absolute;z-index:29;left:14px;right:14px;bottom:calc(var(--sb) + 86px);height:62px;border-radius:22px;display:flex;align-items:center;gap:12px;padding:0 10px 0 8px;background:var(--float);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 12px 34px rgba(0,0,0,.2),inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .45s var(--out),opacity .3s}
.op-mini.away{transform:translateY(30px);opacity:0;pointer-events:none}
.op-mini .thumb{flex:none;width:46px;height:46px;border-radius:14px;background:var(--chip) center/cover no-repeat}
.op-mini .what{flex:1;min-width:0;text-align:left}
.op-mini .what b{display:block;font:400 17px/1.15 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-mini .what small{display:block;font:400 11.5px/1.3 var(--sans);color:var(--muted)}
.op-mini .op-iconbtn{background:transparent}
.op-mini .line{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.op-mini .line i{display:block;height:100%;width:0;background:var(--gold)}

/* ------------------------------------------------------------------ layers: the player, the page she asks you to write on, sheets */
.op-layer{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);transform:translateY(104%);transition:transform .55s var(--out);will-change:transform}
.op-layer.up{transform:none}
.op-layer.drag{transition:none}
.op-scrim{position:absolute;inset:0;z-index:45;background:rgba(0,0,0,.45);opacity:0;transition:opacity .4s;pointer-events:none}
.op-scrim.on{opacity:1;pointer-events:auto}
.op-grab{position:absolute;top:calc(var(--st) + 8px);left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line2);z-index:3}

/* the player is always night: she speaks in the dark */
.op-player{--ink:#f6efe1;--ink2:#e2d8c6;--muted:rgba(240,230,212,.62);--faint:rgba(240,230,212,.38);--line:rgba(246,239,225,.14);--line2:rgba(246,239,225,.26);--chip:rgba(255,248,235,.1);--gold:#e9cd97;--goldline:rgba(233,205,151,.4);background:#07050a;color:var(--ink2);color-scheme:dark}
.op-player .back{position:absolute;inset:-8%;overflow:hidden}
.op-player .back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(1.1) brightness(.62);transform:scale(1.1)}
.op-player .back::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 50% 38%,rgba(7,5,10,.15),rgba(7,5,10,.78) 80%),linear-gradient(180deg,rgba(7,5,10,.35),rgba(7,5,10,.2) 30%,rgba(7,5,10,.88) 82%)}
.op-player .top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) + 20px) 18px 0}
.op-player .top p{font:500 11.5px/1 var(--sans);letter-spacing:.2em;color:var(--muted);text-transform:lowercase}
.op-player .stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 28px}
.op-breath{position:relative;width:min(232px,58vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.op-breath i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(246,239,225,.22)}
.op-breath i:nth-child(2){inset:13%;box-shadow:inset 0 0 0 1px rgba(246,239,225,.16)}
.op-breath::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(circle,rgba(243,214,160,.30) 0%,rgba(243,214,160,.12) 32%,rgba(243,214,160,0) 62%);pointer-events:none}
.op-breath i:nth-child(3){inset:30%;box-shadow:none;background:radial-gradient(circle at 42% 38%,#fff8ea 0%,#f4dcaa 34%,rgba(226,182,112,.55) 62%,rgba(226,182,112,0) 78%)}
.op-player.playing .op-breath i{animation:op-breathe 10s ease-in-out infinite}
.op-player.playing .op-breath i:nth-child(2){animation-delay:.35s}
.op-player.playing .op-breath i:nth-child(3){animation-delay:.7s}
@keyframes op-breathe{0%,100%{transform:scale(.9);opacity:.75}45%{transform:scale(1.06);opacity:1}}
.op-caption{min-height:126px;margin-top:34px;max-width:360px;text-align:center;font:400 23px/1.42 var(--serif);color:var(--ink);transition:opacity .6s var(--ease)}
.op-caption.fade{opacity:0}
/* a short screen (a phone with its browser's bars showing): the orb and her words make room for the title */
@media (max-height:720px){.op-breath{width:min(232px,58vw,27vh)}.op-caption{min-height:96px;margin-top:20px;font-size:21px}}
.op-lyrics{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;padding:30vh 28px 40vh;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
.op-lyrics::-webkit-scrollbar{display:none}
.op-lyrics p{font:400 25px/1.4 var(--serif);color:var(--ink);opacity:.32;margin-bottom:26px;transition:opacity .5s var(--ease);cursor:pointer}
.op-lyrics p.now{opacity:1}
.op-lyrics.plain p{opacity:.92;cursor:default}
.op-player .low{position:relative;z-index:2;padding:0 26px calc(var(--sb) + 26px)}
.op-player .title{font:300 34px/1.06 var(--serif);color:#fbf4e6;letter-spacing:-.01em;text-wrap:balance}
.op-player .sub{margin-top:8px;font:400 13px/1.3 var(--sans);color:var(--muted)}
.op-scrub{position:relative;margin-top:24px;height:24px;display:flex;align-items:center;touch-action:none;cursor:pointer}
.op-scrub .rail{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(246,239,225,.18)}
.op-scrub .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#f3dcab}
.op-scrub .knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fbf4e6;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .2s}
.op-scrub.dragging .knob{transform:scale(1.35)}
.op-times{display:flex;justify-content:space-between;margin-top:4px;font:500 11.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.op-controls{display:flex;align-items:center;justify-content:center;gap:36px;margin-top:18px}
.op-skip{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.op-skip svg{width:30px;height:30px}
.op-big{width:80px;height:80px;border-radius:50%;background:#f3dcab;color:#1b130a;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.4);transition:transform .2s var(--ease)}
.op-big:active{transform:scale(.94)}
.op-big svg{width:32px;height:32px}
.op-player .extra{display:flex;justify-content:center;gap:22px;margin-top:20px;min-height:20px}
.op-player .extra a,.op-player .extra button{font:500 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.op-player .extra svg{width:16px;height:16px}
.op-player .wordsbtn[aria-pressed=true]{background:#f3dcab;color:#1b130a}

/* the page she asks you to write on */
.op-compose{background:var(--bg)}
.op-compose .top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) + 16px) 16px 0}
.op-compose .top p{font:500 11.5px/1 var(--sans);letter-spacing:.2em;color:var(--muted)}
.op-compose .body{flex:1;min-height:0;overflow-y:auto;padding:26px 26px 20px}
.op-compose .op-qline{margin-bottom:24px}
.op-write{display:block;width:100%;min-height:200px;resize:none;font:400 22px/1.5 var(--serif)!important;color:var(--ink)!important;background:transparent!important;caret-color:var(--gold)}
.op-write::placeholder{color:var(--faint);font-style:italic}
.op .op-write:focus,.op .op-write:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}
.op-compose .dock{padding:12px 16px calc(max(var(--sb),var(--kb)) + 14px);display:flex;align-items:center;gap:12px;box-shadow:inset 0 1px 0 var(--line);background:var(--bar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.op-compose .dock .op-btn{margin-left:auto;height:50px}
.op-mic{width:50px;height:50px;border-radius:50%;background:var(--chip);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)}
.op-mic svg{width:22px;height:22px}
.op-mic.on{background:#c9563c;color:#fff;animation:op-pulse 1.6s ease-in-out infinite}
@keyframes op-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,86,60,.45)}50%{box-shadow:0 0 0 12px rgba(201,86,60,0)}}
.op-wave{flex:1;min-width:0;height:44px}
.op-clock{font:500 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;min-width:40px}
.op-note{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.op-note .op-fine{white-space:nowrap}
.op-sent{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .5s}
.op-sent.on{opacity:1;pointer-events:auto}
.op-seal{width:96px;height:96px;margin-bottom:28px}
.op-seal circle{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:302;stroke-dashoffset:302;transition:stroke-dashoffset 1.4s var(--out)}
.op-sent.on .op-seal circle{stroke-dashoffset:0}
.op-seal path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .7s .9s var(--out)}
.op-sent.on .op-seal path{stroke-dashoffset:0}

/* sheets */
.op-sheet{position:absolute;left:0;right:0;bottom:0;z-index:60;max-height:92%;display:flex;flex-direction:column;border-radius:32px 32px 0 0;background:var(--bg);box-shadow:0 -20px 60px rgba(0,0,0,.35),inset 0 1px 0 var(--line2);transform:translateY(105%);transition:transform .5s var(--out)}
.op-sheet.up{transform:none}
.op-sheet .in{overflow-y:auto;padding:32px 24px calc(var(--sb) + 26px)}
.op-sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line2);margin:10px auto 0}
.op-sheet .op-h2{font-size:30px;margin-bottom:8px}
.op-field{display:block;margin-top:18px}
.op-field > span{display:block;margin-bottom:8px;font:500 11.5px/1 var(--sans);letter-spacing:.16em;color:var(--muted)}
.op-input,.op-select{display:block;width:100%;height:54px;padding:0 18px;border-radius:18px!important;background:var(--chip)!important;color:var(--ink)!important;font:400 17px/54px var(--sans)!important;box-shadow:inset 0 0 0 1px var(--line)!important}
.op-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 18px center!important;padding-right:42px}
.op-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:16px 18px;border-radius:18px;background:var(--chip)}
.op-switch span{font:400 15px/1.3 var(--sans);color:var(--ink)}
.op-switch input{-webkit-appearance:none;appearance:none;width:50px;height:30px;border-radius:15px;background:var(--line2);position:relative;transition:background-color .25s;flex:none;cursor:pointer}
.op-switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s var(--out)}
.op-switch input:checked{background:var(--gold)}
.op-switch input:checked::after{transform:translateX(20px)}
.op-sheet .actions{display:grid;gap:10px;margin-top:26px}

/* care */
.op-care{margin:14px 16px 0;padding:28px 24px;border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--goldline)}
.op-care p{font:400 20px/1.5 var(--serif);color:var(--ink)}
.op-care ul{display:grid;gap:10px;margin-top:22px}
.op-care li a,.op-care li span{display:block;padding:15px 18px;border-radius:18px;background:var(--chip);text-align:left}
.op-care li b{display:block;font:500 15px/1.3 var(--sans);color:var(--ink)}
.op-care li small{display:block;margin-top:3px;font:400 13px/1.3 var(--sans);color:var(--muted)}

/* ------------------------------------------------------------------ arrival: before day one */
.op-flow{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--st) + 16px) 0 calc(max(var(--sb),var(--kb)) + 18px)}
.op-flow .bar{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:44px}
.op-flow .bar .op-iconbtn{background:transparent}
.op-dashes{flex:1;display:flex;gap:6px;padding-right:56px}
.op-dashes i{flex:1;height:2px;border-radius:1px;background:var(--line2);overflow:hidden;position:relative}
.op-dashes i.done::after,.op-dashes i.on::after{content:"";position:absolute;inset:0;background:var(--gold)}
.op-dashes i.on::after{animation:op-dash .6s var(--out) both}
@keyframes op-dash{from{transform:translateX(-100%)}to{transform:none}}
.op-flow .scroll{flex:1;min-height:0;overflow-y:auto;padding:24px 28px 18px;display:flex;flex-direction:column;scrollbar-width:none}
.op-flow .scroll::-webkit-scrollbar{display:none}
.op-flow .scroll.center{text-align:center;padding-top:50px}
.op-flow .scroll.center > :first-child{margin-top:auto}
.op-flow .scroll.center > :last-child{margin-bottom:auto}
.op-flow .dock{padding:0 20px}
.op-flow .op-display{font-size:44px}
.op-flow .op-kicker{margin-bottom:16px}
.op-flow .op-qline{font-size:33px;margin-bottom:14px}
.op-flow .op-fine.hint{margin-bottom:24px;font-size:14px}
.op-flow .op-write{min-height:180px}
.op-nameinput{display:block;width:100%;margin-top:30px;padding:8px 0 14px;border-bottom:1px solid var(--line2)!important;font:300 40px/1.1 var(--serif)!important;color:var(--ink)!important;background:transparent!important;text-align:center;caret-color:var(--gold)}
.op-nameinput::placeholder{color:var(--faint)}
.op .op-nameinput,.op .op-nameinput:focus,.op .op-nameinput:focus-visible{border:0!important;border-bottom:1px solid var(--line2)!important;border-radius:0!important;box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none}
.op .op-nameinput:focus{border-bottom-color:var(--gold)!important}
.op-wheels{position:relative;display:flex;justify-content:center;gap:8px;margin:34px auto 0;height:220px;width:100%;max-width:300px}
.op-wheels::before{content:"";position:absolute;left:0;right:0;top:50%;height:48px;margin-top:-24px;border-radius:16px;background:var(--chip);pointer-events:none}
.op-wheel{position:relative;flex:1;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(180deg,transparent,#000 35%,#000 65%,transparent);overscroll-behavior:contain}
.op-wheel::-webkit-scrollbar{display:none}
.op-wheel .pad{height:86px}
.op-wheel button{display:block;width:100%;height:48px;scroll-snap-align:center;font:400 26px/48px var(--serif);color:var(--muted);transition:color .2s}
.op-wheel button.sel{color:var(--ink)}
.op-arrive-orb{position:relative;width:120px;height:120px;margin:0 auto 34px;animation:op-orb 7s ease-in-out infinite}
.op-arrive-orb::before,.op-arrive-orb::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.op-arrive-orb::before{inset:-36%;background:radial-gradient(circle,rgba(233,205,151,.3) 0%,rgba(233,205,151,.12) 38%,rgba(233,205,151,0) 68%)}
.op-arrive-orb::after{inset:0;background:radial-gradient(circle at 38% 34%,rgba(255,244,222,.9),rgba(233,205,151,.5) 45%,rgba(233,205,151,0) 72%)}
.op[data-theme=day] .op-arrive-orb::before{background:radial-gradient(circle,rgba(220,160,90,.26) 0%,rgba(220,160,90,.1) 38%,rgba(220,160,90,0) 68%)}
.op[data-theme=day] .op-arrive-orb::after{background:radial-gradient(circle at 38% 34%,#fff7e6,#efcf93 45%,rgba(214,160,90,0) 72%)}
.op-breathe{position:relative;width:200px;height:200px;margin:0 auto 40px}
.op-breathe i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--goldline);transform:scale(.5);transition:transform 4s ease-in-out,opacity 4s}
.op-breathe i:nth-child(2){inset:18%;background:radial-gradient(circle,var(--glow2),transparent 70%)}
.op-breathe.in i{transform:scale(1)}
.op-breathe.out i{transform:scale(.5);transition-duration:6s}
.op-breath-word{font:italic 300 30px/1.2 var(--serif);color:var(--ink);min-height:40px;transition:opacity .6s}
.op-reading{font:italic 300 30px/1.25 var(--serif);color:var(--ink);min-height:80px;transition:opacity .7s}
.op-reveal{position:absolute;inset:0;z-index:2;background:#050307;color:#f6efe1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.op-reveal .pic{position:absolute;inset:0}
.op-reveal .pic img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 3s var(--ease),transform 9s var(--out)}
.op-reveal.on .pic img{opacity:1;transform:scale(1)}
.op-reveal .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,7,.25),rgba(5,3,7,0) 30%,rgba(5,3,7,.7) 62%,rgba(5,3,7,.96))}
.op-reveal .words{position:relative;z-index:2;padding:0 28px calc(var(--sb) + 28px);text-shadow:0 1px 22px rgba(5,3,7,.55)}
.op-reveal .words > *{opacity:0;transform:translateY(12px);transition:opacity 1.4s var(--ease),transform 1.4s var(--out)}
.op-reveal.on .words > *{opacity:1;transform:none}
.op-reveal.on .words > :nth-child(1){transition-delay:1.4s}
.op-reveal.on .words > :nth-child(2){transition-delay:1.9s}
.op-reveal.on .words > :nth-child(3){transition-delay:2.8s}
.op-reveal.on .words > :nth-child(4){transition-delay:3.8s}
.op-reveal .op-kicker{color:rgba(246,239,225,.7);margin-bottom:12px}
.op-reveal .op-display{color:#fbf4e6;margin-bottom:18px}
.op-reveal .op-say{color:rgba(246,239,225,.9);font-size:20px;margin-bottom:28px}
.op-reveal .op-btn{background:#f3dcab;color:#1b130a}

/* loading and the locked door */
.op-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 30px}
.op-center .op-fine{margin-top:16px;max-width:320px}
.op-pulse{width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 30px var(--gold);animation:op-orb 2.4s ease-in-out infinite;margin-bottom:26px}
.op-door{width:100%;max-width:340px;margin-top:26px;display:grid;gap:12px}

/* toast */
.op-toast{position:absolute;z-index:90;left:50%;top:calc(var(--st) + 16px);max-width:calc(100% - 40px);transform:translate(-50%,-20px);padding:13px 20px;border-radius:18px;background:var(--ink);color:var(--bg);font:500 13.5px/1.35 var(--sans);text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.3);opacity:0;transition:opacity .35s,transform .45s var(--out);pointer-events:none}
.op-toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .op *,.op *::before,.op *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------------ her meditations: one card for each, in her world's pictures */
.op-hero.op-medcard{height:min(290px,74vw);cursor:pointer}
.op-medcard + .op-medcard{margin-top:14px}
.op-medcard .title{font-size:30px}
.op-medcard.shut{cursor:default}
.op-medcard.shut .pic img.on{opacity:.42;filter:saturate(.6)}
.op-medcard.shut .op-play{width:52px;height:52px;background:rgba(10,7,14,.45);color:#f3e9d6;box-shadow:inset 0 0 0 1px rgba(246,238,223,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.op-medcard.shut .op-play svg{width:20px;height:20px}
.op-medcard.waiting .op-play{animation:op-orb 2.6s ease-in-out infinite}
.op-medsnote{text-align:center;padding:22px 32px 6px}

/* ------------------------------------------------------------------ the first walk through their space */
.op-tour{position:absolute;inset:0;z-index:95;opacity:0;transition:opacity .38s var(--ease)}
.op-tour.on{opacity:1}
.op-tour .shade{position:absolute;inset:0;width:100%;height:100%;display:block}
.op-tour .shade path{fill:rgba(5,3,8,.74)}
.op[data-theme=day] .op-tour .shade path{fill:rgba(30,22,14,.58)}
.op-tour .ring{position:absolute;pointer-events:none;box-shadow:0 0 0 1.5px var(--gold2),0 0 34px rgba(240,214,162,.32)}
.op-tour .ring[hidden]{display:none}
.op-tour .card{position:absolute;left:16px;right:16px;padding:22px 22px 16px;border-radius:26px;background:var(--bg);color:var(--ink2);box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 0 0 1px var(--line2);transition:top .42s var(--out)}
.op-tour .card.in{animation:op-in .45s var(--out) both}
.op-tour .card .op-kicker{color:var(--gold)}
.op-tour .card .op-h3{margin:10px 0 8px}
.op-tour .card .op-fine{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.op-tour .card .row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.op-tour .card .row [hidden]{display:none}
.op-tour .card .row .op-btn{margin-left:auto}
@media (prefers-reduced-motion:reduce){.op-tour .card{transition:none}.op-tour .card.in{animation:none}}

/* ------------------------------------------------------------------ keep her close: their home screen */
.op-keep{background:var(--bg)}
.op-keep::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 110% 46% at 50% -6%,var(--glow),transparent 70%),radial-gradient(ellipse 70% 30% at 50% 42%,var(--glow2),transparent 72%)}
.op-keep > *{position:relative}
.op-keep .top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--st) + 14px) 16px 0}
.op-keep .top p{font:500 11.5px/1 var(--sans);letter-spacing:.2em;color:var(--muted)}
.op-keep .body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px 24px 30px;-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.op-keep.added .body{display:flex;flex-direction:column;justify-content:center;padding-bottom:56px}
.op-keep .body::-webkit-scrollbar{display:none}
.op-keep .op-kicker{color:var(--gold)}
.op-keep .op-display{font-size:42px;margin:12px 0 10px}
.op-keep .lede{font:400 15.5px/1.55 var(--sans);color:var(--ink2);max-width:34em}
.op-keep-home{position:relative;margin:22px 0 4px;height:110px;border-radius:28px;overflow:hidden;background:#120d1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),var(--card-shadow);isolation:isolate}
.op-keep-home .wall{position:absolute;inset:-24px;background:#1a1224 center/cover no-repeat;filter:blur(16px) saturate(1.15) brightness(.5);transform:scale(1.08)}
.op-keep-home .row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;padding:17px 10px 0}
.op-keep-home .app{display:flex;flex-direction:column;align-items:center;gap:8px;width:64px}
.op-keep-home .app i{display:block;width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.op-keep-home .app.blank > span{width:36px;height:7px;border-radius:4px;background:rgba(255,255,255,.14);margin-top:3px}
.op-keep-home .app.her img{display:block;width:54px;height:54px;border-radius:14px;box-shadow:0 0 0 1px rgba(240,214,162,.45),0 10px 30px rgba(0,0,0,.45),0 0 30px rgba(240,214,162,.34);animation:op-keep-land 1s var(--out) .45s both,op-keep-glow 3.4s ease-in-out 1.6s infinite}
.op-keep-home .app.her > span{font:500 11px/1 var(--sans);letter-spacing:.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;animation:op-in .6s var(--out) .9s both}
@keyframes op-keep-land{0%{opacity:0;transform:translateY(-22px) scale(.55)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes op-keep-glow{0%,100%{box-shadow:0 0 0 1px rgba(240,214,162,.45),0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(240,214,162,.26)}50%{box-shadow:0 0 0 1px rgba(240,214,162,.7),0 10px 30px rgba(0,0,0,.45),0 0 42px rgba(240,214,162,.5)}}
.op-keep.added .op-keep-home .app.her img{animation:op-keep-glow 2.2s ease-in-out infinite}
.op-keep-steps{display:grid;gap:10px;margin-top:22px}
.op-keep-steps li{display:flex;gap:14px;align-items:flex-start;padding:15px 16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.op-keep-steps li > b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font:italic 400 16px/1 var(--serif);color:var(--gold)}
.op-keep-steps li > p{flex:1;min-width:0;padding-top:3px;font:400 15px/1.75 var(--sans);color:var(--ink)}
.op-keep em,.op-keep-note b{font-style:normal;font-weight:500;color:var(--gold2)}
.op[data-theme=day] .op-keep em,.op[data-theme=day] .op-keep-note b{color:var(--gold)}
.op-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;margin:0 1px;border-radius:14px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font:500 12.5px/1 var(--sans);vertical-align:middle;white-space:nowrap}
.op-chip svg{width:16px;height:16px}
.op-keep-note{margin-top:22px;padding:16px 18px;border-radius:20px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--goldline);font:400 14.5px/1.75 var(--sans);color:var(--ink2)}
.op-keep-after{margin-top:14px;padding:0 4px}
.op-keep-key{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:0 4px}
.op-keep-key svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--gold)}
.op-keep .dock{display:grid;gap:10px;padding:12px 16px calc(var(--sb) + 12px);box-shadow:inset 0 1px 0 var(--line);background:var(--bar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.op-keep .dock .row{display:flex;gap:10px}
.op-keep .dock .row .op-btn{height:52px}
.op-keep .dock [data-q=done]{flex:1}
.op-keep .dock .op-btn svg{width:18px;height:18px}
.op-keep-later{flex:none;padding:0 22px}
.op-keep-strip{display:flex;align-items:center;gap:13px;padding:9px 10px 9px 9px;border-radius:20px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)}
.op-keep-strip .pic{flex:none;width:44px;height:44px;border-radius:13px;background:#1a1224 center/cover no-repeat}
.op-keep-strip .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.op-keep-strip .kick{font:500 10.5px/1.2 var(--sans);letter-spacing:.18em;color:var(--muted)}
.op-keep-strip .stage{margin-top:4px;font:italic 400 17px/1.2 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-keep-strip .line{display:block;height:3px;margin-top:8px;border-radius:2px;background:var(--line2);overflow:hidden}
.op-keep-strip .line i{display:block;height:100%;width:6%;border-radius:2px;background:var(--gold);transition:width 1.2s var(--ease)}
.op-keep-strip .op-btn{flex:none;height:40px;padding:0 16px;font-size:12px;gap:7px}
.op-keep-strip .op-btn svg{width:14px;height:14px}
.op-keep-strip.arrived{animation:op-keep-ready 1.6s var(--out) both}
@keyframes op-keep-ready{0%{box-shadow:inset 0 0 0 1px var(--line),0 0 0 0 rgba(240,214,162,.5)}40%{box-shadow:inset 0 0 0 1px var(--goldline),0 0 0 10px rgba(240,214,162,0)}100%{box-shadow:inset 0 0 0 1px var(--goldline)}}
/* on today, in their first week: a small way back to it */
.op-keep-nudge{display:flex;align-items:center;gap:13px;margin:14px 16px 0;padding:12px 10px 12px 12px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:opacity .4s,transform .4s var(--out)}
.op-keep-nudge.gone{opacity:0;transform:scale(.96)}
.op-keep-nudge img{flex:none;width:46px;height:46px;border-radius:12px;box-shadow:0 0 0 1px var(--goldline)}
.op-keep-nudge .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.op-keep-nudge .t b{font:500 14px/1.3 var(--sans);color:var(--ink)}
.op-keep-nudge .t small{font:400 12.5px/1.35 var(--sans);color:var(--muted)}
.op-keep-nudge .op-btn{flex:none;height:38px;padding:0 15px;font-size:12px}
.op-x{flex:none;width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.op-x svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.op-keep-home .app.her img,.op-keep-home .app.her > span,.op-keep-strip.arrived{animation:none}}