/* One motion rhythm: persistent shell, shared images, reversible transitions. */
html{scrollbar-gutter:stable}:root{--flow-ease:cubic-bezier(.22,1,.36,1)}
.launch,.launch-mark,.launch img,.launch-line,.launch span,.panel.enter,.view.show,.art-main,.art-detail,.portrait-art>img,dialog[open]{animation:none}
.launch{visibility:visible;opacity:1}.launch-mark img{transform-origin:center}.launch-line{width:34px}.launch-mark{will-change:transform,opacity}
.preview-bar{view-transition-name:previewbar}.header{view-transition-name:appheader}.footer{view-transition-name:appfooter}
main{view-transition-name:appstage}.panel:not([hidden]) h1{view-transition-name:flowtitle}
#welcome:not([hidden]) .welcome-art,#about:not([hidden]) .portrait-art{view-transition-name:flowportrait}
#dashboard:not([hidden]) .person-chip img{view-transition-name:flowportrait}
.view:not([hidden]){view-transition-name:flowview}
::view-transition{pointer-events:none}
::view-transition-group(*){animation-duration:620ms;animation-timing-function:var(--flow-ease)}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(appheader),::view-transition-new(appheader),::view-transition-old(previewbar),::view-transition-new(previewbar),::view-transition-old(appfooter),::view-transition-new(appfooter){animation:none;mix-blend-mode:normal}
::view-transition-old(appstage),::view-transition-old(flowview){animation:flow-out 230ms ease both}
::view-transition-new(appstage),::view-transition-new(flowview){animation:flow-in 620ms var(--flow-ease) both}
::view-transition-old(flowtitle){animation:title-out 210ms ease both}
::view-transition-new(flowtitle){animation:title-in 620ms var(--flow-ease) both}
::view-transition-old(flowportrait),::view-transition-new(flowportrait),::view-transition-old(serviceimage),::view-transition-new(serviceimage){height:100%;width:100%;object-fit:cover;mix-blend-mode:normal}
::view-transition-group(flowportrait),::view-transition-group(serviceimage){overflow:clip;border-radius:24px;isolation:isolate}
::view-transition-old(flowportrait),::view-transition-old(serviceimage){animation:picture-out 420ms ease both}
::view-transition-new(flowportrait),::view-transition-new(serviceimage){animation:picture-in 620ms ease both}
html[data-direction=back]::view-transition-new(appstage),html[data-direction=back]::view-transition-new(flowview){animation-name:flow-back-in}
html[data-direction=back]::view-transition-old(appstage),html[data-direction=back]::view-transition-old(flowview){animation-name:flow-back-out}
.tabs{position:relative;isolation:isolate}.tabs button{position:relative;z-index:1;transition:color .25s}.tabs button.selected{background:transparent;box-shadow:none}
.tab-indicator{position:absolute;top:4px;bottom:4px;left:4px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #1a21100c;transition:left 460ms var(--flow-ease),width 460ms var(--flow-ease);z-index:0;pointer-events:none}
.service-card:active{transform:scale(.97)}.service-card:focus-visible{transform:translateY(-3px)}
.service-cover{height:128px;width:calc(100% + 72px);max-width:none;margin:-36px -36px 27px;object-fit:cover;display:block;border-radius:27px 27px 0 0}
dialog:has(.service-cover:not([hidden])) .close{background:#fafaf5e8;backdrop-filter:blur(8px)}
dialog:has(.service-cover:not([hidden])) .sheet-handle{background:#ffffff9c;z-index:1}
dialog.flow-closing{pointer-events:none}
.option{transition:background 240ms,border-color 240ms,box-shadow 240ms,transform 240ms}.option:active{transform:scale(.985)}
body.modal-open{overflow:hidden}.toast{animation:toast-enter 350ms var(--flow-ease) both}
@keyframes flow-out{to{opacity:0;transform:translateX(-12px) scale(.992)}}
@keyframes flow-in{from{opacity:0;transform:translateX(20px) scale(.992)}to{opacity:1;transform:none}}
@keyframes flow-back-out{to{opacity:0;transform:translateX(12px)}}
@keyframes flow-back-in{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes title-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes title-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes picture-out{to{opacity:0}}@keyframes picture-in{from{opacity:0}to{opacity:1}}
@keyframes toast-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:759px){.dashboard-heading{position:relative;padding-right:38px}.dashboard-heading .person-chip{display:block;position:absolute;right:0;top:20px;padding:0;background:none}.person-chip>span{display:none}.person-chip img{height:34px;width:34px}.dashboard-heading .person-chip{border-radius:50%}.service-cover{width:calc(100% + 46px);margin:-32px -23px 23px;height:110px;border-radius:25px 25px 0 0}::view-transition-group(*){animation-duration:540ms}.dashboard h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.tab-indicator{transition:none}.launch{display:none}.service-card:focus-visible{transform:none}}