/* The +ve app, rebuilt for the web at the app's own measurements.
   1 --pt = one iOS point on a 402pt-wide iPhone, scaled to the phone's width. */
.phone{--pw:320px;--pt:calc(var(--pw) / 402);position:relative;width:var(--pw);max-width:100%;aspect-ratio:402/874;
  border-radius:calc(62 * var(--pt));padding:calc(11 * var(--pt));background:#0b0a09;flex:none;
  box-shadow:inset 0 0 0 calc(1.5 * var(--pt)) rgba(255,255,255,.1),0 calc(60 * var(--pt)) calc(100 * var(--pt)) calc(-36 * var(--pt)) rgba(24,20,16,.55),0 calc(22 * var(--pt)) calc(36 * var(--pt)) calc(-22 * var(--pt)) rgba(24,20,16,.45);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Pinned inside the bezel: Safari resolves height:100% against the frame's border box here, which pushed the screen out past the bottom of the frame.
   clip-path keeps the rounded corners while Chrome scrolls or animates on the GPU; overflow + radius alone let the lock screen show square corners. */
.phone .screen{position:absolute;inset:calc(11 * var(--pt));border-radius:calc(52 * var(--pt));overflow:hidden;clip-path:inset(0 round calc(52 * var(--pt)));background:var(--cream);color:var(--ink);isolation:isolate;contain:layout paint}
.phone .island{position:absolute;z-index:30;top:calc(11 * var(--pt));left:50%;transform:translateX(-50%);width:calc(124 * var(--pt));height:calc(36 * var(--pt));border-radius:99px;background:#000}
.phone .sbar{position:absolute;z-index:29;top:0;left:0;right:0;height:calc(54 * var(--pt));display:flex;align-items:center;justify-content:space-between;padding:calc(4 * var(--pt)) calc(32 * var(--pt)) 0 calc(44 * var(--pt));font:600 calc(17 * var(--pt))/1 var(--f-ui);color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none;transition:color .5s}
.phone .sbar .ic{display:flex;gap:calc(6 * var(--pt));align-items:center}
.phone .sbar svg{height:calc(12 * var(--pt));width:auto}
.phone .homebar{position:absolute;z-index:29;left:50%;bottom:calc(8 * var(--pt));transform:translateX(-50%);width:calc(140 * var(--pt));height:calc(5 * var(--pt));border-radius:9px;background:var(--ink);opacity:.9;pointer-events:none}

/* ---------- lock screen ---------- */
.phone .lock{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;padding-top:calc(78 * var(--pt));
  background:radial-gradient(120% 55% at 25% 105%,rgba(255,138,92,.85) 0%,rgba(255,174,26,.35) 38%,rgba(255,174,26,0) 70%),linear-gradient(180deg,#F3E2D3 0%,#FAF1E6 46%,#FFE2C9 100%);
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.phone .lock{cursor:pointer}
.phone .lock.gone{opacity:0;transform:scale(1.08);pointer-events:none}
.phone .lock .date{font:600 calc(19 * var(--pt)) var(--f-ui);color:rgba(24,20,16,.62)}
.phone .lock .time{font:600 calc(96 * var(--pt))/1 var(--f-ui);letter-spacing:-.035em;color:rgba(24,20,16,.86);font-variant-numeric:tabular-nums}
.phone .notif{position:absolute;left:calc(12 * var(--pt));right:calc(12 * var(--pt));top:calc(344 * var(--pt));display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(11 * var(--pt));align-items:start;
  padding:calc(13 * var(--pt)) calc(14 * var(--pt));border-radius:calc(24 * var(--pt));text-align:left;color:var(--ink);
  background:rgba(255,253,248,.62);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(24,20,16,.14),inset 0 0 0 1px rgba(255,255,255,.65);
  opacity:0;transform:translateY(calc(26 * var(--pt))) scale(.96);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.phone .notif.in{opacity:1;transform:none}
.phone .notif:active{transform:scale(.97)}
.phone .appico{width:calc(38 * var(--pt));height:calc(38 * var(--pt));border-radius:calc(9 * var(--pt));background:var(--grad);display:grid;place-items:center;flex:none}
.phone .appico svg{width:100%;height:100%}
.phone .nhead{display:flex;justify-content:space-between;gap:8px;font:600 calc(15 * var(--pt))/1.3 var(--f-ui)}
.phone .nhead span{font-weight:400;color:rgba(24,20,16,.55);white-space:nowrap}
.phone .nhead b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .nbody{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:400 calc(15 * var(--pt))/1.32 var(--f-ui);margin-top:calc(2 * var(--pt))}
.phone .lockbtns{position:absolute;left:calc(46 * var(--pt));right:calc(46 * var(--pt));bottom:calc(46 * var(--pt));display:flex;justify-content:space-between;pointer-events:none}
.phone .lockbtns i{width:calc(50 * var(--pt));height:calc(50 * var(--pt));border-radius:50%;background:rgba(24,20,16,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center}
.phone .lockbtns svg{width:44%;height:44%;color:rgba(24,20,16,.7)}
.phone .lockhint{position:absolute;bottom:calc(112 * var(--pt));font:500 calc(12 * var(--pt)) var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(24,20,16,.5);opacity:0;transition:opacity 1s 1.4s}
.phone .notif.in~.lockhint{opacity:1}

/* ---------- the app ---------- */
.phone .app{position:absolute;inset:0;z-index:1;background:var(--cream)}
.phone .topbar{position:absolute;z-index:6;top:calc(62 * var(--pt));left:calc(16 * var(--pt));right:calc(12 * var(--pt));display:flex;justify-content:space-between;align-items:center}
.phone .topbar>span{display:flex;gap:calc(2 * var(--pt))}
.phone .glyph{width:calc(44 * var(--pt));height:calc(44 * var(--pt));display:grid;place-items:center;color:var(--faint);border-radius:50%;transition:color .3s,background .3s,transform .25s var(--ease)}
.phone .glyph:active{transform:scale(.88);background:rgba(24,20,16,.06)}
.phone .glyph svg{width:calc(20 * var(--pt));height:calc(20 * var(--pt))}
.phone .glyph.on{color:var(--coral)}
.phone .deck{position:absolute;top:calc(54 * var(--pt));bottom:calc(34 * var(--pt));left:0;right:0;overflow:hidden;touch-action:none;cursor:grab}
.phone .deck.drag{cursor:grabbing}
.phone .track{position:absolute;inset:0;will-change:transform}
.phone .track.anim{transition:transform .58s cubic-bezier(.2,.9,.25,1)}
.phone .page{position:absolute;left:0;right:0;height:100%;display:flex;flex-direction:column;padding:calc(16 * var(--pt)) calc(30 * var(--pt)) calc(24 * var(--pt))}
.phone .track.anim .page{transition:opacity .58s cubic-bezier(.2,.9,.25,1),transform .58s cubic-bezier(.2,.9,.25,1)}
.phone .page .ctr{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.phone .src{font:500 calc(15 * var(--pt))/1.2 var(--f-mono);letter-spacing:calc(1 * var(--pt));color:var(--coral)}
.phone .lane{font:500 calc(11 * var(--pt))/1.2 var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--faint);margin-top:calc(4 * var(--pt))}
.phone .mtext{font:italic 400 calc(26 * var(--pt))/1.47 var(--f-serif);color:var(--ink);margin-top:calc(36 * var(--pt));text-wrap:pretty}
.phone .attr{font:500 calc(15 * var(--pt))/1.4 var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--faint);margin-top:calc(22 * var(--pt))}
.phone .acts{display:flex;justify-content:center;gap:calc(36 * var(--pt));padding-top:calc(28 * var(--pt))}
.phone .act{display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--pt));position:relative}
.phone .circ{position:relative;width:calc(64 * var(--pt));height:calc(64 * var(--pt));border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 calc(1.5 * var(--pt)) var(--ink);transition:box-shadow .2s,transform .2s var(--ease)}
.phone .circ::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--grad);opacity:0;transition:opacity .2s var(--ease)}
.phone .circ svg{position:relative;width:calc(26 * var(--pt));height:calc(26 * var(--pt));color:var(--ink);transition:color .2s}
.phone .act:active .circ{transform:scale(.93)}
.phone .act.on .circ,.phone .act.flash .circ{box-shadow:inset 0 0 0 calc(1.5 * var(--pt)) transparent}
.phone .act.on .circ::before,.phone .act.flash .circ::before{opacity:1}
.phone .act.on .circ svg,.phone .act.flash .circ svg{color:var(--cream)}
.phone .act .fill{display:none}
.phone .act.on .fill{display:block}
.phone .act.on .hollow{display:none}
.phone .act small{font:500 calc(13 * var(--pt))/1 var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--soft)}
.phone .bloom{position:absolute;left:50%;top:calc(32 * var(--pt));width:calc(140 * var(--pt));height:calc(140 * var(--pt));margin:calc(-70 * var(--pt)) 0 0 calc(-70 * var(--pt));border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,77,46,.5) 0%,rgba(255,174,26,.25) 45%,rgba(255,174,26,0) 72%);opacity:0;transform:scale(.3)}
.phone .bloom.go{animation:bloom .42s ease-out}
@keyframes bloom{0%{opacity:.75;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
.phone .page.dissolve{opacity:0!important;transform:scale(.95)!important;transition:opacity .3s ease-out,transform .3s ease-out!important}

.phone .endp{align-items:center;justify-content:center;text-align:center;overflow:hidden}
.phone .endp .glow{position:absolute;left:50%;bottom:calc(-180 * var(--pt));width:calc(490 * var(--pt));height:calc(360 * var(--pt));transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,77,46,.17),rgba(255,174,26,.09) 55%,rgba(255,174,26,0) 75%);pointer-events:none}
.phone .endp .dol{position:absolute;top:calc(56 * var(--pt));left:0;right:0;font:500 calc(13 * var(--pt)) var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--faint)}
.phone .endp b{font:400 calc(38 * var(--pt))/1.1 var(--f-display);color:var(--ink)}
.phone .endp span.sub{font:500 calc(21 * var(--pt)) var(--f-ui);color:var(--soft);margin-top:calc(14 * var(--pt))}
.phone .endp .pm{width:calc(36 * var(--pt));height:calc(36 * var(--pt));border-radius:calc(10.8 * var(--pt));margin-top:calc(42 * var(--pt))}
.phone .endp .rv{opacity:0;transition:opacity .6s ease-out}
.phone .endp .pm.rv{transition:opacity .4s ease-out .2s}
.phone .endp.shown .rv{opacity:1}
.phone .again{margin-top:calc(26 * var(--pt));min-height:calc(44 * var(--pt));font:500 calc(12 * var(--pt)) var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--faint)}

