/* AltusMail Web — authentic modern iOS UI.
   Built to Apple's iOS design language: system grouped background, inset
   grouped lists, Large Titles, translucent materials (blur + saturate) on
   nav bars / tab bar / sheets, iOS system colours and type, chevrons and
   badges, floating Liquid-Glass bottom bar, and iOS spring motion —
   navigation pushes with parallax, sheets spring up with a grabber,
   controls press with a spring scale. Dark Mode follows the system. */
:root{
  --blue:#007aff; --blue-press:#0062cc; --blue-tint:rgba(0,122,255,.12);
  --red:#ff3b30; --green:#34c759; --orange:#ff9500; --yellow:#ffcc00; --purple:#af52de; --teal:#5ac8fa; --pink:#ff2d55;
  --bg:#f2f2f7; --card:#ffffff; --fill:rgba(120,120,128,.12); --fill-2:rgba(120,120,128,.2);
  --label:#000000; --label-2:rgba(60,60,67,.6); --label-3:rgba(60,60,67,.3);
  --sep:rgba(60,60,67,.14); --sep-strong:rgba(60,60,67,.29);
  --material:rgba(248,248,250,.78); --glass:rgba(255,255,255,.68);
  --shadow-bar:0 8px 28px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
  --shadow-sheet:0 -12px 44px rgba(0,0,0,.22);
  --ios:cubic-bezier(.32,.72,0,1);          /* iOS navigation spring */
  --pop:cubic-bezier(.34,1.35,.44,1);       /* spring with a little life */
  --r-group:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000000; --card:#1c1c1e; --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.32);
    --label:#ffffff; --label-2:rgba(235,235,245,.6); --label-3:rgba(235,235,245,.3);
    --sep:rgba(84,84,88,.5); --sep-strong:rgba(84,84,88,.65);
    --material:rgba(28,28,30,.72); --glass:rgba(38,38,42,.62);
    --blue-tint:rgba(10,132,255,.22); --blue:#0a84ff;
    --shadow-bar:0 8px 28px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
html,body{height:100%}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--label); background:var(--bg); overflow:hidden; font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased}
button{font:inherit; background:none; border:0; cursor:pointer; color:var(--blue); -webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit; color:var(--label); caret-color:var(--blue)}
::placeholder{color:var(--label-3); opacity:1}
::selection{background:rgba(0,122,255,.28)}
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px; border-radius:8px}
[hidden]{display:none !important}
.svg-sprite{position:absolute; width:0; height:0; overflow:hidden}
.icon{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px}
.icon-inline{width:15px; height:15px; vertical-align:-2px}
.icon-tool{width:22px; height:22px}
.icon-empty{width:54px; height:54px; color:var(--label-3); stroke-width:1.2}
.app{position:fixed; inset:0; overflow:hidden; background:var(--bg)}

