.footer-links{margin-inline-start:auto}
.icon[data-icon="play"]{--icon:url("./assets/icons/play.png")}
:root[data-view="profile"]{
  --profile-page:#fff;
  --profile-line:#dddde1;
  --profile-text:#131316;
  --profile-muted:#5c5c65;
  --profile-button:#f0f0f3;
  --profile-hover:#e9e9ef;
  --profile-shadow:#17132621;
  background:var(--profile-page);
}
:root[data-view="profile"][data-theme="dark"]{
  --profile-page:#101012;
  --profile-line:#303034;
  --profile-text:#f8f8fa;
  --profile-muted:#b6b6c0;
  --profile-button:#26262b;
  --profile-hover:#35353d;
  --profile-shadow:#050506a8;
}
:root[data-view="profile"] .topbar{display:none}
:root[data-view="profile"] .main{
  width:min(890px,100%);
  padding-top:0;
  min-height:calc(100dvh - 95px);
}
.story-profile{color:var(--profile-text);background:var(--profile-page)}
.profile-toolbar{
  display:grid;
  grid-template-columns:1fr max-content 1fr;
  align-items:center;
  min-height:56px;
  padding:0 12px;
  border-bottom:1px solid var(--profile-line);
}
.profile-toolbar-side{display:flex;justify-content:start;align-items:center}
.profile-tools{justify-content:end}
.profile-handle{font-size:21px;font-weight:800;letter-spacing:-.028em;line-height:1.15}
.profile-toolbar .icon-button,.profile-menu summary{
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--profile-text);
  border:0;
  border-radius:50%;
  width:44px;
  height:44px;
  padding:0;
}
.profile-toolbar .icon-button:hover,.profile-menu summary:hover{background:var(--profile-hover)}
.profile-menu{position:relative;padding:0;border:0}
.profile-menu summary{list-style:none}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-menu summary span{font:700 27px/1 system-ui,sans-serif;transform:translateY(-2px)}
.profile-menu nav{
  position:absolute;
  z-index:10;
  inset-inline-start:0;
  top:calc(100% + 2px);
  min-width:164px;
  padding:4px;
  border:1px solid var(--profile-line);
  border-radius:11px;
  background:var(--profile-page);
  box-shadow:0 9px 30px var(--profile-shadow);
}
.profile-menu a{display:block;padding:8px;border-radius:7px;font-size:13px}
.profile-menu a:hover{background:var(--profile-hover)}

.profile-overview{padding:20px 16px 9px}
.profile-account{display:flex;gap:20px;align-items:center}
.profile-avatar{
  display:grid;
  place-items:center;
  flex:none;
  width:88px;
  aspect-ratio:1;
  padding:3px;
  border:0;
  border-radius:50%;
  background:conic-gradient(from 50deg,#b57aff,#f479b1,#ffc779,#a264fb,#b57aff);
}
.profile-avatar span{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border:3px solid var(--profile-page);
  border-radius:50%;
  color:#f0e7ff;
  background:radial-gradient(circle at 25% 17%,#62438c,#211a3c 76%);
}
.profile-avatar .icon{width:52%;height:52%}
.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  flex:1;
  gap:4px;
}
.profile-stats a{min-width:0;display:grid;justify-items:center;gap:1px;padding:4px 0;font-size:11px;line-height:1.35;text-align:center}
.profile-stats a:hover{color:var(--accent)}
.profile-stats strong{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.profile-stats span{color:var(--profile-muted);font-size:11px;font-weight:500}
.profile-bio{margin-block-start:11px}
.profile-bio h1{font-size:17px;font-weight:800;line-height:1.4}
.profile-category,.profile-description{font-size:12px;line-height:1.6}
.profile-category{color:var(--profile-muted);margin-block-start:2px}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-block-start:13px}
.profile-actions .button{padding:5px 6px;border-radius:8px;font-size:12px}
.profile-actions .ghost{background:var(--profile-button);color:var(--profile-text);border:0}
.profile-actions .ghost:hover{background:var(--profile-hover)}
.profile-highlights{padding:9px 15px 13px}
.highlight-list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:62px;
  gap:9px;
  overflow:auto hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;
  scrollbar-width:none;
  padding:5px 3px;
}
.highlight{
  display:grid;
  align-content:start;
  justify-items:center;
  gap:6px;
  border:0;
  background:transparent;
  padding:0;
  font-size:11px;
  line-height:1.3;
  color:var(--profile-text);
  white-space:nowrap;
  scroll-snap-align:start;
}
.highlight-ring{
  display:grid;
  place-items:center;
  width:59px;
  height:59px;
  padding:3px;
  border-radius:50%;
  border:1px solid var(--profile-line);
  background:var(--profile-page);
  transition:border-color .16s,transform .16s;
}
.highlight:hover .highlight-ring{transform:translateY(-2px);border-color:var(--focus)}
.highlight .service-icon{border-radius:50%;width:100%;height:100%}
.highlight .icon{width:24px;height:24px}

