.home-screen-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;border:1px solid #e5e0f3;border-radius:7px;background:#faf8ff;color:#7962b9;font:inherit;font-size:12px;line-height:1.5;letter-spacing:0;cursor:pointer;white-space:nowrap}
.home-screen-trigger:hover{background:#f0ebfc;border-color:#c9bdeb}
.home-screen-trigger[hidden]{display:none!important}
.page-footer:has(.home-screen-trigger){align-items:center;flex-wrap:wrap;gap:10px 20px}
.entry-footer .home-screen-trigger{display:flex;margin:12px auto 0}
.home-screen-trigger:focus-visible,.home-screen-dialog button:focus-visible{outline:3px solid #ac9aef;outline-offset:3px}
.home-screen-dialog{width:440px;max-width:calc(100% - 32px);max-height:calc(100dvh - 40px);padding:25px 28px 24px;border:1px solid #e8e2f2;border-radius:20px;background:#fff;color:#2b2940;box-shadow:0 24px 80px #24263829;overflow-y:auto;overscroll-behavior:contain}
.home-screen-dialog::backdrop{background:#24263859;backdrop-filter:blur(3px)}
.home-screen-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.home-screen-app-icon{width:48px;height:48px;overflow:hidden;border-radius:14px;background:#6750df}
.home-screen-app-icon img{display:block;width:48px;height:48px}
.home-screen-close{display:grid;place-items:center;width:36px;height:36px;padding:8px;border:0;border-radius:9px;background:#f7f5fb;color:#9a8dab;cursor:pointer}
.home-screen-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.home-screen-dialog h2{font-size:21px;font-weight:650;line-height:1.45;margin:0 0 8px;letter-spacing:-.3px}
.home-screen-description{font-size:13px;color:#8b8399;line-height:1.8;margin:0}
.home-screen-browser-note{margin:18px 0 0;padding:11px 13px;border:1px solid #e9e2f7;border-radius:9px;background:#f7f3fe;font-size:12px;color:#806a9d;line-height:1.8}
.home-screen-steps{list-style:none;counter-reset:home-screen-step;padding:0;margin:24px 0}
.home-screen-steps li{position:relative;padding-left:34px;margin:0 0 20px;counter-increment:home-screen-step}
.home-screen-steps li:last-child{margin-bottom:0}
.home-screen-steps li::before{content:counter(home-screen-step);position:absolute;left:0;top:0;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#f0eafb;color:#947dbe;font-size:11px;font-weight:600}
.home-screen-steps strong{display:block;font-size:13px;line-height:1.8;font-weight:600;color:#5c506e}
.home-screen-steps strong svg{width:16px;height:16px;vertical-align:-2px;margin-left:3px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.home-screen-steps p{margin:5px 0 0;color:#948a9f;font-size:12px;line-height:1.85}
.home-screen-note{margin:0;padding-top:17px;border-top:1px solid #eeebf4;font-size:12px;line-height:1.85;color:#998fa4}
.home-screen-actions{display:flex;justify-content:flex-end;margin-top:23px}
.home-screen-done{min-height:42px;padding:10px 24px;border:1px solid #6750df;border-radius:8px;background:#6750df;color:white;font-size:13px;cursor:pointer}
.home-screen-done:hover{background:#5942cf}
/* Safe areas belong to each full-width surface, not to nested wrappers. */
@media(max-width:720px){
  .sidebar{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .shell .topbar{padding-left:max(21px,env(safe-area-inset-left,0px));padding-right:max(21px,env(safe-area-inset-right,0px))}
  .shell>main{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
  .plan-dialog .dialog-header{padding-top:calc(21px + env(safe-area-inset-top,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
  .plan-dialog .dialog-body{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
  .plan-dialog .dialog-footer{padding-bottom:max(16px,env(safe-area-inset-bottom,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .home-screen-dialog{padding:23px;max-height:calc(100dvh - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
@media(max-width:780px){
  .login-layout .story{padding-top:calc(25px + env(safe-area-inset-top,0px));padding-left:max(25px,env(safe-area-inset-left,0px));padding-right:max(25px,env(safe-area-inset-right,0px))}
  .login-layout .entry{padding-left:max(25px,env(safe-area-inset-left,0px));padding-right:max(25px,env(safe-area-inset-right,0px));padding-bottom:max(24px,env(safe-area-inset-bottom,0px));min-height:calc(100svh - 62px - env(safe-area-inset-top,0px))}
  .login-layout .entry-top{top:calc(38px + env(safe-area-inset-top,0px));right:max(25px,env(safe-area-inset-right,0px))}
}
/* Landscape phones use the existing desktop sidebar. Shift both surfaces once. */
@media(min-width:721px) and (orientation:landscape) and (pointer:coarse){
  .sidebar{left:env(safe-area-inset-left,0px);padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
  .shell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .plan-dialog{width:min(600px,calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));margin-right:env(safe-area-inset-right,0px)}
  .plan-dialog .dialog-footer{padding-bottom:max(17px,env(safe-area-inset-bottom,0px))}
  .home-screen-dialog,.reminder-dialog,.confirm-dialog{max-width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
}
@media(min-width:781px) and (orientation:landscape) and (pointer:coarse){
  .login-layout{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
}
@media(min-width:781px) and (max-width:1100px) and (orientation:landscape) and (pointer:coarse){
  .login-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(display-mode:standalone){.home-screen-trigger{display:none!important}}