:root {
    color-scheme: light;
    --paper: #f8fbff;
    --cyan: #00d2d3;
    --teal: #087a91;
    --navy: #18354c;
    --ink: #222f3e;
    --muted: #576574;
    --gold: #feca57;
    --orange: #ff9f43;
    --line: #dcecf4;
    --note-size: .85rem;
    --shadow: 0 16px 48px rgb(47 98 123 / 8%);
    font-family: "Inter", "Noto Sans Thai", "Noto Sans JP", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.75; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 8% 20%, rgb(0 210 211 / 12%), transparent 42%),
        radial-gradient(ellipse at 93% 10%, rgb(254 202 87 / 11%), transparent 34%),
        radial-gradient(ellipse at 0% 86%, rgb(255 159 243 / 10%), transparent 30%);
    pointer-events: none;
}
[hidden] { display: none !important; }
a { color: var(--teal); text-underline-offset: 4px; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 5px;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { line-height: 1.35; }
.icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link {
    position: fixed;
    top: 12px;
    left: 24px;
    z-index: 200;
    transform: translateY(-150%);
    padding: 12px 24px;
    background: white;
    border-radius: 12px;
}
.skip-link:focus { transform: none; }
.mod-nav {
    position: fixed;
    z-index: 100;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 64px));
    min-height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 28px;
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: 50px;
    background: rgb(255 255 255 / 82%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgb(55 94 130 / 6%);
}
.brand { color: var(--navy); text-decoration: none; font-weight: 900; font-size: 1.25rem; white-space: nowrap; }
.brand span { font-size: 1rem; }
.mod-nav-links { display: flex; align-items: center; gap: 25px; }
.mod-nav-links a { font-size: .875rem; font-weight: 600; color: #526c83; text-decoration: none; }
.mod-nav-links a:hover { color: var(--teal); }
.mod-nav-links .nav-active {
    padding: 9px 23px;
    color: white;
    background: linear-gradient(135deg, #078296, #087a91);
    border-radius: 30px;
}
.mod-nav-links .nav-active:hover { color: white; }
.mod-main, .mod-footer { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.mod-main { padding-top: 140px; }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .19em; color: #718aa6; line-height: 1.6; }
.memory-note { font: 500 1.6rem/1.2 "Caveat", cursive; color: #78a2bc; }
.photo-print {
    padding: 10px 10px 30px;
    background: white;
    box-shadow: 0 14px 30px rgb(37 73 98 / 17%);
}
.photo-print figcaption { margin-top: 8px; text-align: right; font: 500 1.4rem/1 "Caveat", cursive; color: #78a2bc; }
.collection-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 40px; margin-bottom: 44px; }
.collection-title { font-size: clamp(4rem, 8vw, 7rem); letter-spacing: -.065em; font-weight: 900; color: var(--navy); margin-top: 7px; line-height: 1.1; }
.collection-title span { color: #009bad; }
.collection-subtitle { font-size: clamp(1.7rem, 2.7vw, 2.4rem); font-weight: 800; color: var(--navy); letter-spacing: -.025em; margin-top: 7px; }
.collection-intro { color: #5b6e85; font-size: 1.08rem; margin-top: 15px; }
.collection-art { position: relative; padding: 0 28px 12px 45px; }
.collection-art .photo-print { transform: rotate(-4deg); max-width: 410px; margin-left: auto; padding-bottom: 12px; }
.collection-art img { aspect-ratio: 1.6; object-fit: cover; }
.collection-art .memory-note { position: absolute; bottom: -6px; right: 0; transform: rotate(-8deg); font-size: 1.4rem; }
.petal { position: absolute; width: 15px; height: 24px; border: 1px solid #f4afc1; background: #ffe9ef; border-radius: 80% 10% 80% 10%; transform: rotate(-28deg); opacity: .75; }
.petal.one { left: 12px; top: 24px; }
.petal.two { right: 0; top: 65%; transform: rotate(42deg) scale(.75); }
.petal.three { left: 38px; bottom: 30px; transform: rotate(32deg) scale(.6); }
.collection-label { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.collection-label h2 { font-size: 1.25rem; color: var(--navy); }
.collection-label::after { content: ""; height: 2px; background: var(--gold); flex: 1; order: 1; }
.collection-label .eyebrow { order: 2; white-space: nowrap; }
.project-list { display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; }
.project-card {
    display: grid;
    grid-template-columns: 1.03fr 1fr;
    gap: 35px;
    padding: 12px;
    text-decoration: none;
    color: var(--ink);
    background: rgb(255 255 255 / 90%);
    border: 2px solid white;
    border-radius: 30px;
    box-shadow: var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.project-card:hover { transform: translateY(-5px); border-color: #b9eef0; box-shadow: 0 24px 50px rgb(47 98 123 / 13%); }
.project-card--goddess .project-art img { object-position: 50% 35%; }
.project-card--konosuba .project-art { background: #fff; }
.project-card--konosuba .project-art img { object-fit: contain; object-position: center; }
.project-card--konosuba .project-art::after { display: none; }
.project-card--konosuba .project-number { z-index: 1; padding: 3px 9px; background: #f74379; border-radius: 12px; }
.project-card--goddess .project-number { z-index: 1; top: 16px; left: 18px; padding: 3px 9px; background: rgb(24 53 76 / 45%); border-radius: 12px; }
.project-art { position: relative; overflow: hidden; border-radius: 21px; min-height: 380px; }
.project-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.project-number { position: absolute; top: 21px; left: 23px; font-size: .8rem; font-weight: 700; color: white; }
.project-art::after { content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgb(14 38 56 / 50%)); }
.cover-caption { position: absolute; left: 22px; bottom: 18px; z-index: 1; color: white; font: 500 1.9rem/1 "Caveat", cursive; transform: rotate(-5deg); }
.project-info { align-self: center; padding: 25px 22px 25px 0; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tag { display: inline-block; padding: 5px 15px; border-radius: 25px; font-size: .75rem; font-weight: 600; line-height: 1.7; }
.tag-blue { background: #e0f4ff; color: #087399; }
.tag-cyan { background: #d9f9fa; color: #096b7d; }
.tag-gold { background: #fff0c7; color: #8b5c15; }
.tag-pink { background: #ffe8ee; color: #995567; }
.project-info h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -.05em; margin-top: 23px; color: var(--navy); }
.game-japanese { color: #748ca4; font-size: 1.07rem; font-weight: 500; margin-top: 4px; }
.game-romanized { color: #526c83; font-size: 1.02rem; font-weight: 500; line-height: 1.65; margin-top: 4px; }
.game-thai { color: #526c83; font-size: 1.07rem; font-weight: 500; }
.gold-rule { display: block; width: 54px; height: 3px; margin: 22px 0; background: var(--gold); border-radius: 2px; }
.project-description { font-size: 1.03rem; color: #526c83; }
.project-meta { font-size: .81rem; color: #71859c; margin-top: 12px; }
.project-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 27px;
    border-radius: 30px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #078296, #087a91);
    color: white;
    font-size: .94rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.5;
    transition: transform .25s ease, box-shadow .25s ease;
}
.button .icon { width: 19px; height: 19px; }
.button:not(:disabled):hover, a.project-card:hover .button { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 161 180 / 18%); }
.button-outline { background: rgb(255 255 255 / 75%); color: var(--teal); border-color: #8fcede; }
.action-note { color: #73869d; font-size: .79rem; border-left: 1px solid #d5e1e9; padding-left: 20px; }
.collection-future { display: flex; align-items: center; justify-content: center; gap: 15px; color: #71859c; font-size: .9rem; margin: 36px 0 18px; }
.collection-future .icon { color: #d99b2a; }
.mod-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 0; font-size: .78rem; color: #70869c; }
.footer-left { display: flex; align-items: center; gap: 18px; }
.footer-left > .icon { color: #10b2c4; }
.footer-brand { color: var(--navy); font-weight: 700; font-size: .97rem; text-decoration: none; }
.footer-home { border-left: 1px solid #cfdde7; padding-left: 18px; text-decoration: none; }
.breadcrumb { display: flex; align-items: center; gap: 12px; font-size: .76rem; color: #7a8ea4; margin: -13px 0 28px; }
.breadcrumb a { text-decoration: none; }
.detail-hero { display: grid; grid-template-columns: .94fr 1.06fr; gap: 25px; align-items: center; margin-bottom: 35px; }
.aria-title { color: var(--navy); margin-top: 10px; letter-spacing: -.06em; font-weight: 900; }
.aria-title span { display: block; font-size: clamp(5.5rem, 9.2vw, 8rem); line-height: 1; color: #009bad; }
.aria-title small { display: block; font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -.045em; line-height: 1.2; margin-top: 5px; }
.detail-hero .game-japanese { margin-top: 17px; font-size: 1.25rem; }
.detail-hero .game-thai { font-size: 1.08rem; }
.hero-tagline { font-size: 1.06rem; font-weight: 600; margin: 22px 0 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.detail-postcards { position: relative; min-width: 0; min-height: 520px; display: flex; align-items: center; padding: 0 110px 35px 34px; }
.main-postcard { width: 340px; max-width: 100%; transform: rotate(2deg); flex-shrink: 0; padding-bottom: 12px; }
.main-postcard img { width: 100%; aspect-ratio: 745 / 1122; }
.small-postcard { position: absolute; right: 10px; bottom: 28px; width: 265px; transform: rotate(8deg); padding-bottom: 12px; }
.small-postcard img { width: 100%; aspect-ratio: 1.6; object-fit: cover; }
.detail-postcards > .memory-note { position: absolute; right: 5px; top: 151px; width: 100px; font-size: 1.55rem; text-align: center; transform: rotate(-8deg); }
.aqua-stamp { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 105px; height: 105px; border: 3px double #94c2d3; border-radius: 50%; font-size: .6rem; font-weight: 600; letter-spacing: .09em; color: #6e9fb6; transform: rotate(14deg); }
.aqua-stamp b { font-size: .85rem; letter-spacing: .2em; }
.aqua-stamp .icon { width: 35px; }
.detail-postcards::before { content: ""; position: absolute; width: 300px; height: 90px; bottom: 0; right: 0; background: url("../images/aria/aqua-skyline.svg") bottom right / contain no-repeat; opacity: .16; }
.chapter-nav {
    position: sticky;
    z-index: 90;
    top: 105px;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 36px;
    padding: 4px 14px;
    background: rgb(255 255 255 / 90%);
    border: 1px solid white;
    border-radius: 30px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgb(47 98 123 / 5%);
}
.chapter-nav a { padding: 10px 22px; font-size: .84rem; color: #526c83; text-decoration: none; border-bottom: 2px solid transparent; }
.chapter-nav a:hover, .chapter-nav a[aria-current] { color: var(--teal); border-bottom-color: #0eb8c6; }
.detail-section { margin-bottom: 44px; scroll-margin-top: 175px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.section-heading h2 { position: relative; font-size: clamp(1.6rem, 2.7vw, 2.25rem); font-weight: 800; color: var(--navy); margin-top: 6px; letter-spacing: -.03em; }
.section-heading h2::before { content: ""; position: absolute; top: 5px; left: -14px; bottom: 5px; width: 3px; border-radius: 3px; background: #14b6c5; }
.section-heading .memory-note { text-align: right; font-size: 1.35rem; }
.section-subtitle { color: #68859d; font-size: 1rem; margin-top: 6px; }
#story { position: relative; }
#story > .section-heading { margin-bottom: 34px; }
#story > .section-heading .memory-note { font-size: 1.7rem; transform: rotate(-5deg); }
.story-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 12px 4px 15px; }
.story-card { position: relative; display: flex; flex-direction: column; min-width: 0; isolation: isolate; }
.story-photo { position: relative; z-index: 1; margin: 0 8px; padding: 12px 12px 0; background: white url("../images/aria/paper-grain.svg"); box-shadow: 1px 7px 12px #32546e24, 0 15px 25px #32546e12; transform: rotate(-2deg); }
.story-card:nth-child(2) .story-photo { transform: rotate(1.5deg); }
.story-card:nth-child(3) .story-photo { transform: rotate(-1deg); }
.story-photo::before { content: ""; position: absolute; z-index: 2; top: -17px; left: 35%; width: 80px; height: 35px; background: repeating-linear-gradient(125deg, #9ac5d229 0 5px, #d2eaf344 5px 8px), #d4e5ed99; transform: rotate(-5deg); }
.story-card:nth-child(2) .story-photo::before { background: repeating-linear-gradient(120deg, #f3c9d229 0 5px, #fce7eb44 5px 8px), #f3d4d999; transform: rotate(5deg); }
.story-card:nth-child(3) .story-photo::before { transform: rotate(-3deg); }
.story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 578 / 835; object-fit: contain; background: #fbfcfd; }
.story-photo figcaption { min-height: 46px; display: grid; place-items: center; padding: 9px 0 12px; font: 500 1.4rem/1.1 "Caveat", cursive; color: #517994; text-align: center; }
.story-copy { position: relative; flex: 1; padding: 54px 25px 27px; margin-top: -23px; border: 1px solid #e9e0ce; border-radius: 3px; background: url("../images/aria/paper-grain.svg"), linear-gradient(125deg, #fffcf6, #faf4e7); box-shadow: 0 5px 12px #32546e12; }
.story-copy::before { content: ""; position: absolute; top: 36px; right: -4px; width: 83px; height: 48px; background: url("../images/aria/postmark.svg") center / contain no-repeat; opacity: .3; transform: rotate(-10deg); pointer-events: none; }
.story-number { position: relative; display: flex; align-items: center; gap: 15px; margin-bottom: 8px; color: #315c82; font: 500 3rem/1 "Caveat", cursive; }
.story-number::after { content: ""; width: 55%; height: 1px; background: #8baabd; }
.story-copy h3 { position: relative; color: var(--navy); font-size: 1.19rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 15px; text-wrap: balance; }
.story-copy p { color: #617b91; font-size: .88rem; line-height: 1.9; }
.story-copy p + p { margin-top: 12px; }
.mod-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature { padding: 27px 16px 22px; text-align: center; border: 1px solid white; border-radius: 20px; background: rgb(255 255 255 / 90%); box-shadow: var(--shadow); }
.feature .icon { width: 31px; height: 31px; color: #11afc2; margin-bottom: 12px; }
.feature h3 { font-size: 1rem; color: var(--navy); font-weight: 700; }
.feature h3.stat { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.feature p { font-size: .81rem; color: #71869c; margin-top: 8px; }
.release-section { --postcard-ink: #315c82; }
#release-heading { text-wrap: balance; }
.release-section .section-heading > div { max-width: 85%; }
.release-album { position: relative; display: grid; grid-template-columns: minmax(0, .43fr) minmax(0, .77fr); align-items: center; padding: 35px 18px 35px 12px; isolation: isolate; }
.release-album::before { content: ""; position: absolute; inset: 5% -2%; z-index: -1; background: radial-gradient(ellipse, #d4edf655, transparent 70%); }
.release-photo { position: relative; z-index: 2; padding: 14px 14px 0; margin-right: -25px; background: white url("../images/aria/paper-grain.svg"); box-shadow: 2px 8px 13px #32546e24, 0 20px 45px #32546e12; transform: rotate(-5deg); }
.release-photo::before { content: ""; position: absolute; z-index: 1; top: -19px; left: 32%; width: 90px; height: 39px; background: repeating-linear-gradient(125deg, #9ac5d229 0 5px, #d2eaf344 5px 8px), #d4e5ed99; box-shadow: 0 1px 3px #32546e0a; transform: rotate(-8deg); }
.release-photo > img { width: 100%; height: auto; aspect-ratio: 735 / 987; object-fit: cover; }
.release-photo figcaption { position: relative; min-height: 103px; padding: 11px 9px 18px; color: var(--postcard-ink); }
.release-photo time { display: block; font: 500 2.5rem/1.15 "Caveat", cursive; }
.release-photo figcaption > span { display: block; margin-top: 5px; font-size: .77rem; }
.release-photo .memory-note { position: absolute; right: 4px; bottom: 19px; font-size: 1.2rem; text-align: right; transform: rotate(-5deg); }
.release-postcard { position: relative; min-width: 0; padding: 30px 32px 32px 70px; color: var(--postcard-ink); background: url("../images/aria/paper-grain.svg"), linear-gradient(120deg, #fffcf6, #faf4e7); border: 1px solid #eadfcd; box-shadow: 1px 7px 12px #32546e1f, 0 20px 42px #32546e12; transform: rotate(3deg); }
.postcard-header { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 18px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #7da0b661; }
.release-label { color: #517994; font-size: .85rem; margin-bottom: 6px; }
.postcard-date { display: block; font: 500 clamp(2.5rem, 4.5vw, 3.75rem)/1.15 "Caveat", cursive; white-space: nowrap; }
.postcard-time { color: #517994; font-size: .82rem; margin-top: 5px; }
.postcard-time > span { font: 500 1.65rem/1.2 "Caveat", cursive; margin-right: 14px; }
.postcard-postage { position: relative; transform: rotate(5deg); }
.postcard-stamp { position: relative; padding: 8px 8px 4px; background: #fffef9; outline: 3px dotted #eadfcd; box-shadow: 2px 3px 6px #6d583126; }
.postcard-stamp img { width: 100%; height: auto; aspect-ratio: 1.35; object-fit: none; object-position: 77% 10%; }
.postcard-stamp > span { display: flex; align-items: center; justify-content: space-between; color: #517994; font: .58rem Georgia, serif; letter-spacing: .12em; padding-top: 4px; }
.postcard-stamp b { font-size: 1rem; font-weight: 400; }
.postcard-postmark { position: absolute; z-index: 1; top: 10px; right: 42px; width: 185px; max-width: none; height: auto; opacity: .8; pointer-events: none; transform: rotate(-12deg); }
.postcard-body { display: grid; grid-template-columns: minmax(0, 1fr) 125px; gap: 23px; padding-top: 23px; }
.release-intro { font-size: .85rem; color: #517994; }
.release-duration { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 4px; margin: 15px 0 20px; }
.release-duration > div { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.release-duration dt { font-size: .78rem; color: #517994; }
.release-duration dd { order: -1; margin: 0; font: 500 clamp(2.8rem, 4.6vw, 4rem)/1.15 "Caveat", cursive; }
.postcard-underline { position: relative; height: 13px; border-bottom: 2px solid #7da0b6; transform: rotate(-2deg); margin: 0 24px 21px 0; border-radius: 0 0 50% 30%; }
.postcard-underline span { position: absolute; right: -28px; top: -17px; font: 500 2.6rem/1 "Caveat", cursive; color: #517994; }
.release-total { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px; color: #517994; font-size: .73rem; }
.release-total strong { font: 500 2.25rem/1.2 "Caveat", cursive; color: var(--postcard-ink); }
.postcard-address { padding: 28px 0 0 20px; border-left: 1px solid #7da0b661; color: #6d90ac; font-size: .79rem; line-height: 1.9; }
.postcard-address p + p { margin-top: 22px; text-align: center; }
.postcard-address > span { display: block; margin-top: 20px; height: 1px; background: #7da0b661; }
.release-reflection { width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 0 12px 16px; text-align: center; color: #517994; font-size: 1rem; }
.release-reflection::after { content: ""; display: block; width: 60%; height: 10px; margin: 6px auto 0; border-bottom: 1px solid #98b7cc; border-radius: 50%; transform: rotate(-2deg); }
.album-petal { position: absolute; width: 38px; height: 27px; border-radius: 75% 15% 75% 25%; background: radial-gradient(ellipse at 30% 30%, #fffafb, #f6dce1 65%, #edcbd0); box-shadow: 1px 3px 5px #ab7d8820; pointer-events: none; }
.petal-one { z-index: 3; left: -6px; top: 30px; transform: rotate(30deg); }
.petal-two { right: 0; bottom: 85px; z-index: 3; transform: rotate(-25deg); }
.screenshot-album { padding: 16px 16px 12px; border: 1px solid white; border-radius: 24px; background: rgb(255 255 255 / 75%); box-shadow: var(--shadow); }
.screenshot-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; list-style: none; margin: 0; padding: 8px 2px 16px; scrollbar-width: thin; scrollbar-color: #80c6d3 #edf6fa; }
.screenshot-item { flex: 0 0 340px; min-width: 0; scroll-snap-align: start; }
.screenshot-card { display: block; padding: 8px; border: 1px solid #e1edf5; border-radius: 15px; background: white; text-decoration: none; box-shadow: 0 5px 14px rgb(47 98 123 / 6%); transition: transform .25s, box-shadow .25s; }
.screenshot-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 9px; background: #edf5fa; }
.screenshot-caption { display: flex; justify-content: space-between; gap: 8px; padding: 12px 4px 4px; color: #5e7a91; font-size: var(--note-size); }
.screenshot-caption > :last-child { color: var(--teal); }
@media (hover: hover) { .screenshot-card:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 12px 22px rgb(47 98 123 / 13%); } }
.album-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.album-footer p { font-size: var(--note-size); color: #617b91; }
.album-controls { display: flex; gap: 8px; }
.gallery-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #b9dae4; border-radius: 50%; color: var(--teal); background: white; cursor: pointer; font-size: 1.3rem; }
.gallery-button:hover:not(:disabled) { background: #e4f8fa; }
.gallery-button:disabled { opacity: .4; cursor: default; }
.lightbox-open { overflow: hidden; }
.screenshot-lightbox { width: min(1100px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid #d8eef3; border-radius: 22px; background: #f5fbff; color: var(--navy); box-shadow: 0 24px 100px #102e4c66; }
.screenshot-lightbox::backdrop { background: rgb(13 34 53 / 80%); backdrop-filter: blur(8px); }
.lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.lightbox-header h2 { font-size: 1rem; }
.lightbox-close { width: 40px; height: 40px; border: 1px solid #bddce7; border-radius: 50%; background: white; color: var(--navy); font-size: 1.1rem; cursor: pointer; }
.lightbox-stage { display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: #e6f0f7; }
.lightbox-stage img { display: block; width: 100%; height: min(65dvh, 720px); object-fit: contain; }
.lightbox-footer { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-top: 12px; }
.lightbox-footer p { font-size: var(--note-size); text-align: center; }
.lightbox-hint { text-align: center; color: #688397; font-size: var(--note-size); margin-top: 10px; }
.iso-filename { overflow-wrap: anywhere; }
.installation-order { font-size: .88rem; color: #617b91; margin-top: 22px; line-height: 1.9; }
.installation-order strong { color: var(--navy); }
.patch-file-guide { margin: 22px 0; padding: 24px; border: 1px solid #d8eaf2; border-radius: 20px; background: linear-gradient(135deg, #edf8fc, #fff); }
.patch-file-guide figcaption { margin-bottom: 16px; color: var(--navy); font-size: .94rem; }
.patch-file-guide figcaption > span { display: block; color: #688397; font-size: var(--note-size); margin-top: 4px; }
.patch-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: center; margin: 12px 0; }
.patch-field > span { color: var(--teal); font-size: .84rem; font-weight: 700; }
.patch-field p { margin: 0; padding: 13px 16px; border: 1px solid #cfe4ee; border-radius: 10px; background: white; color: #46677e; font-size: var(--note-size); }
.patch-field small { display: block; margin-top: 4px; color: #6d8598; font-size: var(--note-size); overflow-wrap: anywhere; }
.patch-apply { color: #617b91; font-size: var(--note-size); margin-top: 18px; }
.patch-apply span { display: inline-block; background: #e1f5f6; color: var(--teal); border-radius: 8px; padding: 7px 12px; margin-right: 8px; font-weight: 700; }
.iso-card { display: grid; grid-template-columns: 66px minmax(0, 1fr) 235px; align-items: center; gap: 22px; padding: 22px 26px; border: 1px solid #d6e8f3; border-radius: 20px; background: #f0f8ff; }
.iso-disc { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #b7cbdc; border-radius: 50%; background: conic-gradient(from 45deg, #dce8ee, white, #c2d4e4, #edf3f8, #dce8ee); }
.iso-disc .icon { width: 32px; height: 32px; color: #8099ad; }
.iso-data h3 { font-size: 1.08rem; color: var(--navy); }
.iso-data p { color: #69829a; font-size: var(--note-size); }
.hash-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.hash-row code { font-size: var(--note-size); color: #365978; overflow-wrap: anywhere; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 5px 12px; background: white; border: 1px solid #a7d4e0; color: var(--teal); border-radius: 20px; font-size: .73rem; cursor: pointer; }
.copy-button.is-copied { background: #dcf8ef; border-color: #89c5ac; color: #246645; }
.iso-reminder { border-left: 1px solid #ccdfec; padding-left: 22px; color: #55768f; font-size: .85rem; }
.installation-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; margin: 18px 0; padding: 0; }
.install-step { display: grid; grid-template-columns: 32px 27px minmax(0, 1fr); align-items: start; gap: 17px; padding: 21px; border: 1px solid white; border-radius: 17px; background: rgb(255 255 255 / 94%); box-shadow: 0 8px 24px rgb(47 98 123 / 5%); }
.install-step > .icon { color: #11adc0; width: 29px; height: 29px; }
.step-number { color: #0ca8bc; font-size: 1.05rem; line-height: 1.5; font-weight: 700; }
.install-step h3 { font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.install-step p { color: #658099; font-size: var(--note-size); }
.install-step p + p { margin-top: 6px; }
.guide-details { background: rgb(255 255 255 / 85%); border: 1px solid #e1edf5; border-radius: 14px; margin-top: 12px; overflow: hidden; }
.guide-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; color: var(--navy); font-size: .9rem; font-weight: 600; }
.guide-details summary::-webkit-details-marker { display: none; }
.guide-details summary .icon { width: 18px; height: 18px; transition: transform .2s; }
.guide-details[open] summary .icon { transform: rotate(45deg); }
.credits-block { margin-top: 42px; scroll-margin-top: 175px; }
.credits-header { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 35px; }
.credits-header h3 { color: var(--navy); font-size: clamp(1.6rem, 2.7vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; margin-top: 6px; }
.credits-header > .memory-note { font-size: 1.6rem; transform: rotate(-5deg); text-align: right; }
.note-letter { position: relative; max-width: 1100px; margin: 0 auto; padding: 45px 60px 42px; color: #315c82; border: 1px solid #e9decb; border-radius: 3px; background: url("../images/aria/paper-grain.svg"), linear-gradient(120deg, #fffdf7, #faf4e7); box-shadow: 2px 8px 14px #32546e21, 0 20px 42px #32546e0c; transform: rotate(-.35deg); }
.note-letter::before { content: ""; position: absolute; top: -19px; left: calc(50% - 65px); width: 130px; height: 42px; background: repeating-linear-gradient(125deg, #9ac5d229 0 5px, #d2eaf344 5px 8px), #d4e5ed99; transform: rotate(-6deg); }
.letter-petal { z-index: 2; right: -7px; top: -4px; width: 44px; height: 32px; transform: rotate(70deg); }
.letter-masthead { position: relative; padding-top: 80px; padding-bottom: 27px; border-bottom: 1px solid #8baabd; }
.letter-author { font-size: 1rem; line-height: 1.8; }
.letter-name { display: inline-block; margin-right: 8px; font: 500 3.4rem/1.2 "Caveat", cursive; }
.letter-masthead h4 { color: var(--navy); font-size: 1.06rem; font-weight: 700; margin: 16px 0 0; line-height: 1.8; }
.letter-postage { position: absolute; top: -16px; right: 0; width: 145px; transform: rotate(3deg); }
.letter-postage .postcard-postmark { width: 200px; top: -8px; right: 50px; opacity: .65; transform: rotate(-8deg); }
.letter-message { max-width: 880px; margin: 30px 0 0; font-size: 1.2rem; line-height: 1.9; }
.letter-message > p + p { margin-top: 27px; }
.letter-invitation { color: #087a91; font-weight: 600; }
.letter-divider { display: flex; align-items: center; gap: 18px; margin: 28px 0; color: #78a2bc; }
.letter-divider::before, .letter-divider::after { content: ""; flex: 1; height: 1px; background: #9cb7c8; }
.letter-divider span { font: 500 1.7rem/1 "Caveat", cursive; }
.letter-ps strong { margin-right: 7px; color: var(--navy); }
.letter-signoff { margin-top: 30px; text-align: right; }
.letter-regards { display: inline-block; position: relative; font: 500 2.5rem/1.2 "Caveat", cursive; padding-bottom: 13px; }
.letter-regards::after { content: ""; position: absolute; left: 0; right: 35px; bottom: 7px; height: 9px; border-bottom: 1px solid #78a2bc; border-radius: 50%; transform: rotate(-5deg); }
.letter-regards span { margin-left: 12px; color: #78a2bc; }
.letter-signature { color: var(--navy); font-size: .95rem; font-weight: 600; margin-top: 4px; }
.letter-avatar { color: #617b91; font-size: var(--note-size); margin-top: 6px; }
.credits-attribution { max-width: 1100px; margin: 23px auto 0; text-align: center; color: #6d8496; font-size: .7rem; line-height: 1.9; overflow-wrap: anywhere; }
.credits-attribution p + p { margin-top: 5px; }
.guide-content { border-top: 1px solid #e1edf5; padding: 22px; color: #617b91; font-size: var(--note-size); }
.guide-content h4 { font-size: .9rem; color: var(--navy); margin: 17px 0 9px; }
.guide-content h4:first-child { margin-top: 0; }
.guide-content p + p { margin-top: 10px; }
.guide-content ul { padding-left: 22px; }
.guide-content li + li { margin-top: 7px; }
.guide-content dl { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 7px 18px; margin: 15px 0; }
.guide-content dt { font-weight: 600; color: var(--navy); }
.guide-content dd { margin: 0; overflow-wrap: anywhere; }
.guide-content code { overflow-wrap: anywhere; }
.command { position: relative; margin: 12px 0 18px; }
.command pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 18px 20px; background: #edf5fa; border: 1px solid #dfebf2; border-radius: 12px; color: #365978; font-size: .78rem; line-height: 1.8; }
.command .copy-button { margin-top: 8px; }
.download-panel { position: relative; isolation: isolate; padding: 44px 20px 0; scroll-margin-top: 175px; }
.download-panel::before { content: ""; position: absolute; z-index: -1; inset: 0 0 0; background: url("../images/aria/paper-grain.svg"), #eee3d0; clip-path: polygon(0 19%, 50% 0, 100% 19%, 100% 100%, 0 100%); }
.download-letter { position: relative; min-height: 655px; padding: 48px 48px 210px; border: 1px solid #eee4d5; background: url("../images/aria/paper-grain.svg"), linear-gradient(135deg, #fffef9, #faf6eb); box-shadow: 0 8px 22px rgb(91 74 45 / 9%); transform: rotate(-.5deg); }
.download-copy { position: relative; z-index: 2; }
.download-copy > .eyebrow { display: flex; align-items: center; gap: 20px; max-width: 72%; color: #648ba7; }
.download-copy > .eyebrow::after { content: ""; flex: 1; height: 1px; background: #c3d6df; }
.download-panel h2 { max-width: 78%; font-size: clamp(1.55rem, 2.6vw, 2.1rem); color: var(--navy); font-weight: 800; letter-spacing: -.03em; margin: 27px 0 12px; line-height: 1.5; }
.download-panel h3 { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.8rem); font-weight: 500; color: #315c82; }
.download-action { width: min(350px, 55%); margin: 20px 0 0 210px; text-align: center; }
.download-meta { font-size: .95rem; color: #517994; margin: 0 0 22px; }
.download-button { background: #315f81; border: 1px solid #274f6e; border-radius: 11px; width: 100%; padding: 16px 22px; box-shadow: 0 5px 10px rgb(41 69 89 / 17%); }
.download-status { color: #64819a; font-size: var(--note-size); margin: 10px 0 20px; }
.download-requirement { padding-top: 16px; border-top: 1px solid #c7d7df; font-size: var(--note-size); color: #517994; margin: 0; }
.download-postage { position: absolute; width: 130px; top: 30px; right: 30px; transform: rotate(3deg); }
.download-postage .postcard-postmark { width: 180px; right: 42px; top: 0; }
.download-flight { position: absolute; z-index: 2; width: 300px; top: 276px; right: 23px; color: #315c82; pointer-events: none; }
.paper-flight { display: block; width: 100%; overflow: visible; }
.flight-trail { fill: none; stroke: #517994; stroke-width: 1.8; stroke-dasharray: 6 8; stroke-linecap: round; }
.paper-plane { filter: drop-shadow(0 9px 6px rgb(56 68 79 / 14%)); }
.download-flight .memory-note { margin: -14px 0 0; text-align: right; font-size: 1.8rem; transform: rotate(-7deg); }
.envelope-folds { position: absolute; inset: 0; pointer-events: none; }
.envelope-folds > span { position: absolute; inset: auto 0 0; height: 250px; background: url("../images/aria/paper-grain.svg"), linear-gradient(135deg, #fffaf0, #eee4d3); }
.envelope-folds .envelope-left { clip-path: polygon(0 0, 42% 100%, 0 100%); }
.envelope-folds .envelope-right { clip-path: polygon(100% 0, 100% 100%, 58% 100%); }
.envelope-folds .envelope-front { height: 185px; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: url("../images/aria/paper-grain.svg"), linear-gradient(180deg, #fffaf0, #f4eadb); }
.envelope-folds > img { position: absolute; width: 165px; height: auto; bottom: 20px; left: calc(50% - 70px); opacity: .5; transform: rotate(-9deg); }
.envelope-folds .memory-note { position: absolute; color: #85a1b9; font-size: 1.55rem; line-height: 1.05; margin: 0; transform: rotate(-9deg); }
.envelope-slow { bottom: 32px; left: 31%; }
.envelope-address { bottom: 95px; right: 25px; }
.download-photo { position: absolute; left: 15px; bottom: 27px; z-index: 3; width: 230px; padding: 10px 10px 0; margin: 0; background: url("../images/aria/paper-grain.svg"), #fffdf6; border: 1px solid #f1e7d5; box-shadow: 4px 9px 15px rgb(68 58 39 / 18%); transform: rotate(-8deg); }
.download-photo::before { content: ""; position: absolute; width: 83px; height: 25px; left: 26px; top: -9px; z-index: 1; background: url("../images/aria/paper-grain.svg"), rgb(231 214 182 / 75%); transform: rotate(-9deg); clip-path: polygon(2% 5%, 97% 0, 100% 95%, 0 100%); }
.download-photo img { display: block; width: 100%; height: auto; aspect-ratio: .75; object-fit: cover; object-position: center 16%; }
.download-photo figcaption { padding: 12px 0 15px; text-align: center; color: #315c82; font-size: 1.04rem; line-height: 1.2; }
.download-petal { top: 8px; left: 1px; transform: rotate(-20deg); }
.vlog-section { position: relative; margin-top: 65px; scroll-margin-top: 175px; }
.vlog-prelude { display: flex; align-items: center; justify-content: center; gap: 20px; color: #648aaa; text-align: center; font-size: .66rem; margin-bottom: 30px; }
.vlog-prelude::before, .vlog-prelude::after { content: ""; width: 120px; height: 1px; background: #bbd3e2; }
.vlog-notebook { position: relative; padding: 40px 35px 27px 80px; border: 1px solid #eadfcd; border-radius: 3px 10px 3px 3px; background: url("../images/aria/paper-grain.svg"), linear-gradient(125deg, #fffdf7, #faf5eb); box-shadow: 3px 8px 18px rgb(80 73 53 / 12%), 3px 3px 0 #f4eee1; }
.vlog-notebook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px; width: 1px; background: #e5d7be; pointer-events: none; }
.vlog-notebook::after { content: ""; position: absolute; width: 230px; height: 69px; right: 0; top: -40px; background: url("../images/aria/aqua-skyline.svg") bottom / contain no-repeat; opacity: .28; pointer-events: none; z-index: -1; }
.vlog-binding { position: absolute; inset: 0 auto 0 0; width: 30px; display: flex; flex-direction: column; justify-content: space-around; background: repeating-linear-gradient(90deg, #eadfcd 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, #e3d7c2 0 1px, #efe5d3 1px 3px); border-right: 1px solid #d8cab0; }
.vlog-binding > span { position: relative; left: -7px; width: 46px; height: 16px; border: 4px solid #c9b99b; border-radius: 50%; transform: rotate(-9deg); box-shadow: 0 2px 2px #80715e30, inset 0 1px 1px #fffaf4; }
.vlog-binding > span::after { content: ""; position: absolute; width: 11px; height: 11px; right: -4px; top: -3px; border-radius: 50%; background: #9e8b6e; box-shadow: 0 0 0 3px #f8efdf; z-index: -1; }
.vlog-heading { padding-right: 285px; margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid #a9c6d9; }
.vlog-heading h2 { margin: 0 0 9px; font-size: clamp(3rem, 5vw, 4.5rem); color: #254d77; line-height: 1.1; }
.vlog-heading h2 > span { font-size: .6em; color: #628ba8; }
.vlog-heading > p { margin: 0; color: #416788; font-size: .98rem; }
.vlog-intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.vlog-message { color: #294c6c; font-size: 1.04rem; line-height: 1.95; }
.vlog-message > p { margin: 0 0 20px; }
.vlog-message .vlog-greeting { color: #214768; font-size: 1.25rem; font-weight: 700; line-height: 1.65; }
.vlog-message em { font-style: normal; color: #305b81; background: #dceef8; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 3px; }
.vlog-keepsake { position: relative; min-width: 0; margin-top: -65px; padding: 0 10px 12px; }
.vlog-portrait { position: relative; margin: 0; padding: 10px 10px 0; background: url("../images/aria/paper-grain.svg"), #fffdf7; border: 1px solid #eee3d2; box-shadow: 4px 7px 14px #655e4d28; transform: rotate(6deg); }
.vlog-portrait::before { content: ""; position: absolute; width: 90px; height: 28px; top: -13px; left: calc(50% - 45px); background: url("../images/aria/paper-grain.svg"), #e6d6bccc; transform: rotate(-12deg); clip-path: polygon(0 4%, 97% 0, 100% 98%, 2% 100%); }
.vlog-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.vlog-portrait figcaption { padding: 14px 0 17px; font-size: 1.2rem; text-align: center; color: #416788; }
.vlog-postmark { display: block; width: 150px; height: auto; margin: 33px auto 0; opacity: .6; transform: rotate(-8deg); }
.vlog-keepsake > .memory-note { font-size: 1.4rem; text-align: center; color: #648aaa; transform: rotate(-5deg); margin: 12px 0 0; }
.vlog-album { min-width: 0; margin-top: 10px; padding-top: 16px; border-top: 1px solid #a9c6d9; }
.vlog-album-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.vlog-album-heading h3 { color: #315c82; font-size: 2rem; margin: 0; }
.vlog-album .gallery-button { color: #315c82; border-color: #86a7c0; background: #fffdf6; }
.vlog-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; list-style: none; margin: 12px 0 0; padding: 10px 5px 19px; scrollbar-width: thin; scrollbar-color: #9eb8c8 #f3eddf; }
.vlog-photo-item { flex: 0 0 300px; min-width: 0; scroll-snap-align: start; }
.vlog-photo-card { display: block; margin: 3px; padding: 10px 10px 0; background: url("../images/aria/paper-grain.svg"), #fffef9; border: 1px solid #eee5d7; text-decoration: none; box-shadow: 2px 4px 9px #655e4d21; transform: rotate(-.7deg); transition: transform .25s, box-shadow .25s; }
.vlog-photo-item:nth-child(even) .vlog-photo-card { transform: rotate(.8deg); }
.vlog-photo-image { position: relative; display: block; }
.vlog-photo-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.vlog-photo-image img[src$="_4.jpg"] { object-position: 70% center; }
.vlog-photo-expand { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #fffdf7ed; color: #315c82; box-shadow: 0 1px 4px #294c6c30; }
.vlog-photo-expand .icon { width: 18px; height: 18px; }
.vlog-photo-caption { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 16px 2px 19px; color: #315c82; font-size: 1.28rem; }
.vlog-photo-caption > :first-child { font-size: 1.6rem; }
.vlog-photo-caption > :last-child { text-align: right; }
.vlog-album-footer { display: flex; justify-content: flex-end; align-items: center; gap: 15px; color: #597997; }
.vlog-album-footer > p { font-size: .73rem; margin: 9px 0; }
.vlog-album-footer > .memory-note { font-size: 1.5rem; }
.vlog-signoff { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-top: 12px; }
.vlog-signoff .memory-note { color: #648aaa; margin: 0; font-size: 1.65rem; }
.vlog-signoff > :last-child { color: #315c82; font-size: 2rem; text-align: right; }
.vlog-petal-one { top: 14px; right: -8px; transform: rotate(20deg); }
.vlog-petal-two { bottom: 12px; left: 35px; transform: rotate(-30deg); }
@media (hover: hover) { .vlog-photo-card:hover { transform: translateY(-4px) rotate(-1.2deg); box-shadow: 2px 8px 14px #655e4d35; } }
.detail-footer { padding-top: 25px; }
.mod-footer.detail-footer { font-size: var(--note-size); }
.footer-credit { width: 100%; padding-top: 15px; border-top: 1px solid #e3edf3; font-size: inherit; color: #617b91; }
[data-reveal] { transition: opacity .6s ease, transform .6s ease; }
.reveal-pending { opacity: 0; transform: translateY(24px); }

@media (max-width: 1000px) {
    .vlog-notebook { padding: 32px 27px 25px 65px; }
    .vlog-intro { grid-template-columns: minmax(0, 1fr) 220px; gap: 25px; }
    .vlog-heading { padding-right: 225px; }
    .vlog-heading h2 { font-size: 3.1rem; }
    .vlog-message { font-size: .95rem; }
    .vlog-message .vlog-greeting { font-size: 1.08rem; }
    .vlog-keepsake { margin-top: -40px; }
    .vlog-photo-item { flex-basis: 265px; }
    .note-letter { padding: 34px 40px; }
    .letter-masthead { padding-top: 112px; }
    .letter-postage { width: 115px; top: -7px; }
    .letter-postage .postcard-postmark { width: 165px; right: 38px; }
    .release-postcard { padding: 26px 25px 26px 54px; }
    .postcard-header { grid-template-columns: minmax(0, 1fr) 95px; gap: 12px; }
    .postcard-body { grid-template-columns: 1fr; }
    .postcard-address { display: none; }
    .release-photo figcaption { min-height: 93px; padding-inline: 2px; }
    .release-photo time { font-size: 2rem; }
    .release-photo .memory-note { display: none; }
    .release-duration { column-gap: 8px; }
    .release-duration dt { font-size: .73rem; }
    .mod-nav-links { gap: 17px; }
    .project-card { gap: 24px; }
    .project-actions { flex-wrap: wrap; }
    .action-note { border: 0; padding: 0; }
    .detail-postcards { padding-left: 15px; padding-right: 80px; }
    .main-postcard { width: 285px; }
    .small-postcard { width: 225px; }
    .detail-postcards > .memory-note { right: -5px; }
    .story-stack { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 38px; }
    .iso-card { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }
    .iso-reminder { grid-column: 2; border-left: 0; padding: 0; font-size: .78rem; }
    .iso-disc { width: 55px; height: 55px; }
    .download-letter { padding: 38px 30px 200px; min-height: 635px; }
    .download-postage { width: 95px; right: 23px; }
    .download-postage .postcard-postmark { width: 145px; right: 30px; }
    .download-panel h2 { max-width: calc(100% - 125px); }
    .download-action { width: 290px; margin-left: 160px; }
    .download-flight { width: 215px; right: 10px; top: 329px; }
    .download-flight .memory-note { font-size: 1.35rem; }
    .download-photo { width: 185px; }
}

@media (max-width: 760px) {
    :root { --note-size: .82rem; }
    .vlog-section { margin-top: 45px; scroll-margin-top: 190px; }
    .vlog-prelude { font-size: .52rem; letter-spacing: .14em; gap: 10px; margin-bottom: 24px; }
    .vlog-prelude::before, .vlog-prelude::after { width: 24px; flex-shrink: 0; }
    .vlog-notebook { padding: 29px 17px 24px 36px; }
    .vlog-notebook::before { left: 25px; }
    .vlog-notebook::after { width: 140px; height: 42px; top: -27px; }
    .vlog-binding { width: 14px; }
    .vlog-binding > span { width: 24px; height: 12px; border-width: 3px; left: -5px; }
    .vlog-binding > span::after { width: 7px; height: 7px; right: -3px; box-shadow: 0 0 0 2px #f8efdf; }
    .vlog-heading { padding-right: 0; margin-bottom: 20px; }
    .vlog-heading h2 { font-size: clamp(2.2rem, 8.3vw, 3.4rem); }
    .vlog-heading > p { font-size: .74rem; }
    .vlog-intro { grid-template-columns: minmax(0, 1fr); gap: 15px; }
    .vlog-message { font-size: .89rem; line-height: 1.95; }
    .vlog-message .vlog-greeting { font-size: 1rem; }
    .vlog-message > p { margin-bottom: 21px; }
    .vlog-keepsake { display: grid; grid-template-columns: minmax(0, 1fr) 85px; width: min(85%, 250px); margin: 8px auto 22px; padding: 0; }
    .vlog-portrait { grid-column: 1 / -1; transform: rotate(4deg); }
    .vlog-portrait figcaption { font-size: 1.17rem; }
    .vlog-postmark { position: static; grid-column: 2; grid-row: 2; align-self: center; width: 85px; margin: 20px 0 0; }
    .vlog-keepsake > .memory-note { grid-column: 1; grid-row: 2; font-size: 1.15rem; margin-top: 23px; text-align: left; }
    .vlog-album { margin-top: 8px; padding-top: 18px; }
    .vlog-album-heading { gap: 9px; flex-wrap: wrap; }
    .vlog-album-heading h3 { font-size: 1.55rem; flex: 1 1 190px; }
    .vlog-album .gallery-button { width: 34px; height: 34px; font-size: 1.1rem; }
    .vlog-track { gap: 12px; padding-inline: 3px; }
    .vlog-photo-item { flex-basis: 88%; }
    .vlog-photo-card { padding: 8px 8px 0; }
    .vlog-photo-caption { font-size: 1.07rem; padding: 12px 0 15px; }
    .vlog-photo-caption > :first-child { font-size: 1.35rem; }
    .vlog-album-footer { flex-wrap: wrap; gap: 0; }
    .vlog-album-footer > p { font-size: .65rem; }
    .vlog-album-footer > .memory-note { font-size: 1.2rem; margin-left: auto; }
    .vlog-signoff { align-items: center; margin-top: 20px; }
    .vlog-signoff .memory-note { font-size: 1.2rem; }
    .vlog-signoff > :last-child { font-size: 1.5rem; max-width: 130px; }
    .vlog-petal-two { left: 18px; width: 27px; height: 20px; }
    .mod-nav { width: calc(100% - 32px); top: 12px; flex-direction: column; gap: 8px; padding: 12px 15px; border-radius: 26px; }
    .brand { font-size: 1.15rem; }
    .mod-nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .mod-nav-links a { font-size: .71rem; }
    .mod-nav-links .nav-active { padding: 6px 12px; }
    .mod-main, .mod-footer { width: calc(100% - 40px); }
    .mod-main { padding-top: 155px; }
    .collection-hero { grid-template-columns: 1fr; gap: 32px; margin-bottom: 35px; }
    .collection-title { font-size: clamp(3.9rem, 15vw, 6rem); }
    .collection-subtitle { font-size: clamp(1.55rem, 5.5vw, 2rem); }
    .collection-intro { font-size: .94rem; }
    .collection-art { padding: 0 16px 18px; margin: 0 auto; width: min(100%, 420px); }
    .collection-art .memory-note { bottom: -2px; right: 5px; font-size: 1.25rem; }
    .collection-label { gap: 12px; }
    .collection-label h2 { font-size: 1.15rem; }
    .collection-label .eyebrow { font-size: .63rem; }
    .project-card { grid-template-columns: 1fr; gap: 0; border-radius: 25px; padding: 9px; }
    .project-art { min-height: 0; aspect-ratio: 1.14; border-radius: 17px; }
    .project-info { padding: 23px 16px 18px; }
    .project-info h3 { font-size: clamp(1.7rem, 5.9vw, 2.3rem); margin-top: 17px; }
    .game-japanese, .game-romanized, .game-thai { font-size: .96rem; }
    .project-description { font-size: .93rem; }
    .project-actions { gap: 14px; margin-top: 22px; }
    .action-note { display: none; }
    .project-actions .button { width: 100%; }
    .collection-future { align-items: start; font-size: .8rem; gap: 10px; margin-top: 28px; }
    .collection-future .icon { width: 21px; }
    .mod-footer { gap: 14px; font-size: .72rem; padding: 28px 0; }
    .footer-left { gap: 12px; }
    .footer-home { padding-left: 12px; }
    .breadcrumb { margin: -8px 0 24px; }
    .detail-hero { grid-template-columns: 1fr; gap: 27px; }
    .aria-title span { font-size: clamp(5.7rem, 23vw, 8rem); }
    .aria-title small { font-size: clamp(2.2rem, 8vw, 3rem); }
    .detail-hero .game-japanese { font-size: 1.1rem; }
    .detail-hero .game-thai { font-size: .99rem; }
    .hero-tagline { font-size: .97rem; }
    .tag { font-size: .68rem; padding: 5px 12px; }
    .tags { gap: 8px; }
    .hero-actions { gap: 10px; }
    .hero-actions .button { padding: 11px 19px; font-size: .84rem; }
    .detail-postcards { width: min(100%, 440px); margin-inline: auto; min-height: 430px; padding: 5px 55px 50px 9px; }
    .main-postcard { width: 265px; }
    .small-postcard { width: 215px; bottom: 24px; right: 5px; }
    .aqua-stamp { width: 78px; height: 78px; right: 0; font-size: .43rem; }
    .aqua-stamp b { font-size: .67rem; }
    .aqua-stamp .icon { width: 27px; }
    .detail-postcards > .memory-note { width: 75px; top: 105px; right: 0; font-size: 1.1rem; }
    .chapter-nav { width: 100%; top: 128px; padding: 3px; gap: 0; margin-bottom: 28px; }
    .chapter-nav a { flex: 1; text-align: center; padding: 11px 2px; white-space: nowrap; font-size: .62rem; }
    .detail-section, .download-panel { scroll-margin-top: 190px; }
    .section-heading { align-items: start; margin-bottom: 18px; }
    .section-heading h2 { font-size: 1.5rem; }
    .section-heading h2::before { left: -9px; width: 2px; }
    .section-heading > .memory-note { display: none; }
    .section-subtitle { font-size: .88rem; }
    .detail-section { margin-bottom: 35px; }
    #story > .section-heading { margin-bottom: 26px; }
    .story-photo { padding: 10px 10px 0; margin-inline: 6px; }
    .story-photo figcaption { min-height: 43px; font-size: 1.25rem; }
    .story-copy { padding: 50px 21px 24px; }
    .story-copy h3 { font-size: 1.1rem; }
    .story-copy p { font-size: .88rem; }
    .mod-features { grid-template-columns: 1fr 1fr; gap: 12px; }
    .feature { padding: 21px 10px 19px; border-radius: 17px; }
    .feature h3 { font-size: .83rem; }
    .feature p { font-size: .74rem; }
    .feature h3.stat { font-size: 1.7rem; }
    .release-section .section-heading > div { max-width: 100%; }
    .release-album { grid-template-columns: 1fr; gap: 28px; padding: 20px 5px 25px; }
    .release-photo { width: min(90%, 340px); margin: 0 auto; padding: 12px 12px 0; transform: rotate(-4deg); }
    .release-photo figcaption { padding-inline: 5px; }
    .release-photo time { font-size: 2.3rem; }
    .release-photo .memory-note { display: block; right: 5px; bottom: 12px; font-size: .95rem; }
    .release-photo figcaption { min-height: 115px; }
    .release-postcard { padding: 24px 20px; transform: rotate(1deg); }
    .postcard-header { grid-template-columns: minmax(0, 1fr) 70px; gap: 10px; padding-bottom: 19px; }
    .postcard-date { font-size: clamp(2.1rem, 9vw, 3.2rem); }
    .release-label { font-size: .73rem; }
    .postcard-time { font-size: .7rem; }
    .postcard-time > span { font-size: 1.4rem; margin-right: 6px; }
    .postcard-stamp { padding: 5px 5px 3px; outline-width: 2px; }
    .postcard-stamp img { object-position: 73% 11%; }
    .postcard-stamp > span { font-size: .45rem; }
    .postcard-stamp b { font-size: .7rem; }
    .postcard-postmark { width: 90px; right: -5px; top: -18px; }
    .postcard-body { padding-top: 20px; }
    .release-intro { font-size: .77rem; }
    .release-duration { column-gap: 5px; row-gap: 10px; margin: 16px 0 20px; }
    .release-duration > div { gap: 4px; }
    .release-duration dd { font-size: clamp(2.5rem, 12vw, 3.5rem); }
    .release-duration dt { font-size: .66rem; }
    .release-total strong { font-size: 2.1rem; }
    .release-reflection { font-size: .88rem; margin-top: 5px; }
    .petal-one { top: 9px; left: 0; }
    .petal-two { right: -5px; bottom: 32px; width: 28px; height: 22px; }
    .screenshot-album { padding: 10px; border-radius: 20px; }
    .screenshot-item { flex-basis: min(300px, 85%); }
    .screenshot-track { gap: 12px; }
    .screenshot-caption { font-size: var(--note-size); }
    .album-footer p { font-size: var(--note-size); }
    .gallery-button { width: 38px; height: 38px; }
    .screenshot-lightbox { padding: 12px; border-radius: 16px; }
    .lightbox-stage img { height: min(60dvh, 520px); }
    .lightbox-footer { gap: 8px; }
    .lightbox-footer p { font-size: var(--note-size); }
    .patch-file-guide { padding: 19px; }
    .patch-field { grid-template-columns: 1fr; gap: 5px; }
    .iso-card { grid-template-columns: 1fr; padding: 22px; gap: 13px; }
    .iso-disc { display: none; }
    .iso-reminder { grid-column: 1; border-top: 1px solid #ccdfec; padding-top: 12px; }
    .hash-row { align-items: start; flex-direction: column; gap: 10px; margin-top: 10px; }
    .hash-row code { font-size: var(--note-size); }
    .installation-steps { grid-template-columns: 1fr; gap: 12px; }
    .install-step { grid-template-columns: 27px 24px minmax(0, 1fr); gap: 13px; padding: 19px; }
    .install-step h3 { font-size: .94rem; }
    .guide-details summary { font-size: .83rem; padding: 15px 17px; }
    .credits-block { margin-top: 36px; scroll-margin-top: 190px; }
    .credits-header { align-items: start; margin-bottom: 30px; }
    .credits-header > .memory-note { font-size: 1.1rem; max-width: 115px; }
    .note-letter { margin-inline: 4px; padding: 25px 22px 30px; transform: rotate(-.2deg); }
    .note-letter::before { width: 95px; height: 35px; top: -16px; left: calc(50% - 47px); }
    .letter-petal { width: 30px; height: 22px; }
    .letter-masthead { padding-top: 88px; padding-bottom: 22px; }
    .letter-name { font-size: 2.6rem; margin-right: 3px; }
    .letter-author { font-size: .87rem; }
    .letter-masthead h4 { font-size: .91rem; margin-top: 13px; }
    .letter-postage { width: 80px; top: -3px; right: 2px; }
    .letter-postage .postcard-postmark { width: 120px; right: 28px; top: -6px; }
    .letter-message { font-size: .91rem; line-height: 1.95; margin-top: 24px; }
    .letter-message > p + p { margin-top: 23px; }
    .letter-divider { margin-block: 25px; gap: 12px; }
    .letter-signoff { margin-top: 25px; }
    .letter-regards { font-size: 2.2rem; }
    .letter-signature { font-size: .88rem; }
    .letter-avatar { font-size: var(--note-size); }
    .credits-attribution { font-size: .65rem; margin-top: 20px; }
    .guide-content { padding: 18px; font-size: var(--note-size); }
    .guide-content dl { grid-template-columns: 1fr; gap: 4px; }
    .guide-content dd { margin-bottom: 10px; }
    .command pre { padding: 14px; font-size: .73rem; }
    .download-panel { padding: 25px 8px 0; }
    .download-letter { min-height: 0; padding: 104px 21px 265px; transform: rotate(-.3deg); }
    .download-postage { width: 70px; top: 22px; right: 17px; }
    .download-postage .postcard-postmark { width: 105px; right: 23px; top: -5px; }
    .download-copy > .eyebrow { max-width: 100%; }
    .download-panel h2 { max-width: 100%; font-size: 1.4rem; margin-top: 20px; }
    .download-panel h3 { font-size: 1.08rem; }
    .download-action { width: 100%; margin: 18px 0 0; }
    .download-meta { font-size: .78rem; margin-bottom: 18px; }
    .download-button { min-width: 0; padding: 14px 10px; font-size: .91rem; }
    .download-requirement { font-size: var(--note-size); }
    .download-flight { width: 165px; top: auto; right: 0; bottom: 84px; }
    .download-flight .memory-note { font-size: 1.08rem; margin-top: -3px; }
    .download-photo { width: 140px; left: 12px; bottom: 27px; padding: 7px 7px 0; transform: rotate(-7deg); }
    .download-photo::before { width: 60px; height: 21px; left: 15px; }
    .download-photo figcaption { font-size: .87rem; padding: 10px 2px 12px; }
    .envelope-folds > span { height: 225px; }
    .envelope-folds .envelope-front { height: 145px; }
    .envelope-folds > img { width: 100px; left: auto; right: 7px; bottom: 7px; opacity: .35; }
    .envelope-folds .memory-note { font-size: 1.15rem; }
    .envelope-slow { left: auto; right: 16px; bottom: 53px; }
    .envelope-address { display: none; }
    .detail-footer .memory-note { font-size: 1.15rem; }
}

@media (max-width: 380px) {
    .mod-main { padding-top: 175px; }
    .chapter-nav { top: 150px; }
    .detail-section, .download-panel, .vlog-section { scroll-margin-top: 210px; }
}

@media (max-width: 360px) {
    .mod-nav-links { gap: 10px; }
    .mod-nav-links a { font-size: .65rem; }
    .main-postcard { width: 225px; }
    .detail-postcards { min-height: 405px; }
    .small-postcard { width: 185px; }
    .hero-actions .button { padding-inline: 15px; }
    .vlog-heading h2 { font-size: 2rem; }
    .download-letter { padding-inline: 15px; }
    .download-photo { width: 125px; left: 8px; }
    .download-flight { width: 132px; right: -2px; }
    .download-flight .memory-note { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .reveal-pending { opacity: 1; transform: none; }
    a.project-card:hover, .button:not(:disabled):hover, a.project-card:hover .button { transform: none; }
    .screenshot-card:hover { transform: none; }
    .vlog-photo-card:hover { transform: rotate(-.7deg); }
    .vlog-photo-item:nth-child(even) .vlog-photo-card:hover { transform: rotate(.8deg); }
}