/* ---------- iOS navigation stack: push + parallax ---------- */
.view{position:absolute; inset:0; padding-top:env(safe-area-inset-top,0px); display:flex; flex-direction:column; background:var(--bg); transform:translateX(102%); visibility:hidden; box-shadow:-14px 0 34px rgba(0,0,0,.16); transition:transform .46s var(--ios), visibility 0s .46s; will-change:transform}
.view.behind{transform:translateX(-24%); visibility:visible; filter:brightness(.94); transition:transform .46s var(--ios); pointer-events:none}
.view.active{transform:none; visibility:visible; transition:transform .46s var(--ios); pointer-events:auto}
.scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 16px 118px; scrollbar-width:thin; scrollbar-color:var(--sep-strong) transparent}
.scroll::-webkit-scrollbar{width:0}
.navbar{padding:8px 16px 10px; background:var(--material); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-bottom:.5px solid var(--sep); z-index:5; position:relative}
.navbar.slim{padding-bottom:8px}
.nav-row{display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:8px}
.nav-action{font-size:17px; padding:7px 6px; border-radius:10px; transition:transform .18s var(--pop), opacity .15s}
.nav-action:active{transform:scale(.93); opacity:.55}
.nav-back{font-size:17px; padding:7px 6px 7px 0; border-radius:10px; transition:transform .18s var(--pop), opacity .15s}
.nav-back:active{transform:scale(.93); opacity:.55}
.nav-spacer{width:56px}
.nav-tools{display:flex; gap:2px}
.tool{width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--blue); transition:transform .18s var(--pop), background .15s}
.tool:active{transform:scale(.86); background:var(--fill)}
.tool.on{color:var(--orange)}
.tool.on .icon{fill:var(--yellow); stroke:var(--orange)}
.tool.danger{color:var(--red)}
.large-title{font-size:34px; font-weight:700; letter-spacing:-.022em; margin:4px 0 6px; line-height:1.12; animation:titleIn .5s var(--ios)}
@keyframes titleIn{from{opacity:0; transform:translateY(8px)}}
.form-error{color:var(--red); font-size:14.5px; min-height:19px; margin:11px 2px 0}
.spinner{width:19px; height:19px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; display:inline-block; flex:none}
.spinner.dark{border-color:var(--fill-2); border-top-color:var(--label-2)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex; justify-content:center; padding:20px}
.skel-row{display:flex; gap:12px; padding:13px 2px; border-bottom:.5px solid var(--sep)}
.skel-dot{width:42px; height:42px; border-radius:50%; flex:none}
.skel-lines{flex:1; display:flex; flex-direction:column; gap:8px; padding-top:3px}
.skel-line{height:11px; border-radius:6px}
.skel-dot,.skel-line,.skel-block{background:linear-gradient(90deg,var(--fill) 25%,var(--fill-2) 50%,var(--fill) 75%); background-size:200% 100%; animation:skelPulse 1.25s linear infinite}
.skel-block{height:13px; border-radius:6px; margin:12px 0}
@keyframes skelPulse{from{background-position:180% 0}to{background-position:-20% 0}}
.w40{width:40%}.w70{width:70%}.w90{width:90%}