/* banner (InfoBanner) */
.phone .banner{position:absolute;z-index:8;top:calc(62 * var(--pt));left:calc(18 * var(--pt));right:calc(18 * var(--pt));padding:calc(18 * var(--pt));border-radius:calc(16 * var(--pt));
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 calc(8 * var(--pt)) calc(18 * var(--pt)) rgba(24,20,16,.08);font:400 calc(16 * var(--pt))/1.4 var(--f-ui);text-align:left;
  opacity:0;transform:translateY(calc(-20 * var(--pt)));transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none}
.phone .banner.on{opacity:1;transform:none;pointer-events:auto}

/* sheets */
.phone .sheetwrap{position:absolute;inset:0;z-index:12}
.phone .dim{position:absolute;inset:0;background:rgba(24,20,16,.28);opacity:0;transition:opacity .4s}
.phone .sheetwrap.on .dim{opacity:1}
.phone .sheet{position:absolute;left:0;right:0;bottom:0;max-height:90%;display:flex;flex-direction:column;background:var(--cream);border-radius:calc(38 * var(--pt)) calc(38 * var(--pt)) 0 0;
  padding:calc(10 * var(--pt)) calc(24 * var(--pt)) calc(40 * var(--pt));transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.9,.25,1);box-shadow:0 -10px 40px rgba(24,20,16,.12)}
