#account-entry{position:fixed;inset:0;z-index:1000;overflow:auto;background:var(--paper);padding:calc(clamp(24px,8vh,80px) + env(safe-area-inset-top,0px)) 20px;display:grid;place-items:start center}#account-entry[hidden]{display:none}.account-card{width:min(100%,490px);padding:32px;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 70px #32284008}.account-card .brand{margin-bottom:36px}.account-card h1{font-size:29px;margin-bottom:14px}.account-card p{color:var(--muted);font-size:14px}.account-actions{display:grid;gap:16px;margin:25px 0}.account-card form{display:grid;gap:18px;margin:24px 0}.account-card label{display:grid;gap:8px;font-weight:650;font-size:14px}.account-card input{width:100%;min-height:48px;border:1px solid #c7bbd0;background:white;border-radius:12px;padding:12px}.account-notice:empty{display:none}.account-email{font-weight:650;margin:20px 0 10px;overflow-wrap:anywhere}.account-dialog{max-width:460px}.profile-name{display:grid;gap:8px;margin-bottom:24px;font-size:14px;font-weight:650}.profile-name input{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.preview-strip.account-strip{color:var(--muted);font-size:11px}.account-strip button{font-size:12px}.sidebar-bottom .account-link{padding:16px 12px 0}.preview-footer a{text-decoration:underline}body:has(#account-entry:not([hidden])){overflow:hidden}@media(max-width:540px){.account-card{padding:26px 22px}.account-strip{gap:10px!important}.account-strip span{font-size:10px}}
.account-dialog #delete-open{font-size:13px;margin-top:14px}.delete-copy{display:grid;gap:12px;color:var(--muted);font-size:14px;margin:18px 0}.delete-copy ul{display:grid;gap:10px;padding-left:18px;margin:0}.delete-copy strong{color:var(--ink)}.delete-form{display:grid;gap:12px}.delete-form label{display:grid;gap:8px;font-size:14px;font-weight:600}.delete-form input{width:100%;min-height:48px;border:1px solid #c7bbd0;background:white;border-radius:12px;padding:12px;font-size:16px}.delete-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:6px}.delete-actions>*{flex:1 1 160px}.primary.danger{background:#B4384F;color:white;box-shadow:none}.primary.danger:disabled{opacity:.45;cursor:not-allowed}
/* iPhone app: while Hue opens, show exactly what the launch picture shows (the seed, centred on paper),
   so the hand-over from the launch picture is seamless. Words stay for screen readers. */
html[data-app] #account-entry:has(.account-boot){place-items:center;padding:0}
html[data-app] .account-boot{background:none;border:0;box-shadow:none;padding:0;width:auto}
html[data-app] .account-boot .brand{margin:0;pointer-events:none}
html[data-app] .account-boot .brand span,html[data-app] .account-boot h1,html[data-app] .account-boot p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-app] .account-boot .brand{display:block;position:relative}html[data-app] .account-boot .brand-seed{display:block;width:81px;height:93px}
/* A soft sheen sweeps across the seed while Hue loads. It waits a moment first, so the hand-over from the still launch picture stays invisible. */
html[data-app] .account-boot .brand::after{content:"";position:absolute;inset:0;-webkit-mask:url(media/brand/seed.svg) center/100% 100% no-repeat;mask:url(media/brand/seed.svg) center/100% 100% no-repeat;background:linear-gradient(110deg,transparent 38%,#fff9 50%,transparent 62%) 160% 0/250% 100% no-repeat;animation:boot-sheen 1.5s cubic-bezier(.45,0,.25,1) .35s infinite}
@keyframes boot-sheen{0%{background-position:160% 0}70%,100%{background-position:-60% 0}}
/* Leaving: the seed fades first, then the paper fades to reveal the app, so the seed never sits over the app. */
html[data-app] #account-entry.leaving{animation:boot-out .3s ease-out .16s forwards}
html[data-app] #account-entry.leaving .brand-seed{animation:boot-out .18s ease-in forwards}
@keyframes boot-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){html[data-app] #account-entry.leaving,html[data-app] #account-entry.leaving *,html[data-app] .account-boot .brand::after{animation:none}html[data-app] .account-boot .brand::after{display:none}}

/* No double-tap zoom (1 Nov 2026). */
html{touch-action:manipulation}