/* ---------- login ---------- */
#view-login{background:var(--bg)}
.splash-note{color:var(--label-2); font-size:16.5px; margin:22px 0 16px; animation:riseIn .55s var(--ios) .1s backwards}
.login-wrap{flex:1; width:100%; max-width:400px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 26px 56px; text-align:center; overflow-y:auto}
.app-icon{width:92px; height:92px; border-radius:22.5%; overflow:hidden; box-shadow:0 14px 30px rgba(0,122,255,.35), 0 3px 8px rgba(0,0,0,.16); animation:iconPop .65s var(--pop); flex:none}
.app-icon svg{width:100%; height:100%; display:block}
@keyframes iconPop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1); opacity:1}}
.login-title{font-size:34px; font-weight:700; letter-spacing:-.022em; margin:20px 0 2px; animation:riseIn .55s var(--ios) .06s backwards}
.login-sub{color:var(--label-2); margin:0 0 28px; font-size:17px; animation:riseIn .55s var(--ios) .12s backwards}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}}
.login-form{width:100%; animation:riseIn .55s var(--ios) .18s backwards}
.field-group{background:var(--card); border-radius:var(--r-group); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.field{display:flex; align-items:center; gap:10px; padding:12px 16px; min-height:50px; position:relative}
.field + .field::before{content:""; position:absolute; top:0; left:92px; right:0; height:.5px; background:var(--sep)}
.field span{width:66px; text-align:left; font-size:16px; flex:none}
.field input{flex:1; border:0; outline:0; font-size:16.5px; background:transparent; min-width:0}
.btn-primary{width:100%; margin-top:20px; background:var(--blue); color:#fff; font-weight:600; font-size:17px; min-height:52px; padding:12px 18px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 8px 20px rgba(0,122,255,.3); transition:transform .18s var(--pop), background .15s, box-shadow .15s}
.btn-primary:active{transform:scale(.965); background:var(--blue-press)}
.btn-primary:disabled{background:var(--fill-2); color:var(--label-3); box-shadow:none}
.shake{animation:shake .45s var(--ios)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.login-foot{color:var(--label-2); font-size:13.5px; line-height:1.55; margin-top:26px; animation:riseIn .55s var(--ios) .24s backwards}

/* ---------- folders (Mailboxes) ---------- */
.account-card{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:var(--r-group); padding:13px 16px; margin:10px 0 22px; box-shadow:0 1px 2px rgba(0,0,0,.05); animation:riseIn .5s var(--ios)}
.avatar{flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:17px; text-shadow:0 1px 2px rgba(0,0,0,.18)}
.account-meta{flex:1; min-width:0; display:flex; flex-direction:column}
.account-meta strong{font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.account-meta span{color:var(--green); font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:5px}
.account-meta span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
.unread-pill{background:var(--blue); color:#fff; font-size:14px; font-weight:600; min-width:26px; height:22px; padding:1px 8px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.group{background:var(--card); border-radius:var(--r-group); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.folder-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 16px 11px 14px; min-height:52px; color:var(--label); position:relative; transition:background .12s; animation:rowIn .45s var(--ios) backwards; animation-delay:var(--d,0s)}
.folder-row + .folder-row::before{content:""; position:absolute; top:0; left:56px; right:0; height:.5px; background:var(--sep)}
.folder-row:active{background:var(--fill)}
.folder-row.selected{background:var(--blue-tint)}
.f-icon{color:var(--blue); display:flex}
.f-icon .icon{width:23px; height:23px; stroke-width:1.6}
.f-name{flex:1; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-count{color:var(--label-2); font-size:16px; font-variant-numeric:tabular-nums}
.folder-row .badge{background:var(--blue); color:#fff; font-size:13.5px; font-weight:600; min-width:23px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.chev{color:var(--label-3); font-size:21px; font-weight:600; line-height:1; margin-left:1px}
.hint{color:var(--label-2); font-size:13.5px; margin:16px 16px; line-height:1.5}

/* ---------- floating glass tab bar (Liquid Glass) ---------- */
.tabbar{position:absolute; left:14px; right:14px; bottom:calc(12px + env(safe-area-inset-bottom)); min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px 8px 20px; background:var(--glass); -webkit-backdrop-filter:blur(26px) saturate(190%); backdrop-filter:blur(26px) saturate(190%); border:.5px solid rgba(255,255,255,.55); border-radius:999px; box-shadow:var(--shadow-bar); z-index:6; animation:barIn .55s var(--pop) .1s backwards}
@keyframes barIn{from{opacity:0; transform:translateY(22px) scale(.96)}}
.tab-note{color:var(--label-2); font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.compose-fab{width:46px; height:46px; flex:none; border-radius:50%; background:linear-gradient(180deg,#0a84ff,#0071e3); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,122,255,.42), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .18s var(--pop)}
.compose-fab:active{transform:scale(.84)}
.compose-fab .icon{stroke-width:1.9}

/* ---------- message list (Mail style) ---------- */
#view-list .navbar{padding-bottom:12px}
.searchbar{display:flex; align-items:center; gap:7px; background:var(--fill); border-radius:11px; padding:8px 11px; color:var(--label-2); margin-top:8px; min-height:38px; transition:box-shadow .18s, background .18s}
.searchbar:focus-within{background:var(--card); box-shadow:0 0 0 3.5px rgba(0,122,255,.35)}
.searchbar .icon{width:17px; height:17px}
.searchbar input{flex:1; border:0; outline:0; background:transparent; font-size:16.5px; min-width:0}
#view-list .scroll{padding:0 0 118px; background:var(--card)}
#messageList{background:var(--card)}
.msg-row{display:flex; gap:10px; width:100%; text-align:left; padding:11px 16px 12px 12px; color:var(--label); position:relative; transition:background .12s; animation:rowIn .45s var(--ios) backwards; animation-delay:var(--d,0s)}
@keyframes rowIn{from{opacity:0; transform:translateY(12px)}}
.msg-row + .msg-row::before{content:""; position:absolute; top:0; left:34px; right:0; height:.5px; background:var(--sep)}
.msg-row:active{background:var(--fill)}
.msg-row.selected{background:var(--blue-tint)}
.msg-row .dot{flex:none; width:11px; height:11px; border-radius:50%; margin-top:7px; background:transparent}
.msg-row .dot.unread-dot{background:var(--blue); animation:dotIn .4s var(--pop)}
.msg-row .dot.off{background:transparent}
@keyframes dotIn{from{transform:scale(0)}}
.msg-main{flex:1; min-width:0; display:flex; flex-direction:column}
.msg-top{display:flex; align-items:baseline; gap:8px}
.msg-from{flex:1; font-size:17px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-row.unread .msg-from{font-weight:700}
.msg-date{color:var(--label-2); font-size:15px; flex:none; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:2px}
.msg-date .chev{font-size:17px}
.msg-subj{font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-row.unread .msg-subj{font-weight:600}
.msg-prev{color:var(--label-2); font-size:15px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.msg-flags{display:flex; gap:6px; align-items:center; margin-top:3px; color:var(--orange)}
.msg-flags .clip{color:var(--label-2); display:inline-flex}
.load-more{display:block; margin:16px auto; font-size:16px; font-weight:500; padding:10px 18px; border-radius:999px; background:var(--fill)}
.load-more:active{background:var(--fill-2)}
.empty{text-align:center; color:var(--label-2); padding:52px 22px}
.empty p{font-weight:600; color:var(--label); font-size:17px; margin:10px 0 0}
.empty-icon{display:flex; justify-content:center}

/* ---------- detail ---------- */
.detail-scroll{padding:16px 20px 118px; background:var(--card)}
#view-detail{background:var(--card)}
#view-detail .navbar{background:var(--material)}
.detail-subject{font-size:23px; font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:6px 0 16px; text-wrap:balance; animation:riseIn .45s var(--ios)}
.detail-head{display:flex; align-items:center; gap:11px; padding-bottom:14px; border-bottom:.5px solid var(--sep); animation:riseIn .45s var(--ios) .04s backwards}
.detail-meta{flex:1; min-width:0; display:flex; flex-direction:column}
.detail-meta strong{font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.detail-meta span{color:var(--label-2); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.detail-head time{color:var(--label-2); font-size:13.5px; flex:none; font-variant-numeric:tabular-nums}
.attachments{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.att-chip{display:inline-flex; align-items:center; gap:7px; background:var(--fill); border-radius:10px; padding:8px 12px; font-size:14px; color:var(--label); text-decoration:none; transition:transform .15s var(--pop)}
.att-chip:active{transform:scale(.94)}
.att-chip small{color:var(--label-2)}
.detail-body{font-size:16px; line-height:1.6; padding-top:16px; max-width:76ch; animation:riseIn .45s var(--ios) .08s backwards}
.detail-body iframe{width:100%; border:0; background:#fff; border-radius:12px}
.detail-body pre{white-space:pre-wrap; font:inherit; margin:0}
.detail-empty{position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--label-2); gap:3px; padding:30px}
.detail-empty p{font-size:20px; font-weight:600; color:var(--label-2); margin:8px 0 0}
.detail-empty span{font-size:15px}
.detail-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; animation:riseIn .45s var(--ios) .12s backwards}
.chip-btn{display:inline-flex; align-items:center; gap:7px; background:var(--fill); color:var(--blue); font-size:16px; font-weight:500; padding:10px 17px; border-radius:999px; transition:transform .18s var(--pop), background .15s}
.chip-btn:active{transform:scale(.93); background:var(--fill-2)}

/* ---------- sheets: iOS modal sheets with grabber ---------- */
.sheet-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.32); z-index:29; opacity:0; transition:opacity .32s; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.sheet-backdrop.show{opacity:1}
.sheet{position:absolute; left:0; right:0; bottom:0; top:44px; background:var(--bg); border-radius:22px 22px 0 0; z-index:30; transform:translateY(104%); transition:transform .52s var(--ios); display:flex; flex-direction:column; box-shadow:var(--shadow-sheet)}
.sheet.open{transform:none}
.sheet::before{content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:38px; height:5px; border-radius:999px; background:var(--sep-strong); z-index:2}
.sheet.small{top:auto; max-height:72%; border-radius:22px 22px 0 0}
.sheet.small .group{margin:6px 16px 26px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:20px 18px 12px; border-bottom:.5px solid var(--sep); background:var(--material); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); border-radius:22px 22px 0 0}
.sheet-head strong{font-size:17px; font-weight:600}
.send-btn{background:var(--blue); color:#fff; font-weight:600; font-size:16px; padding:8px 19px; border-radius:999px; box-shadow:0 5px 14px rgba(0,122,255,.35); transition:transform .18s var(--pop), background .15s, opacity .15s}
.send-btn:active{transform:scale(.92)}
.send-btn:disabled{background:var(--fill-2); color:var(--label-3); box-shadow:none}
.sheet-body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:6px 18px max(24px, env(safe-area-inset-bottom))}
.c-field{display:flex; align-items:center; gap:9px; padding:11px 0; border-bottom:.5px solid var(--sep); min-height:49px}
.c-field span{color:var(--label-2); width:58px; flex:none; font-size:16px}
.c-field input{flex:1; border:0; outline:0; font-size:16.5px; background:transparent; min-width:0}
.cc-toggle{font-size:15px; padding:7px 0; display:block}
.c-from{color:var(--label-2); font-size:14.5px; margin:10px 0 2px}
.c-body{width:100%; min-height:220px; border:0; outline:0; resize:vertical; font-size:16.5px; line-height:1.55; background:transparent; padding:10px 0}
.c-attachments{display:flex; flex-wrap:wrap; gap:8px}
.c-att{display:inline-flex; align-items:center; gap:7px; background:var(--fill); border-radius:9px; padding:7px 11px; font-size:14px}
.c-att button{color:var(--red); font-size:14px; font-weight:600; padding:2px 4px}
.sheet-foot{display:flex; align-items:center; gap:12px; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:.5px solid var(--sep); background:var(--material); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%)}
.attach-btn{display:inline-flex; align-items:center; gap:7px; color:var(--blue); font-size:16px; font-weight:500; cursor:pointer}
.attach-note{color:var(--label-2); font-size:13px}

/* ---------- toast: floating glass capsule ---------- */
.toast{position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translate(-50%,18px) scale(.94); background:rgba(30,30,32,.82); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); color:#fff; font-size:15px; font-weight:500; padding:11px 19px; border-radius:999px; z-index:90; opacity:0; pointer-events:none; transition:opacity .25s, transform .38s var(--pop); max-width:88%; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1; transform:translate(-50%,0) scale(1)}
.toast.bounce{animation:toastPop .45s var(--pop)}
@keyframes toastPop{35%{transform:translate(-50%,0) scale(1.07)}}

/* ---------- desktop / iPad split view ---------- */
@media (min-width:900px){
  .app{display:grid; grid-template-columns:300px 400px 1fr; grid-template-rows:100dvh}
  /* Splash and sign-in are full-screen states, not grid columns: they
     overlay the split view when active and are gone when not. */
  #view-splash,#view-login{position:fixed; inset:0; z-index:60}
  #view-splash:not(.active),#view-login:not(.active){display:none}
  .view{position:relative; inset:auto; transform:none; visibility:visible; box-shadow:none; transition:none}
  .view.behind{transform:none; filter:none; pointer-events:auto}
  #view-folders{border-right:.5px solid var(--sep)}
  #view-list{border-right:.5px solid var(--sep)}
  #view-detail .detail-empty{display:flex}
  .tabbar{left:12px; right:12px}
  .sheet{left:auto; right:26px; bottom:26px; top:auto; width:600px; height:min(720px,92dvh); border-radius:24px; transform:translateY(26px) scale(.97); opacity:0; pointer-events:none; transition:transform .38s var(--ios), opacity .25s}
  .sheet.open{transform:none; opacity:1; pointer-events:auto}
  .sheet.small{left:50%; right:auto; bottom:auto; top:50%; width:440px; height:auto; transform:translate(-50%,-47%) scale(.96)}
  .sheet.small.open{transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s !important; transition-duration:.01s !important}}