.phone .sheetwrap.on .sheet{transform:none}
.phone .grab{width:calc(36 * var(--pt));height:calc(5 * var(--pt));border-radius:9px;background:rgba(24,20,16,.18);margin:0 auto calc(14 * var(--pt))}
.phone .sheet h4{font:400 calc(26 * var(--pt))/1.15 var(--f-display);margin:calc(6 * var(--pt)) 0 0;color:var(--ink)}
.phone .sheet .cap{font:400 calc(16 * var(--pt))/1.45 var(--f-ui);color:var(--soft);margin-top:calc(10 * var(--pt))}
.phone .sheet .scroll{overflow:auto;min-height:0;margin-top:calc(18 * var(--pt));-webkit-overflow-scrolling:touch}
.phone .chips{display:flex;flex-wrap:wrap;gap:calc(8 * var(--pt))}
.phone .chip{min-height:calc(40 * var(--pt));padding:0 calc(16 * var(--pt));border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--paper);font:500 calc(15 * var(--pt)) var(--f-ui);color:var(--ink);transition:background .25s,color .25s,box-shadow .25s,transform .2s var(--ease)}
.phone .chip:active{transform:scale(.95)}
.phone .chip[aria-pressed="true"]{background:var(--ink);color:var(--cream);box-shadow:none}
.phone .sec{font:500 calc(11 * var(--pt)) var(--f-mono);letter-spacing:calc(2 * var(--pt));text-transform:uppercase;color:var(--faint);margin:calc(20 * var(--pt)) 0 calc(10 * var(--pt))}
.phone .sec:first-child{margin-top:0}
.phone .pbtn{margin-top:calc(22 * var(--pt));width:100%;min-height:calc(54 * var(--pt));border-radius:999px;background:var(--ink);color:var(--cream);font:600 calc(17 * var(--pt)) var(--f-ui);transition:transform .2s var(--ease)}
.phone .pbtn.grad{background:var(--grad);color:var(--ink)}
.phone .pbtn:active{transform:scale(.97)}
.phone .lbtn{display:block;margin:calc(10 * var(--pt)) auto 0;min-height:calc(44 * var(--pt));font:500 calc(15 * var(--pt)) var(--f-ui);color:var(--soft)}
.phone .priv{font:500 calc(12 * var(--pt))/1.45 var(--f-mono);color:var(--faint);margin-top:calc(14 * var(--pt))}
.phone .vitem{padding:calc(16 * var(--pt)) 0;border-bottom:1px solid var(--line)}
.phone .vitem p{font:italic 400 calc(18 * var(--pt))/1.42 var(--f-serif)}
.phone .vitem small{display:block;margin-top:calc(8 * var(--pt));font:500 calc(11 * var(--pt))/1.4 var(--f-mono);letter-spacing:calc(1.5 * var(--pt));text-transform:uppercase;color:var(--faint)}
.phone .empty{font:italic 400 calc(19 * var(--pt))/1.45 var(--f-serif);color:var(--soft);padding:calc(30 * var(--pt)) 0 calc(10 * var(--pt))}
.phone .sharecard{background:var(--paper);border-radius:calc(16 * var(--pt));box-shadow:inset 0 0 0 1px var(--line),0 calc(16 * var(--pt)) calc(30 * var(--pt)) calc(-16 * var(--pt)) rgba(24,20,16,.2);padding:calc(24 * var(--pt))}
.phone .sharecard p{font:italic 400 calc(19 * var(--pt))/1.45 var(--f-serif)}
.phone .sharecard small{display:block;margin-top:calc(14 * var(--pt));font:500 calc(11 * var(--pt))/1.4 var(--f-mono);letter-spacing:calc(1.5 * var(--pt));text-transform:uppercase;color:var(--faint)}
.phone .sharecard .sig{display:flex;align-items:center;gap:calc(8 * var(--pt));margin-top:calc(18 * var(--pt));font:400 calc(14 * var(--pt)) var(--f-display)}
.phone .sharecard .sig i{width:calc(18 * var(--pt));height:calc(18 * var(--pt));border-radius:calc(5 * var(--pt));background:var(--grad);display:grid;place-items:center}
.phone .sharecard .sig svg{width:100%;height:100%}

