@font-face{font-family:Story Sans;src:url(assets/story-sans-bold.woff) format("woff");font-display:swap;font-weight:700}
@font-face{font-family:Story Sans;src:url(assets/story-sans.woff) format("woff");font-display:swap;font-weight:400}
:root{color-scheme:dark;--bg:#16131a;--surface:#1d1921;--raised:#252029;--text:#f5edf0;--muted:#c8bac3;--rose:#eab4c4;--line:#473741;--sans:"Story Sans","Noto Sans CJK KR",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 var(--sans);word-break:keep-all}
a{color:inherit;text-decoration:none}
button,summary{cursor:pointer;font:inherit}
button{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,blockquote{margin:0}
h1,h2,h3{font-family:var(--sans);line-height:1.28}
em{font-style:normal;color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:5px}
.wrap{width:min(1200px,calc(100% - 112px));margin-inline:auto}
.skip{position:fixed;z-index:20;top:8px;left:16px;padding:10px 20px;background:var(--bg);transform:translateY(-160%)}
.skip:focus{transform:none}
.bar{position:sticky;top:0;z-index:2;background:#17131beb;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav,.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:67px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.94rem;line-height:1.4}
.brand i{display:block;width:11px;height:11px;flex:none;border:1px solid var(--rose);transform:rotate(45deg)}
nav{display:flex;gap:32px;font-size:.86rem;color:var(--muted)}
nav a:hover,.secondary:hover,.footer>a:last-child:hover{color:var(--rose)}
.hero{overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 88% 44%,#4a2d3c 0%,#2b202c 38%,#17131b 73%)}
.hero-grid{min-height:557px;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:34px;padding-block:70px}
.kicker{display:flex;align-items:center;gap:9px;color:var(--rose);font-size:.76rem;letter-spacing:.10em}
.kicker span{width:22px;height:1px;background:currentColor}
.kicker b{font-weight:400;opacity:.65}
h1{margin:21px 0 24px;font-size:clamp(2.55rem,4.48vw,4.65rem);letter-spacing:-.06em;line-height:1.18}
.hero-line{color:var(--muted);font-size:clamp(.98rem,1.28vw,1.14rem);line-height:1.85}
.actions{display:flex;gap:23px;align-items:center;margin-top:32px;font-size:.86rem}
.primary,.secondary{display:inline-flex;align-items:center;gap:12px;min-height:46px}
.primary{color:#261923;background:#eac0ce;padding:8px 17px;border-radius:3px}
.primary:hover{background:#f8dce4}
.secondary{color:var(--muted)}
.hero-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center}
.art-frame{position:relative;height:clamp(236px,28vw,383px);overflow:hidden;border:1px solid #ac8495;border-radius:150px 150px 5px 5px;background:#3d313c;box-shadow:0 16px 35px #110a1266}
.art-frame:first-child{transform:translateY(18px)}
.art-frame:last-child{transform:translateY(30px)}
.art-frame img{object-position:center;filter:saturate(.82) brightness(.94)}
.art-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#24172380,transparent 42%);pointer-events:none}
.story{padding-block:74px;display:grid;grid-template-columns:.87fr 1.13fr;align-items:start;gap:45px}
h2{margin-top:12px;font-size:clamp(2rem,3.38vw,3.35rem);letter-spacing:-.055em}
.story-copy{color:var(--muted);max-width:56ch}
.story-copy p+p{margin-top:13px}
.story-copy .story-end{color:var(--rose);margin-top:19px}
.cast-section{background:#1c171f;border-block:1px solid var(--line);padding-block:65px 77px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:28px}
.section-heading>p,.start-card>p:not(.role),.scene p{color:var(--muted);font-size:.93rem}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card,.start-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.card:focus-within,.card:hover{border-color:#926979}
.portrait{display:block;position:relative;width:100%;padding:0;border:0;background:#2f2631;overflow:hidden;aspect-ratio:1.12}
.portrait:focus-visible{outline-offset:-4px}
.portrait img{object-position:center 45%;transition:transform .25s ease}
.portrait:hover img{transform:scale(1.04)}
.portrait span{position:absolute;right:13px;bottom:13px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #e1b6c6;background:#211822e8}
.card-body{padding:19px 20px 21px}
.role{font-size:.76rem;color:var(--rose);line-height:1.5}
.card h3,.start-card h3{margin:6px 0 10px;font-size:clamp(1.45rem,2.2vw,2.05rem);letter-spacing:-.05em}
.card-quote{color:var(--muted);font-size:.89rem;min-height:3.5em}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:13px 0 0}
.tags li{font-size:.72rem;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.start{padding-block:72px 80px}
.start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.start-card{padding:23px}
.start-card details{margin-top:18px;border-top:1px solid var(--line);padding-top:11px}
summary{color:var(--rose);padding:4px 0;font-size:.9rem}
summary::marker{color:#d58ba7}
.scene{padding-top:11px}
.scene blockquote{margin:12px 0;padding:3px 12px;border-left:2px solid #a1657c;color:var(--text)}
.scene p+p{margin-top:9px}
footer{border-top:1px solid var(--line)}
.footer>a:last-child{font-size:.8rem;color:var(--muted)}
dialog{color:var(--text);background:#231d27;border:1px solid #806070;border-radius:9px;width:min(850px,calc(100% - 32px));max-height:calc(100dvh - 36px);padding:0;overscroll-behavior:contain}
dialog::backdrop{background:#100b11c9;backdrop-filter:blur(4px)}
body:has(dialog[open]){overflow:hidden}
dialog form{position:sticky;top:0;z-index:1;height:0;margin:0;display:flex;justify-content:flex-end;padding:0 13px}
.close{margin-top:12px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ae8497;border-radius:50%;background:#251d28;color:#fff;font-size:1.38rem;line-height:1}
.profile{display:grid;grid-template-columns:.70fr 1fr}
.profile-photo{background:#322b34}
.profile-photo img{height:auto;aspect-ratio:1;position:sticky;top:0}
.profile-body{padding:28px 35px 32px}
.profile-body>.role{padding-right:21px}
.profile-body h2{margin:4px 0 15px;font-size:2.4rem}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;border-block:1px solid var(--line);padding:12px 0;margin:0 0 18px}
.facts dt{color:var(--rose);font-size:.7rem}
.facts dd{margin:0;font-size:.84rem}
.profile-body h3{margin:15px 0 4px;font-size:1rem}
.profile-body h3+p{font-size:.87rem;color:var(--muted)}
@media(max-width:950px){.wrap{width:calc(100% - 64px)}.hero-grid{min-height:465px;gap:24px}.card-body{padding-inline:15px}}
@media(max-width:690px){
  html{scroll-padding-top:69px}.wrap{width:calc(100% - 36px)}.nav,.footer{min-height:57px;gap:12px}.brand{font-size:.76rem;gap:8px}.brand i{width:8px;height:8px}nav{gap:13px;font-size:.72rem}
  .hero-grid{grid-template-columns:1fr;gap:35px;padding-block:46px 53px}.hero-art{gap:8px}.art-frame{height:clamp(143px,45vw,264px)}.art-frame:first-child{transform:translateY(9px)}.art-frame:last-child{transform:translateY(14px)}h1{font-size:clamp(2.6rem,9vw,4rem)}.actions{margin-top:23px}
  .story{display:block;padding-block:47px}.story-copy{margin-top:17px}.cast-section,.start{padding-block:46px}.section-heading{display:block;margin-bottom:19px}.section-heading>p{margin-top:9px}
  .cards{grid-template-columns:1fr;gap:16px}.card{display:grid;grid-template-columns:44% 1fr}.portrait{height:100%;aspect-ratio:auto;min-height:164px}.portrait span{width:28px;height:28px;right:8px;bottom:8px}.card-body{padding:13px 12px}.card h3{margin:5px 0 6px}.card-quote{font-size:.79rem;min-height:0}.role{font-size:.68rem}.tags{margin-top:9px;gap:4px}.tags li{font-size:.63rem;padding:1px 6px}
  .start-grid{grid-template-columns:1fr;gap:13px}.start-card{padding:17px}
  .profile{display:block}.profile-photo img{position:static;max-height:240px;object-position:center 37%}.profile-body{padding:21px}.facts dd{font-size:.79rem}
}
@media(max-width:360px){nav{gap:8px}.brand{font-size:.69rem}.wrap{width:calc(100% - 28px)}.card{grid-template-columns:39% 1fr}.hero-grid{gap:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.memories{padding-bottom:74px}
.wood-board{
  position:relative;
  isolation:isolate;
  display:grid;
  gap:45px;
  padding:47px 45px 35px;
  border:7px solid #71482e;
  border-radius:9px;
  background-color:#a97247;
  background-image:url(assets/wood-grain.webp);
  background-size:cover;
  box-shadow:inset 0 0 21px #49230ba8,0 18px 36px #0a070d60,0 0 0 1px #ca9a68;
}
.memory-row{position:relative;display:grid;align-items:start;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.memory-row::before{
  content:"";position:absolute;top:-6px;left:-16px;right:-16px;height:3px;
  transform:rotate(.55deg);border-radius:50%;
  background:repeating-linear-gradient(104deg,#c8a478 0 2px,#765433 2px 3px,#e2c19c 3px 5px);
  box-shadow:0 3px 3px #4a240fab;
}
.memory-row-last::before{transform:rotate(-.45deg)}
.polaroid{
  --tilt:-3deg;
  position:relative;display:block;min-width:0;width:100%;
  padding:9px 9px 0;border:0;border-radius:2px;
  background:linear-gradient(145deg,#fffaf0,#ede0cd);
  color:#4a3025;box-shadow:2px 8px 13px #341b13a8;
  text-align:center;transform:rotate(var(--tilt));transition:transform .2s ease,box-shadow .2s ease;
}
.polaroid:nth-child(2){--tilt:2.5deg}
.polaroid:nth-child(3){--tilt:-1.5deg}
.polaroid:nth-child(4){--tilt:3deg}
.polaroid::before{
  content:"";position:absolute;z-index:1;top:-16px;left:calc(50% - 5px);width:10px;height:27px;border-radius:2px;
  background:linear-gradient(90deg,#8e5a36 0%,#c69260 23%,#e0b383 62%,#a57247 100%);
  box-shadow:1px 2px 3px #3f251794;
}
.polaroid::after{
  content:"";position:absolute;z-index:2;top:-4px;left:calc(50% - 5px);width:10px;height:2px;
  background:#695344;box-shadow:0 1px #dfc8aa;
}
.polaroid:hover,.polaroid:focus-visible{z-index:3;transform:translateY(-5px) rotate(0);box-shadow:3px 14px 19px #341b13b8}
.polaroid img{height:auto;aspect-ratio:1;object-fit:contain;background:#d3c5b7}
.polaroid span{display:grid;place-items:center;min-height:43px;padding:4px 1px;font:700 clamp(.72rem,1.15vw,.97rem)/1.35 var(--sans)}
.memory-row-last{grid-template-columns:1fr 1fr 1.5fr 0.5fr}
.memory-row-last .polaroid:last-child{grid-column:span 2;max-width:390px;width:83%;justify-self:center;--tilt:-2deg}
.memory-row-last .polaroid:last-child img{aspect-ratio:1216/832}

#memory-dialog{width:min(790px,calc(100% - 28px));background:#201920}
.memory-print{margin:15px auto 0;width:max-content;max-width:calc(100% - 26px);padding:8px 8px 4px;background:#f5e9d6;color:#4a3025;border-radius:2px}
.memory-print img{width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 180px);object-fit:contain;margin:auto}
.memory-print figcaption{padding:8px 4px;text-align:center;font:700 1.05rem/1.4 var(--sans)}
.memory-controls{display:flex;justify-content:center;align-items:center;gap:19px;margin:10px 0;color:var(--muted);font-size:.8rem}
.memory-controls button{min-width:45px;min-height:38px;border:1px solid var(--line);border-radius:3px;background:var(--raised)}
.memory-controls button:hover{border-color:var(--rose)}
@media(max-width:950px){
  .wood-board{gap:37px;padding:40px 30px 29px}
  .memory-row{gap:17px}
}
@media(max-width:690px){
  .nav{gap:8px}nav{gap:10px}
  .memories{padding-bottom:47px}
  .wood-board{gap:34px;padding:32px 18px 22px;border-width:5px;background-size:auto 100%}
  .memory-row,.memory-row-last{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 16px}
  .memory-row::before{left:-10px;right:-10px}
  .memory-row::after{content:"";position:absolute;grid-row:2 / 3;grid-column:1 / -1;top:-6px;left:-10px;right:-10px;height:3px;transform:rotate(-.55deg);background:repeating-linear-gradient(104deg,#c8a478 0 2px,#765433 2px 3px,#e2c19c 3px 5px);box-shadow:0 3px 3px #4a240fab}
  .polaroid{z-index:1;padding:6px 6px 0}
  .polaroid span{min-height:34px;font-size:clamp(.68rem,2.7vw,.9rem)}
  .memory-row-last .polaroid:last-child{width:88%;margin-top:5px}
  .memory-row-last::after{top:-1px}
}
@media(max-width:360px){nav{gap:6px}.nav .brand{font-size:.62rem}nav{font-size:.68rem}}

.phone-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start;padding-block:66px 84px;border-top:1px solid var(--line)}
.phone-intro{padding-top:64px}
.phone-intro>p:not(.kicker){color:var(--muted);margin-top:20px}
.phone-intro .phone-intro-note{font-size:.84rem}
.phone-shell{
  min-width:0;padding:11px 11px 0;border:1px solid #826b7a;border-radius:33px;
  background:#100e15;box-shadow:0 20px 48px #0a070d99,inset 0 0 0 3px #25202b;
  color:#f6edf1;
}
.phone-status{position:relative;display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 14px;font-size:.73rem;font-weight:700}
.phone-island{position:absolute;left:50%;top:8px;width:65px;height:19px;transform:translateX(-50%);border-radius:20px;background:#050407}
.phone-display{border:1px solid #3b303d;border-radius:18px;overflow:hidden;background:#201a24}
.phone-screen{height:510px}
.phone-screen[hidden]{display:none}
.phone-home{
  display:flex;flex-direction:column;justify-content:space-between;padding:44px 16px 20px;
  background:linear-gradient(180deg,#1f1623 0%,#281a28 39%,#513042 77%,#382132 100%);
}
.phone-clock{text-align:center}
.phone-clock span{font-size:.78rem;color:#edbfd1}
.phone-clock strong{display:block;font-size:clamp(3.6rem,8vw,5rem);line-height:1.16;letter-spacing:-.09em;margin-left:-.06em}
.phone-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:13px 6px 11px;border:1px solid #806070;border-radius:20px;background:#241724a1;color:inherit}
.phone-apps button{display:grid;justify-items:center;gap:5px;border:0;background:transparent;padding:0;font-size:.72rem;white-space:nowrap}
.app-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;color:#241923;font-size:1.34rem;line-height:1;font-weight:700}
.app-messages{background:#b3d2c1}.app-calendar{background:#eab4c4}.app-album{background:#cbbedf}.app-journal{background:#eed1a9}
.phone-apps button:hover .app-icon{filter:brightness(1.13)}
.phone-home-button{width:100%;height:38px;display:grid;place-items:center;border:0;background:transparent}
.phone-home-button span{width:105px;height:4px;border-radius:5px;background:#f4dce7}
.phone-home-button:disabled{cursor:default}
.phone-home-button:disabled span{opacity:.45}
.phone-app{overflow:auto;overscroll-behavior:contain;padding:17px 13px}
.phone-app-header{display:flex;align-items:baseline;justify-content:space-between;gap:9px;padding:0 3px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.phone-app-header h3{font-size:1.22rem;letter-spacing:-.04em}
.phone-app-header h3:focus{outline:none}
.phone-app-header>span,.phone-thread small,.calendar-past small{font-size:.7rem;color:var(--muted)}
.phone-thread,.journal-entry{background:#2b232f;border:1px solid #4e3c4c;border-radius:9px;padding:8px 10px;margin:0 0 8px}
.phone-thread summary{display:flex;align-items:center;gap:6px;list-style:none}
.phone-thread summary::before{content:"›";font-size:1.1rem;line-height:1}
.phone-thread[open] summary::before{transform:rotate(90deg)}
.phone-thread summary small{margin-left:auto}
.chat{display:flex;flex-direction:column;gap:7px;padding-top:7px;font-size:.8rem}
.chat-time{text-align:center;font-size:.68rem;color:var(--muted)}
.bubble{max-width:90%;padding:6px 10px;border-radius:11px}
.sent{align-self:flex-end;background:#60384d}.received{align-self:flex-start;background:#3e3443}
.draft{padding:7px 0 1px;color:var(--muted)}.draft b{color:var(--rose);margin-right:5px}
.calendar-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:13px}
.calendar-days button{padding:7px 0;border:1px solid #60495a;border-radius:6px;background:#2b232f;font-size:.72rem}
.calendar-days button[aria-pressed=true]{background:var(--rose);color:#291c27;border-color:var(--rose)}
.calendar-agenda p,.calendar-past{padding:9px 3px;border-bottom:1px solid #473741;font-size:.8rem}
.calendar-agenda time{color:var(--rose);display:inline-block;min-width:48px}
.calendar-past{display:flex;flex-wrap:wrap;gap:4px 7px;margin-top:14px;color:var(--muted)}
.calendar-past>span{color:var(--rose)}
.phone-album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.album-photo{min-width:0;padding:0;border:1px solid #5b4657;background:#312633;border-radius:8px;overflow:hidden;text-align:left}
.album-photo:hover{border-color:var(--rose)}
.album-photo img{height:auto;aspect-ratio:832/1216;object-fit:cover}
.album-photo span{display:block;padding:7px 8px;color:#f3dce7;font-size:.73rem;line-height:1.5}
.journal-entry p{padding:5px 0 2px;font-size:.82rem;color:var(--muted)}
@media(max-width:760px){
  .phone-section{grid-template-columns:1fr;gap:18px;padding-block:43px 53px}
  .phone-intro{padding:0}
  .phone-intro>p:not(.kicker){margin-top:10px}
  .phone-shell{width:min(100%,420px);justify-self:center}
}
@media(max-width:440px){
  .nav{flex-wrap:wrap;gap:2px;align-content:center;padding-block:7px}
  .nav nav{flex-basis:100%;gap:0;justify-content:space-between}
  html{scroll-padding-top:76px}
  .phone-screen{height:460px}
}

.story-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:25px}
.story-link{
  isolation:isolate;position:relative;display:flex;align-items:end;justify-content:space-between;gap:12px;
  overflow:hidden;min-height:138px;padding:18px 19px;border:1px solid #624858;border-radius:6px;
  background:#2b202c;
}
.story-link img{position:absolute;z-index:-2;inset:0;object-position:right 38%;transition:transform .25s ease}
.story-link::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#281b28 6%,#281b28e8 37%,#281b2840 80%),linear-gradient(0deg,#20141fb0,transparent 80%)}
.story-link-now img{object-position:right 42%}
.story-link:hover{border-color:var(--rose)}
.story-link:hover img{transform:scale(1.035)}
.story-link-copy{display:grid;gap:4px;line-height:1.35}
.story-link-copy small{color:#f3c7d8;font-size:.73rem}
.story-link-copy strong{font-size:clamp(1rem,2.2vw,1.42rem);letter-spacing:-.055em}
.story-link-arrow{display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid #e8bbcfa0;border-radius:50%;background:#261927a8}
.scene-link{display:inline-flex;align-items:center;gap:9px;min-height:40px;margin-top:10px;color:var(--rose);font-size:.83rem;text-decoration:underline;text-underline-offset:4px}
.phone-display{background:#211a25}
.phone-app{position:relative;padding:0 13px 17px;scroll-padding-top:66px}
.phone-app-header{position:sticky;top:0;z-index:1;justify-content:start;align-items:center;margin:0 0 12px;padding:6px 0;min-height:58px;background:#211a25}
.phone-app-header>span{margin-left:auto;text-align:right}
.phone-back{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;background:#312633;color:var(--rose);border-radius:9px;font-size:1.5rem;line-height:1}
.phone-back:hover{background:#4d3548}
.phone-notification{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:10px 0 8px;padding:10px 12px;border:1px solid #a77c94;border-radius:13px;background:#241926d9;text-align:left}
.phone-notification:hover{border-color:var(--rose)}
.phone-notification strong,.phone-notification span span{display:block}
.phone-notification strong{font-size:.77rem;color:#f5d7e5}
.phone-notification span span{font-size:.85rem}
.notification-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#b3d2c1;color:#201a24}
#unsent-message:focus{outline:1px solid var(--rose);outline-offset:2px;border-radius:3px}
.album-byline{margin:0 0 11px;color:var(--muted);font-size:.75rem}
@media(max-width:560px){
  .story-links{gap:9px;margin-top:15px}
  .story-link{align-items:end;min-height:108px;padding:10px 8px;gap:4px}
  .story-link::before{background:linear-gradient(0deg,#211725 4%,#211725b0 48%,#281b2822 95%)}
  .story-link-arrow{width:22px;height:22px;font-size:.7rem}
  .story-link-copy small{font-size:.65rem}
  .story-link-copy strong{font-size:clamp(.77rem,3.6vw,1rem)}
  .phone-notification{margin:8px 0;padding:8px 9px}
}

.chat-archive{border:1px solid #594555;border-radius:7px;padding:3px 8px}
.chat-archive summary{display:list-item;font-size:.75rem;color:var(--muted)}
.chat-archive summary::before{content:none}
.chat-archive .chat{padding-bottom:7px}
.calendar-archive{margin-top:16px}
.calendar-archive .calendar-past{margin:0}
.journal-entry p+p{margin-top:5px}
.album-filters{display:flex;gap:7px;margin-bottom:11px}
.album-filters button{min-height:36px;padding:3px 11px;border:1px solid #60495a;border-radius:6px;background:#2b232f;font-size:.75rem}
.album-filters button[aria-pressed=true]{background:var(--rose);color:#291c27;border-color:var(--rose)}
.album-photo[data-favorite]{position:relative}
.album-photo[data-favorite]::after{content:"♡";position:absolute;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#241926e6;color:#ffd2e0;line-height:1}

.bgm-toggle{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;flex:none;
  min-height:40px;padding:4px 11px;border:1px solid #775769;border-radius:20px;
  background:#2c202d;color:#f3cedd;font-size:.75rem;white-space:nowrap
}
.bgm-toggle:hover{border-color:var(--rose)}
.bgm-toggle[aria-pressed=false]{background:transparent;color:var(--muted)}
#bgm-state{min-width:2em;font-size:.68rem}
@media(max-width:690px){
  .nav{flex-wrap:wrap;gap:2px 12px;align-content:center;padding-block:6px}
  .nav nav{order:1;flex-basis:100%;gap:0;justify-content:space-between}
  .bgm-toggle{min-height:36px;padding-inline:8px}
  html{scroll-padding-top:90px}
}