.profile-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-block-start:1px solid var(--profile-line)}
.profile-tabs button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:45px;
  padding:7px 3px;
  color:var(--profile-muted);
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  font-size:11px;
  font-weight:600;
}
.profile-tabs button[aria-pressed="true"]{border-bottom-color:var(--profile-text);color:var(--profile-text);font-weight:800}
.profile-tabs button:focus-visible{outline-offset:-3px}
.profile-tabs .icon{width:19px;height:19px}
.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.story-tone-rose{--story-light:#ffbad3;--story-core:#814568;--story-deep:#362035}
.story-tone-indigo{--story-light:#cec6ff;--story-core:#664fba;--story-deep:#28214c}
.story-tone-blue{--story-light:#b9d7ff;--story-core:#3f659d;--story-deep:#212a4d}
.story-tone-lilac{--story-light:#f0c7ff;--story-core:#794a9d;--story-deep:#362447}
.story-tone-yellow{--story-light:#ffe0a7;--story-core:#976d43;--story-deep:#412d37}
.profile-post-card{
  position:relative;
  display:grid;
  align-items:end;
  min-width:0;
  aspect-ratio:4/5;
  isolation:isolate;
  overflow:hidden;
  border:0;
  padding:0;
  color:#fff;
  text-align:right;
  background:var(--story-deep);
}
.profile-post-art,.profile-post-visual{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 40% 38%,var(--story-core),transparent 69%),var(--story-deep);
}
.profile-post-art{position:absolute;inset:0;z-index:-1}
.post-art-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 43%}
.story-tone-yellow .post-art-image{object-fit:contain;padding:13% 15% 22%;transform:rotate(-5deg)}
.profile-post-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:35% 0 0;
  background:linear-gradient(transparent,#0f0a18c4 80%,#0e0a16de);
  pointer-events:none;
}
.profile-post-title{display:block;padding:8px 7px;font-size:clamp(11px,3.1vw,19px);font-weight:800;line-height:1.34}
.profile-post-card:hover .profile-post-art{filter:brightness(1.14)}
.profile-post-card:focus-visible{outline-offset:-4px;outline-color:var(--story-light)}
.profile-post-kind{position:absolute;inset-block-start:7px;inset-inline-end:8px;color:#fff;width:16px;height:16px;filter:drop-shadow(0 2px 3px #0008)}
.profile-grid-stories .profile-post-card{aspect-ratio:3/5}
.post-art-orbit{
  position:relative;
  display:grid;
  place-items:center;
  width:61%;
  aspect-ratio:1;
  border:1px solid #ffffff4d;
  border-radius:50%;
  margin-block-end:16%;
}
.post-art-orbit::after{
  content:"";
  position:absolute;
  inset:-10%;
  border:1px solid #ffffff27;
  border-radius:50%;
}
.post-art-orbit>span{
  display:grid;
  place-items:center;
  width:78%;
  height:78%;
  color:var(--story-light);
  border:1px solid #ffffff5c;
  background:radial-gradient(circle at 26% 19%,#ffffff37,transparent 66%),var(--story-deep);
  border-radius:27%;
  box-shadow:0 12px 30px #100a21c4,inset 0 3px 10px #ffffff27;
  transform:rotate(-8deg);
}
.post-art-orbit .icon{width:56%;height:56%}
.profile-guide-list{display:grid}
.profile-guide{display:flex;align-items:center;gap:10px;padding:11px 14px;border:none;border-bottom:1px solid var(--profile-line);background:var(--profile-page);color:var(--profile-text);text-align:right}
.profile-guide:hover{background:var(--profile-hover)}
.profile-guide small{display:block;color:var(--profile-muted);font-size:11px}
.profile-guide strong{display:block;font-size:14px}
.profile-guide-arrow{margin-inline-start:auto;color:var(--profile-muted);width:17px;height:17px}

#panel.profile-post-viewer{width:min(480px,calc(100vw - 28px))}
.profile-post-viewer .panel-inner{padding:0}
.profile-post-header{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;gap:9px}
.profile-post-header .icon-button{width:44px;height:44px}
.profile-post-visual{height:min(62vw,340px)}
.profile-post-visual .post-art-orbit{width:min(63%,206px);margin:0}
.profile-post-caption{padding:14px 15px 17px}
.profile-post-caption h2{font-size:21px;line-height:1.4}
.profile-post-caption p{font-size:13px;color:var(--secondary);margin:6px 0 12px}
.profile-post-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.profile-post-actions .button{padding-inline:7px}
#panel.story-viewer{
  width:min(438px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  color:#fcf7ff;
  background:#201831;
  border:1px solid #615279;
  border-radius:25px;
}
.story-viewer .panel-inner{padding:0}
.story-slide{
  display:flex;
  flex-direction:column;
  min-height:min(708px,calc(100dvh - 34px));
  padding:12px 17px 16px;
  color:#fff8ff;
  background:radial-gradient(ellipse at 57% 20%,var(--story-core),transparent 57%),linear-gradient(var(--story-deep),#1a142c 83%);
  touch-action:pan-y;
}
.story-progress{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.story-segment{height:24px;border:0;background:none;padding:8px 0;display:grid;align-items:center}
.story-segment::after{content:"";height:3px;border-radius:5px;background:#fff5}
.story-segment[aria-current]::after{background:#fff;height:4px}
.story-top,.story-byline,.story-navigation{display:flex;align-items:center;justify-content:space-between;gap:8px}
.story-byline{font-size:13px;font-weight:700}
.story-mini-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--story-light);
  border-radius:50%;
  background:#241835;
  color:var(--story-light);
}
.story-mini-avatar .icon{width:20px;height:20px}
.story-control.icon-button{
  color:#fff8ff;
  background:#ffffff0e;
  border-color:#ffffff30;
  width:44px;
  height:44px;
}
.story-control:not(:disabled):hover{background:#ffffff27}
.story-control:disabled{opacity:.35;cursor:default}
.story-art{
  position:relative;
  display:grid;
  place-items:center;
  align-self:center;
  width:min(69%,255px);
  min-height:clamp(156px,32dvh,272px);
  margin-block:auto;
  isolation:isolate;
}
.story-art-orbit,.story-art-core{
  display:grid;
  place-items:center;
  width:82%;
  aspect-ratio:1;
  border-radius:50%;
  position:absolute;
}
.story-art-orbit{
  border:1px solid #ffffff45;
  transform:scale(1.17);
}
.story-art-core{
  color:var(--story-light);
  background:linear-gradient(138deg,#ffffff36,#ffffff0a),var(--story-deep);
  border:1px solid #ffffff55;
  box-shadow:inset 0 2px 10px #fff2,0 18px 42px #110d259c;
}
.story-art-core .icon{width:48%;height:48%;filter:drop-shadow(0 7px 6px #1b102956)}
.story-glint{position:absolute;color:var(--story-light);top:20%;inset-inline-start:8%;width:21px;height:21px}
.story-glint.second{top:72%;inset-inline-start:auto;inset-inline-end:4%;width:12px;height:12px}
.story-copy{padding:8px 3px 16px}
.story-copy h2{font-size:clamp(26px,6vw,34px);line-height:1.35;font-weight:800;letter-spacing:-.028em}
.story-copy p{margin:7px 0 0;font-size:14px;line-height:1.85;color:#f4eafe}
.story-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.story-action-main{background:var(--story-light);color:#201531}
.story-action-main:hover{background:#fff3ff}
.story-action-secondary{border-color:#ffffff59;background:#ffffff15;color:#fff6ff}
.story-action-secondary:hover{background:#ffffff26}
.story-navigation{margin-block-start:13px;color:#ede2fa;font-size:12px}
.story-viewer button:focus-visible{outline-color:var(--story-light)}


@media (min-width:741px){
  :root[data-view="profile"] .main{width:min(840px,calc(100% - 60px));padding-top:22px}
  .profile-toolbar{min-height:53px;padding-inline:6px}
  .profile-overview{display:grid;grid-template-columns:160px minmax(0,1fr);gap:9px 24px;padding:28px 18px 18px 0}
  .profile-account{display:contents}
  .profile-avatar{grid-area:1/1/4/2;align-self:center;justify-self:center;width:128px}
  .profile-bio{grid-area:1/2/2/3;margin:0}
  .profile-bio h1{font-size:23px}
  .profile-description,.profile-category{font-size:13px}
  .profile-stats{grid-area:2/2/3/3;width:min(100%,380px);gap:8px}
  .profile-stats a{justify-items:start}
  .profile-stats strong{font-size:21px}
  .profile-stats span{font-size:12px}
  .profile-actions{grid-area:3/2/4/3;width:min(100%,420px);margin:3px 0 0}
  .profile-highlights{padding:10px 10px 16px}
  .highlight-list{grid-auto-columns:74px;gap:12px}
  .highlight-ring{width:65px;height:65px}
  .profile-tabs button{font-size:12px;min-height:48px}
  .profile-grid{gap:3px}
  .profile-grid:not(.profile-grid-stories) .profile-post-card{aspect-ratio:1}
  .profile-post-title{padding:13px 14px}
  #panel.profile-post-viewer{width:min(810px,calc(100% - 50px))}
  .profile-post{display:grid;grid-template-columns:54% 46%}
  .profile-post-header{grid-area:1/2/2/3;border-bottom:1px solid var(--border)}
  .profile-post-visual{grid-area:1/1/3/2;height:100%;min-height:340px;aspect-ratio:1}
  .profile-post-caption{grid-area:2/2/3/3;display:flex;flex-direction:column;padding:16px 16px 20px}
  .profile-post-actions{margin-block-start:auto}
}
@media (min-width:1100px){
  :root[data-view="profile"] body{padding-inline-start:208px}
  :root[data-view="profile"] .topbar{
    display:block;
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    width:208px;
    z-index:7;
    border:0;
    border-inline-end:1px solid var(--profile-line);
    background:var(--profile-page);
    color:var(--profile-text);
  }
  :root[data-view="profile"] .top-inner{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;gap:18px;padding:26px 15px}
  :root[data-view="profile"] .brand{padding-inline:5px}
  :root[data-view="profile"] .brand small{color:var(--profile-muted)}
  :root[data-view="profile"] .brand strong{font-size:23px}
  :root[data-view="profile"] .desktop-nav{display:grid;gap:5px}
  :root[data-view="profile"] .desktop-nav a{display:flex;align-items:center;gap:11px;padding:10px 9px;min-height:46px;color:var(--profile-text);font-size:14px}
  :root[data-view="profile"] .desktop-nav a:hover,:root[data-view="profile"] .desktop-nav a[aria-current]{background:var(--profile-hover)}
  :root[data-view="profile"] .desktop-nav .icon{display:inline-block}
  :root[data-view="profile"] .header-actions{margin-block-start:auto}
  :root[data-view="profile"] .header-actions .button{flex:1}
}
@media (max-width:740px){
  .profile-toolbar{padding-block-start:env(safe-area-inset-top)}
  .profile-overview{padding-inline:14px}
  .profile-highlights{padding-inline:12px}
  :root[data-view="profile"] .bottom-nav{background:var(--profile-page);border-color:var(--profile-line)}
  :root[data-view="profile"] .bottom-nav a{color:var(--profile-muted);font-size:10px}
  :root[data-view="profile"] .bottom-nav a[aria-current]{background:transparent;color:var(--profile-text)}
  :root[data-view="profile"] .bottom-nav a[aria-current] .icon{
    width:25px;height:25px;
    --icon:url("./assets/icons/user.png");
  }
  #panel.story-viewer{width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .story-slide{min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) 15px max(12px,env(safe-area-inset-bottom))}
}
@media (max-width:355px){
  .profile-account{gap:10px}
  .profile-avatar{width:72px}
  .profile-stats span{font-size:10px}
  .highlight-list{grid-auto-columns:56px;gap:7px}
  .highlight-ring{width:53px;height:53px}
  .profile-post-title{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .highlight:hover .highlight-ring{transform:none}
}

.icon[data-icon="download"]{--icon:url("./assets/icons/download.png")}
.profile-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}
:root[data-installed="true"] [data-pwa-install]{display:none}
:root[data-installed="true"] .profile-actions{grid-template-columns:1fr 1fr}
.profile-install .icon{width:20px;height:20px}
.profile-menu button{
  display:block;
  width:100%;
  padding:8px;
  border:0;
  border-radius:7px;
  color:inherit;
  background:transparent;
  font-size:13px;
  text-align:right;
}
.profile-menu button:hover{background:var(--profile-hover)}
#pwa-install-instructions{color:var(--ink);font-size:14px}
#pwa-install-instructions ol{margin:5px 0 12px;padding-inline-start:22px}
#pwa-install-instructions li+li{margin-block-start:4px}
#pwa-install-help .icon-button{width:44px;height:44px}
.pwa-notices{
  position:fixed;
  z-index:9;
  inset-inline:12px;
  bottom:15px;
  display:grid;
  justify-items:center;
  gap:6px;
  pointer-events:none;
}
.pwa-notice{
  max-width:min(100%,410px);
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--soft-surface);
  color:var(--ink);
  font-size:11px;
  box-shadow:0 4px 20px var(--hover-shadow);
  pointer-events:auto;
}
.pwa-update{display:flex;align-items:center;gap:8px}
.pwa-update .button{min-height:36px;font-size:11px;padding:4px 8px}

@media (max-width:740px){
  .topbar{padding-block-start:env(safe-area-inset-top)}
  .profile-toolbar{
    position:sticky;
    top:0;
    z-index:6;
    padding-inline:max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-left));
    background:var(--profile-page);
  }
  .profile-overview{
    padding-inline:max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-left));
  }
  .profile-highlights,.profile-content{
    padding-inline:env(safe-area-inset-right) env(safe-area-inset-left);
  }
  .highlight-list{margin-inline:12px}
  .bottom-nav{padding-inline:max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-left))}
  .pwa-notices{bottom:calc(65px + env(safe-area-inset-bottom))}
  #pwa-install-help .panel-inner{padding-inline:max(15px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-left))}
}
@media (max-width:355px){
  .profile-actions{gap:5px}
  .profile-actions .button{gap:4px;font-size:11px}
  .profile-actions .primary .icon{width:14px;height:14px}
}
@media (max-width:740px) and (orientation:landscape) and (max-height:500px){
  .story-art{min-height:125px;width:min(42%,180px)}
  .story-copy{padding-block:4px 7px}
  .story-copy h2{font-size:23px}
  .story-navigation{margin-block-start:6px}
}