/* action sheet (Not for me) */
.phone .asheet{position:absolute;left:calc(10 * var(--pt));right:calc(10 * var(--pt));bottom:calc(30 * var(--pt));display:grid;gap:calc(8 * var(--pt));transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.phone .sheetwrap.on .asheet{transform:none}
.phone .agroup{border-radius:calc(16 * var(--pt));overflow:hidden;background:rgba(255,253,248,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.phone .agroup p{font:600 calc(13 * var(--pt)) var(--f-ui);color:var(--soft);text-align:center;padding:calc(14 * var(--pt))}
.phone .agroup button{display:block;width:100%;min-height:calc(56 * var(--pt));border-top:1px solid var(--line);font:400 calc(19 * var(--pt)) var(--f-ui);color:var(--coral)}
.phone .agroup button.keep{border-top:0;font-weight:600;color:var(--ink)}

.phone .ptoast{position:absolute;z-index:14;left:50%;bottom:calc(150 * var(--pt));transform:translate(-50%,10px);padding:calc(10 * var(--pt)) calc(16 * var(--pt));border-radius:99px;background:var(--ink);color:var(--cream);font:500 calc(14 * var(--pt)) var(--f-ui);white-space:nowrap;opacity:0;transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.phone .ptoast.on{opacity:1;transform:translate(-50%,0)}