/*
 * Template "Y2K Chrome" (Pernikahan): early-2000s desktop nostalgia.
 * Colors from the variant (x-inv.head): --inv-primary (title bars, buttons), --inv-accent,
 * --inv-background (desktop wallpaper), --inv-text, --inv-window (window body),
 * --inv-ink (text on primary), --inv-glow (holographic highlights, LCD digits).
 */

:root {
    --inv-primary: #ff3d9a;
    --inv-accent: #8a5cff;
    --inv-background: #ffd3ec;
    --inv-text: #2b1238;
    --inv-window: #fff8fc;
    --inv-ink: #ffffff;
    --inv-glow: #7df3ff;
    --inv-radius: 10px;

    --yk-col: min(100%, 460px);
    --yk-edge: color-mix(in srgb, var(--inv-text) 88%, var(--inv-primary));
    --yk-shadow: color-mix(in srgb, var(--inv-accent) 65%, var(--inv-text));
    --yk-strong: color-mix(in srgb, var(--inv-primary) 68%, var(--inv-text));
    --yk-soft: color-mix(in srgb, var(--inv-text) 68%, transparent);
    --yk-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --yk-lcd: #0d0c16;

    --yk-pixel: 'Pixelify Sans', 'VT323', ui-monospace, monospace;
    --yk-term: 'VT323', ui-monospace, monospace;
    --yk-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --yk-bubble: 'Rubik Bubbles', 'Rubik', system-ui, sans-serif;

    --yk-chrome: linear-gradient(180deg, #ffffff 0%, #eef2f9 22%, #aab5c8 46%, #39414f 50%, #7f8ca3 60%, #dfe6f1 80%, #ffffff 100%);
    --yk-holo: linear-gradient(120deg, var(--inv-glow), var(--inv-accent) 38%, var(--inv-primary) 68%, var(--inv-glow));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 3rem; }

body.yk-body {
    min-height: 100vh;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--yk-sans);
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------- the desktop wallpaper (page and cover) ---------- */
body.yk-body::before, .yk-cover {
    background-color: var(--inv-background);
    background-image:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--inv-glow) 55%, transparent), transparent 38%),
        radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--inv-accent) 42%, transparent), transparent 42%),
        radial-gradient(circle at 22% 78%, color-mix(in srgb, var(--inv-primary) 36%, transparent), transparent 44%),
        radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--inv-glow) 40%, transparent), transparent 40%),
        linear-gradient(color-mix(in srgb, var(--inv-text) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 7%, transparent) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 26px 26px, 26px 26px;
}
body.yk-body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.yk-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* four-point sparkles */
.yk-spark {
    position: absolute; left: var(--x, 50%); top: var(--y, 50%);
    width: calc(22px * var(--s, 1)); height: calc(22px * var(--s, 1));
    background: linear-gradient(135deg, #fff 20%, var(--inv-glow) 55%, #fff 90%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: yk-twinkle 3.2s ease-in-out var(--d, 0s) infinite;
    pointer-events: none;
}
@keyframes yk-twinkle {
    0%, 100% { transform: scale(.55) rotate(0deg); opacity: .45; }
    50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

.yk-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px; white-space: nowrap;
    background: var(--inv-glow); color: #111; font: 600 .72rem/1.3 var(--yk-sans);
}

/* ---------- shared pieces ---------- */
.yk-kicker { font: 600 .82rem/1.3 var(--yk-pixel); letter-spacing: .04em; color: var(--yk-strong); }
.yk-kicker--center {
    justify-self: center; align-self: center; padding: .25rem .85rem; border-radius: 999px;
    background: var(--inv-window); border: 2px solid var(--yk-edge); box-shadow: 3px 3px 0 var(--yk-shadow);
}
.yk-h { margin: .2rem 0 .35rem; font: italic 900 1.65rem/1.1 var(--yk-sans); letter-spacing: -.01em; }
.yk-lead { margin-bottom: 1rem; color: var(--yk-soft); font-size: .93rem; }

.yk-chrome {
    background: var(--yk-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgb(0 0 0 / .55)) drop-shadow(0 0 14px color-mix(in srgb, var(--inv-glow) 55%, transparent));
}

.yk-caret {
    display: inline-block; width: .55em; height: 1.05em; margin-left: 3px; vertical-align: -.15em;
    background: currentColor; animation: yk-blink 1s steps(1) infinite;
}
@keyframes yk-blink { 50% { opacity: 0; } }

.yk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.8; text-align: center; color: var(--yk-strong); margin-bottom: .6rem; }

/* ---------- retro windows ---------- */
.yk-win {
    position: relative; overflow: hidden;
    background: var(--inv-window); color: var(--inv-text);
    border: 2px solid var(--yk-edge); border-radius: 12px;
    box-shadow: 6px 6px 0 var(--yk-shadow), 0 20px 40px -22px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
.yk-win__bar {
    position: relative; display: flex; align-items: center; gap: .5rem;
    min-height: 2.15rem; padding: .3rem .35rem .3rem .45rem;
    background: linear-gradient(90deg, var(--inv-primary), var(--inv-accent));
    color: var(--inv-ink); border-bottom: 2px solid var(--yk-edge);
    font: 600 .95rem/1 var(--yk-pixel);
}
/* the glossy top half of the bar */
.yk-win__bar::after {
    content: ''; position: absolute; inset: 0 0 50% 0; pointer-events: none;
    background: linear-gradient(rgb(255 255 255 / .5), rgb(255 255 255 / .12));
}
.yk-win__icon {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center;
    width: 1.4rem; height: 1.4rem; border-radius: 6px; border: 1.5px solid var(--yk-edge);
    background: linear-gradient(#fff, #e7ecf5); color: #1d1630; font: 700 .8rem/1 var(--yk-sans);
}
.yk-win__title {
    position: relative; z-index: 1; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em;
}
.yk-win__ctls { position: relative; z-index: 1; flex: none; display: flex; gap: 3px; }
.yk-ctl {
    position: relative; display: block; width: 1.3rem; height: 1.15rem; border-radius: 4px;
    border: 1.5px solid var(--yk-edge); background: linear-gradient(#ffffff, #d9dfeb); color: #1d1630;
}
.yk-ctl--min::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; background: currentColor; }
.yk-ctl--max::before { content: ''; position: absolute; inset: 3px 4px; border: 1.5px solid currentColor; border-top-width: 3px; }
.yk-ctl--close { background: linear-gradient(#ffa3b1, #ff4769); color: #fff; }
.yk-ctl--close::before, .yk-ctl--close::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 1px;
    background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
.yk-ctl--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.yk-win__body { padding: 1.1rem 1.05rem 1.2rem; }
.yk-win__status {
    display: flex; justify-content: space-between; gap: 1rem; padding: .2rem .7rem;
    border-top: 1.5px solid var(--yk-line); background: color-mix(in srgb, var(--inv-text) 5%, var(--inv-window));
    font: 1.05rem/1.25 var(--yk-term); color: var(--yk-soft);
}
.yk-menu {
    display: flex; gap: .95rem; padding: .25rem .75rem; border-bottom: 1.5px solid var(--yk-line);
    font: 1.1rem/1.2 var(--yk-term); color: var(--yk-soft);
}
.yk-menu span::first-letter { text-decoration: underline; }
.yk-menu--tools span::first-letter { text-decoration: none; }
.yk-menu__fill { flex: 1; }

/* ---------- glossy bubble buttons (shared components too) ---------- */
.yk-body .inv-button {
    position: relative; isolation: isolate;
    padding: .7rem 1.35rem; border: 2px solid var(--yk-edge); border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 52%, #fff), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 78%, #000));
    color: var(--inv-ink); font: 600 .98rem/1.15 var(--yk-pixel); letter-spacing: .02em; text-align: center;
    box-shadow: 0 3px 0 var(--yk-edge), 0 10px 18px -10px var(--inv-primary);
}
.yk-body .inv-button::before {
    content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; top: 3px; height: 42%;
    border-radius: 999px; background: linear-gradient(rgb(255 255 255 / .8), rgb(255 255 255 / .08)); pointer-events: none;
}
.yk-body .inv-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yk-edge); }
.yk-body .inv-button--outline {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-window) 78%, var(--inv-glow)), var(--inv-window) 70%);
    color: var(--inv-text);
}

/* ---------- cover: the desktop ---------- */
.yk-cover {
    position: fixed; inset: 0; z-index: 30;
    display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
}
.yk-cover--leave { transition: transform .45s cubic-bezier(.6, 0, .4, 1), opacity .45s ease; }
.yk-cover--gone { transform: scale(.88); opacity: 0; }

.yk-desk {
    display: flex; gap: .6rem; width: min(100%, 440px); margin: 0 auto;
    padding: calc(.8rem + env(safe-area-inset-top)) .9rem 0;
}
.yk-desk__icon {
    display: grid; justify-items: center; gap: .3rem; width: 4.4rem;
    font: 1.05rem/1 var(--yk-term); color: var(--inv-text); text-align: center;
}
.yk-ico { position: relative; display: block; width: 2.3rem; height: 1.9rem; }
.yk-ico--folder {
    margin-top: .3rem; border: 2px solid var(--yk-edge); border-radius: 2px 6px 6px 6px;
    background: linear-gradient(#ffe68a, #ffbe2e);
}
.yk-ico--folder::before {
    content: ''; position: absolute; left: -2px; top: -8px; width: 45%; height: 8px;
    border: 2px solid var(--yk-edge); border-bottom: 0; border-radius: 4px 4px 0 0; background: #ffd75a;
}
.yk-ico--note {
    width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--yk-edge);
    background: radial-gradient(circle, var(--inv-window) 0 18%, var(--yk-edge) 19% 23%, transparent 24%), conic-gradient(from 30deg, var(--inv-glow), #fff, var(--inv-accent), var(--inv-primary), #fff, var(--inv-glow));
}
.yk-ico--heart {
    border: 2px solid var(--yk-edge); border-radius: 4px;
    background: linear-gradient(90deg, var(--inv-primary), var(--inv-accent)) top / 100% 32% no-repeat, var(--inv-window);
}
.yk-ico--heart::after { content: '♥'; position: absolute; inset: 32% 0 0; display: grid; place-items: center; color: var(--inv-primary); font: 700 .8rem/1 var(--yk-sans); }

.yk-cover__stage {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    width: min(100%, 440px); margin: 0 auto; padding: .9rem .9rem 1.3rem;
}
.yk-win--cover { width: 100%; }
.yk-cover__body { display: grid; gap: .6rem; padding: .65rem; }

.yk-load { display: grid; gap: .2rem; }
.yk-load__label { display: flex; justify-content: space-between; font: 1.1rem/1 var(--yk-term); color: var(--yk-soft); }
.yk-load__label b { font-weight: 400; color: var(--yk-strong); }
.yk-load__bar {
    display: block; height: .95rem; padding: 2px; border: 2px solid var(--yk-edge); border-radius: 5px;
    background: color-mix(in srgb, var(--inv-text) 6%, var(--inv-window));
}
.yk-load__fill {
    display: block; height: 100%; width: 100%; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 9px, transparent 9px 12px);
    animation: yk-fill 1.8s steps(16) .3s both;
}
@keyframes yk-fill { from { width: 0; } to { width: 100%; } }

.yk-cover__photo {
    position: relative; overflow: hidden; height: clamp(120px, 24vh, 260px);
    border: 2px solid var(--yk-edge); border-radius: 8px;
    background: var(--yk-photo, var(--yk-holo)) center 30% / cover no-repeat;
}
/* a holographic sheen sweeping over the photo */
.yk-cover__photo::after, .yk-event__photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .38) 48%, color-mix(in srgb, var(--inv-glow) 30%, transparent) 52%, transparent 65%) -150% 0 / 250% 100% no-repeat;
    animation: yk-sheen 5s ease-in-out 1.5s infinite;
}
@keyframes yk-sheen { 0% { background-position: 150% 0; } 45%, 100% { background-position: -150% 0; } }
.yk-spark--on-photo { z-index: 1; }

.yk-sticker {
    position: absolute; z-index: 2; left: .55rem; top: .55rem;
    display: flex; align-items: center; justify-content: center; gap: 2px;
    width: 3.7rem; height: 3.7rem; border-radius: 50%; border: 2px solid var(--yk-edge);
    background: var(--yk-holo); color: #fff; transform: rotate(-12deg);
    font: 400 1.3rem/1 var(--yk-bubble); text-shadow: 0 2px 0 rgb(0 0 0 / .35);
    box-shadow: 3px 3px 0 var(--yk-shadow);
}

.yk-cover__names {
    padding: .85rem .8rem 1rem; border: 2px solid var(--yk-edge); border-radius: 8px; text-align: center; color: #fff;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--inv-glow) 35%, transparent), transparent 55%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 55%),
        linear-gradient(160deg, #18142c, #0b0a14);
}
.yk-cover__title { font: 600 .82rem/1.2 var(--yk-pixel); letter-spacing: .16em; text-transform: uppercase; color: var(--inv-glow); }
.yk-cover__couple {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em; margin: .3rem 0 .35rem;
    font: italic 900 clamp(2rem, 10vw, 2.75rem)/1.02 var(--yk-sans); text-transform: uppercase; letter-spacing: -.01em;
    background: none;
}
.yk-cover__couple > span {
    background: var(--yk-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .06em;
}
.yk-cover__amp { font: 400 .62em/1 var(--yk-bubble); }
.yk-cover__date { font: 1.35rem/1.1 var(--yk-term); letter-spacing: .04em; }
.yk-cover__quote { margin-top: .4rem; font-size: .85rem; font-style: italic; opacity: .85; }

.yk-win--dialog { align-self: flex-end; width: 90%; margin-top: -1.1rem; z-index: 2; }
.yk-dialog { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem .9rem .3rem; }
.yk-dialog__info {
    flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    border: 2px solid var(--yk-edge); color: #1d1630; font: 600 1.25rem/1 var(--yk-pixel);
    background: radial-gradient(circle at 35% 30%, #fff 0 20%, var(--inv-glow) 70%);
}
.yk-dialog__text { min-width: 0; }
.yk-dialog__to { font: 1.1rem/1 var(--yk-term); color: var(--yk-soft); }
.yk-dialog__guest { margin: .15rem 0 .2rem; font: 700 1.15rem/1.2 var(--yk-sans); overflow-wrap: anywhere; }
.yk-dialog__msg { font-size: .88rem; color: var(--yk-soft); line-height: 1.4; }
.yk-dialog__actions { position: relative; padding: .55rem .9rem .95rem; }
.yk-body .yk-ok { width: 100%; }
.yk-cursor {
    position: absolute; right: 18%; bottom: 0; z-index: 3; pointer-events: none;
    filter: drop-shadow(1px 2px 0 rgb(0 0 0 / .25));
    animation: yk-cursor 3.6s ease-in-out 1.8s infinite both;
}
@keyframes yk-cursor {
    0% { transform: translate(46px, 34px); opacity: 0; }
    15% { opacity: 1; }
    45% { transform: translate(0, 0); }
    52% { transform: translate(0, 0) scale(.82); }
    60% { transform: translate(0, 0) scale(1); }
    85% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0; }
}

/* ---------- taskbars (cover and page) ---------- */
.yk-cover__taskbar, .yk-taskbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-window) 70%, #fff), color-mix(in srgb, var(--inv-window) 82%, var(--inv-primary)));
    border-top: 2px solid var(--yk-edge);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 -8px 24px -14px rgb(0 0 0 / .4);
}
.yk-cover__taskbar {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: .4rem;
    min-height: 3rem; padding: .35rem .6rem calc(.35rem + env(safe-area-inset-bottom));
}
.yk-taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.yk-taskbar__in {
    display: flex; align-items: center; gap: .35rem; width: var(--yk-col); height: 3.2rem;
    margin: 0 auto; padding: 0 3.8rem 0 .55rem;
}
.yk-start {
    flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2.15rem; padding: 0 .85rem 0 .55rem;
    border: 2px solid var(--yk-edge); border-radius: 999px; text-decoration: none; color: #0f0d1a;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-glow) 40%, #fff), var(--inv-glow) 55%, color-mix(in srgb, var(--inv-glow) 72%, #000));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .8);
    font: 600 .95rem/1 var(--yk-pixel);
}
.yk-start__spark {
    width: 1rem; height: 1rem; background: var(--inv-primary);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.yk-task {
    min-width: 0; display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .6rem;
    border: 1.5px solid color-mix(in srgb, var(--inv-text) 35%, transparent); border-radius: 6px;
    background: color-mix(in srgb, var(--inv-window) 65%, transparent); color: var(--inv-text);
    font: 1.15rem/1 var(--yk-term); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yk-task--active { background: color-mix(in srgb, var(--inv-primary) 20%, var(--inv-window)); box-shadow: inset 1px 1px 0 rgb(0 0 0 / .18); }
.yk-clock {
    flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .55rem;
    border-radius: 6px; font: 1.15rem/1 var(--yk-term); white-space: nowrap; color: var(--inv-text);
    box-shadow: inset 1px 1px 0 rgb(0 0 0 / .2), inset -1px -1px 0 rgb(255 255 255 / .55);
}
/* the music button sits at the end of the taskbar, inside the column */
.yk-body .inv-music { right: max(.5rem, calc(50vw - 230px + .5rem)); bottom: calc(.3rem + env(safe-area-inset-bottom)); z-index: 25; }
.yk-body .inv-music__space { display: none; }
.yk-body .inv-music__button {
    width: 2.6rem; height: 2.6rem; border: 2px solid var(--yk-edge); color: var(--inv-ink); font-weight: 700;
    background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--inv-primary) 40%, #fff), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 75%, #000));
}

/* ---------- page ---------- */
.yk-page { position: relative; z-index: 1; }
.yk-ticker {
    position: sticky; top: 0; z-index: 10; overflow: hidden;
    background: var(--yk-lcd); border-bottom: 2px solid var(--yk-edge);
    color: var(--inv-glow); font: 1.35rem/2.1rem var(--yk-term); white-space: nowrap;
    text-shadow: 0 0 8px color-mix(in srgb, var(--inv-glow) 70%, transparent);
}
.yk-ticker__track { display: flex; width: max-content; animation: yk-marquee 28s linear infinite; }
.yk-ticker__run { display: flex; gap: 2rem; padding-right: 2rem; }
@keyframes yk-marquee { to { transform: translateX(-50%); } }

.yk-main {
    display: flex; flex-direction: column; gap: 1.9rem;
    width: var(--yk-col); margin: 0 auto; padding: 1.6rem 1.05rem 5.5rem .85rem;
}

/* opening: notepad */
.yk-note {
    padding-left: 1.7rem;
    background: linear-gradient(90deg, transparent .85rem, color-mix(in srgb, var(--inv-accent) 45%, transparent) .85rem calc(.85rem + 2px), transparent 0);
}
.yk-note__greeting { font-weight: 700; font-size: 1.05rem; margin-bottom: .55rem; }
.yk-note__message { line-height: 1.75; }
.yk-quote {
    margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 10px;
    background: color-mix(in srgb, var(--inv-primary) 9%, var(--inv-window));
    border: 1.5px dashed color-mix(in srgb, var(--inv-primary) 55%, transparent);
}
.yk-quote blockquote { font-style: italic; font-weight: 500; line-height: 1.6; }
.yk-quote figcaption { margin-top: .45rem; font: 600 .85rem/1.3 var(--yk-pixel); color: var(--yk-strong); }

/* couple: two profile windows */
.yk-couple, .yk-events { display: grid; gap: 1.1rem; }
.yk-profile__body { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: .95rem; align-items: start; }
.yk-profile--bride .yk-profile__body { grid-template-columns: minmax(0, 1fr) 7.6rem; }
.yk-profile--bride .yk-profile__frame { order: 2; }
.yk-profile__frame {
    position: relative; overflow: hidden; border: 2px solid var(--yk-edge); border-radius: 8px;
    background: var(--yk-holo); box-shadow: 3px 3px 0 var(--yk-shadow);
}
.yk-profile__photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.yk-profile__photo--empty { display: grid; place-items: center; color: #fff; font: 400 3rem/1 var(--yk-bubble); }
.yk-profile__status {
    position: absolute; left: .3rem; bottom: .3rem; padding: 0 .35rem; border-radius: 4px;
    background: rgb(0 0 0 / .6); color: #7dff9b; font: 1rem/1.3 var(--yk-term);
}
.yk-profile__name { margin: .15rem 0 .15rem; font: 900 1.3rem/1.15 var(--yk-sans); overflow-wrap: anywhere; }
.yk-profile__nick { font: 1.2rem/1.1 var(--yk-term); color: var(--yk-soft); }
.yk-profile__nick b { font-weight: 400; color: var(--yk-strong); }
.yk-profile__parents { margin-top: .55rem; padding-top: .5rem; border-top: 1.5px dashed var(--yk-line); font-size: .86rem; line-height: 1.45; }
.yk-body .yk-profile__ig { margin-top: .7rem; padding: .4rem .85rem; font-size: .82rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.yk-link { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: -.35rem 0; }
.yk-link__line { width: 3rem; height: 3px; background: repeating-linear-gradient(90deg, var(--yk-edge) 0 6px, transparent 6px 10px); }
.yk-link__heart {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    border: 2px solid var(--yk-edge); background: var(--yk-holo); color: #fff; font-size: 1.05rem;
    text-shadow: 0 1px 0 rgb(0 0 0 / .3); animation: yk-beat 1.6s ease-in-out infinite;
}
@keyframes yk-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }

/* countdown: a progress window */
.yk-countdown .yk-win__body { text-align: center; }
.yk-copy { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: .8rem; }
.yk-copy__file {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 7px;
    border: 2px solid var(--yk-edge); background: var(--yk-holo); color: #fff; font-size: 1.15rem;
    text-shadow: 0 1px 0 rgb(0 0 0 / .3);
}
.yk-copy__dots { display: flex; gap: 5px; }
.yk-copy__dots span { width: 8px; height: 8px; background: var(--inv-primary); animation: yk-hop 1.5s ease-in-out infinite; }
.yk-copy__dots span:nth-child(2) { animation-delay: .15s; }
.yk-copy__dots span:nth-child(3) { animation-delay: .3s; }
.yk-copy__dots span:nth-child(4) { animation-delay: .45s; }
.yk-copy__dots span:nth-child(5) { animation-delay: .6s; }
@keyframes yk-hop { 0%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }
.yk-countdown__date { margin: .3rem 0 .8rem; font: 800 1.2rem/1.25 var(--yk-sans); }
.yk-progress {
    height: 1.15rem; margin-bottom: 1.05rem; padding: 2px; border: 2px solid var(--yk-edge); border-radius: 5px;
    background: color-mix(in srgb, var(--inv-text) 6%, var(--inv-window));
}
.yk-progress__fill {
    display: block; width: 74%; height: 100%; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 10px, var(--inv-accent) 10px 12px, transparent 12px 14px);
    animation: yk-crawl 2.4s steps(6) infinite;
}
@keyframes yk-crawl { from { background-position: 0 0; } to { background-position: 28px 0; } }

.inv-countdown { gap: .45rem; }
.inv-countdown__item {
    flex: 1; min-width: 0; padding: .45rem .15rem .4rem; border-radius: 8px;
    background: var(--yk-lcd); border: 2px solid var(--yk-edge);
}
.inv-countdown__value {
    font: 2.5rem/1 var(--yk-term); font-weight: 400; color: var(--inv-glow);
    text-shadow: 0 0 10px color-mix(in srgb, var(--inv-glow) 70%, transparent);
}
.inv-countdown__label { font: 600 .68rem/1.2 var(--yk-pixel); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .8; }
.inv-countdown__done { font-weight: 500; }
.inv-countdown__actions { gap: .55rem; margin-top: 1.05rem; }
.yk-body .inv-countdown__actions .inv-button { padding: .5rem .95rem; font-size: .82rem; }

/* events: dialog boxes */
.yk-event__photo {
    position: relative; overflow: hidden; height: 9rem; border-bottom: 2px solid var(--yk-edge);
    background: var(--yk-photo, var(--yk-holo)) center / cover no-repeat;
}
.yk-event__head { display: flex; align-items: center; gap: .65rem; }
.yk-event__num {
    flex: none; padding: .05rem .45rem; border-radius: 5px; background: var(--yk-lcd); color: var(--inv-glow);
    font: 1.6rem/1.1 var(--yk-term);
}
.yk-event__name { font: italic 900 1.45rem/1.1 var(--yk-sans); overflow-wrap: anywhere; }
.yk-event__rows { margin-top: .85rem; }
.yk-event__rows > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0; border-top: 1.5px dashed var(--yk-line); }
.yk-event__rows dt { font: 600 .8rem/1.6 var(--yk-pixel); color: var(--yk-strong); }
.yk-event__rows dd { font-size: .93rem; overflow-wrap: anywhere; }
.inv-maps { margin-top: .85rem; }
.yk-body .inv-maps .inv-button { width: 100%; }

/* love story: a photo viewer */
.yk-story__list { display: grid; gap: 1.3rem; }
.yk-moment + .yk-moment { padding-top: 1.3rem; border-top: 2px dashed var(--yk-line); }
.yk-moment__frame {
    position: relative; overflow: hidden; border: 2px solid var(--yk-edge); border-radius: 8px;
    /* the transparency checkerboard of old photo viewers */
    background: conic-gradient(#e6e6ee 25%, #fff 0 50%, #e6e6ee 0 75%, #fff 0) 0 0 / 16px 16px;
}
.yk-moment__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.yk-moment__photo--empty { display: grid; place-items: center; aspect-ratio: 16 / 7; color: var(--inv-primary); font-size: 2.5rem; }
.yk-moment__file {
    position: absolute; left: .4rem; top: .4rem; padding: 0 .4rem; border-radius: 4px;
    background: rgb(0 0 0 / .62); color: #fff; font: 1rem/1.35 var(--yk-term);
}
.yk-moment__text { padding: .75rem .1rem 0; }
.yk-moment__date {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    background: var(--inv-primary); color: var(--inv-ink); font: 600 .78rem/1.3 var(--yk-pixel);
}
.yk-moment__title { margin: .4rem 0 .25rem; font: italic 900 1.25rem/1.2 var(--yk-sans); }
.yk-moment__story { font-size: .93rem; line-height: 1.65; color: color-mix(in srgb, var(--inv-text) 85%, transparent); }

/* gallery: a folder */
.yk-address {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; border-bottom: 1.5px solid var(--yk-line);
    font: 1.05rem/1.3 var(--yk-term);
}
.yk-address__label { color: var(--yk-soft); }
.yk-address__path {
    flex: 1; min-width: 0; padding: 0 .45rem; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: color-mix(in srgb, var(--inv-window) 80%, #fff); box-shadow: inset 1px 1px 0 rgb(0 0 0 / .2); border: 1.5px solid var(--yk-line);
}
.yk-gallery .yk-win__body { padding: .9rem; }
.inv-gallery { gap: .55rem; }
.inv-gallery__item { border: 2px solid var(--yk-edge); border-radius: 6px; box-shadow: 2px 2px 0 var(--yk-shadow); background: var(--yk-holo); }

/* live streaming: a media player */
.yk-live__screen {
    position: relative; padding: 1.2rem 1rem; border-radius: 8px; border: 2px solid var(--yk-edge); text-align: center; color: #fff;
    background:
        repeating-linear-gradient(180deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 4px),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 70%),
        var(--yk-lcd);
}
.yk-live__badge { font: 600 .85rem/1 var(--yk-pixel); color: #ff4d6d; letter-spacing: .1em; animation: yk-blink 1.4s steps(1) infinite; }
.yk-live__title { margin-top: .45rem; font: 800 1.15rem/1.25 var(--yk-sans); }
.yk-live__host { font: 1.15rem/1.2 var(--yk-term); color: var(--inv-glow); }
.yk-live__text { margin-top: .85rem; text-align: center; font-size: .93rem; }
.yk-live__note { margin-top: .3rem; text-align: center; font-size: .85rem; color: var(--yk-soft); }
.yk-body .yk-live__button { width: 100%; margin-top: .9rem; }

/* gift: the accounts as small pop-up windows, two per row; an odd last one spans the row */
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account {
    min-width: 0; padding: .8rem .7rem; border-radius: 8px; border: 2px solid var(--yk-edge); text-align: center;
    background: color-mix(in srgb, var(--inv-primary) 7%, var(--inv-window)); box-shadow: 3px 3px 0 var(--yk-shadow);
}
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__address { margin-top: .75rem; }
.inv-gift__bank { margin: 0 0 .4rem; font: 600 .74rem/1.3 var(--yk-pixel); letter-spacing: .04em; color: var(--yk-strong); overflow-wrap: anywhere; }
.inv-gift__logo { height: 1.6rem; padding: .22rem .5rem; max-width: 100%; }
.inv-gift__logo img { max-width: 100%; }
.inv-gift__number { margin: .1rem 0 0; font: 1.3rem/1.05 var(--yk-term); letter-spacing: .03em; font-weight: 400; overflow-wrap: anywhere; }
.inv-gift__holder { margin: .2rem 0 .55rem; font: 600 .6rem/1.35 var(--yk-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--yk-soft); overflow-wrap: anywhere; }
.inv-gift__address .inv-gift__holder { font-size: .7rem; }
.inv-gift__address p:not([class]) { margin: 0 0 .7rem; font-size: .92rem; }
.yk-body .inv-gift__account .inv-button { padding: .35rem .7rem; font-size: .7rem; }

/* forms: RSVP and wishes */
.yk-form .inv-form label, .yk-form .inv-form__choices legend { font-weight: 500; font-size: .88rem; }
.yk-form .inv-form input:not([type=radio]):not([type=checkbox]), .yk-form .inv-form select, .yk-form .inv-form textarea {
    border: 2px solid var(--yk-edge); border-radius: 6px; color: var(--inv-text);
    background: color-mix(in srgb, var(--inv-window) 90%, var(--inv-text));
    box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--inv-text) 12%, transparent);
}
.yk-form .inv-form select option { background: var(--inv-window); color: var(--inv-text); }
.yk-form .inv-form input:focus, .yk-form .inv-form select:focus, .yk-form .inv-form textarea:focus { outline: 2px solid var(--inv-primary); outline-offset: 1px; }
.yk-form .inv-form__choices label {
    padding: .35rem .65rem; border-radius: 999px; border: 1.5px solid var(--yk-line);
    background: color-mix(in srgb, var(--inv-primary) 6%, var(--inv-window));
}
.inv-form__notice { border: 1.5px dashed color-mix(in srgb, var(--inv-accent) 60%, transparent); background: color-mix(in srgb, var(--inv-accent) 14%, var(--inv-window)); }
.inv-rsvp__deadline { margin: 0 0 .8rem; font: 1.1rem/1.2 var(--yk-term); color: var(--yk-strong); }

/* about three messages in the scroll box; right padding keeps the hard shadows visible */
.inv-wishes { --inv-wishes-height: 20rem; }
.inv-wishes__list { gap: .65rem; margin-top: 1.3rem; padding: 0 .45rem .35rem 0; }
.inv-wish {
    padding: .65rem .8rem; border: 1.5px solid var(--yk-edge); border-radius: 10px 10px 10px 2px;
    background: color-mix(in srgb, var(--inv-primary) 7%, var(--inv-window)); box-shadow: 3px 3px 0 var(--yk-shadow);
}
.inv-wish__name { font: 600 .9rem/1.3 var(--yk-pixel); color: var(--yk-strong); }
.inv-wish__message { font-size: .88rem; line-height: 1.45; }
.inv-wish__name::before { content: '☺ '; }
.inv-wish__time { margin-top: .3rem; font: .9rem/1 var(--yk-term); }

/* closing: the shutdown screen */
.yk-shutdown {
    position: relative; overflow: hidden; padding: 2.4rem 1.3rem 2.1rem; text-align: center; color: #fff;
    border: 2px solid var(--yk-edge); border-radius: 14px; box-shadow: 6px 6px 0 var(--yk-shadow);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--inv-primary) 50%, transparent), transparent 60%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--inv-glow) 30%, transparent), transparent 50%),
        linear-gradient(180deg, #16132b, #07070e);
}
.yk-shutdown__kicker { font: 1.2rem/1.2 var(--yk-term); color: var(--inv-glow); letter-spacing: .04em; }
.yk-shutdown__thanks {
    margin-top: .35rem; font: 400 clamp(2.5rem, 12.5vw, 3.5rem)/1.05 var(--yk-bubble);
    background: var(--yk-holo); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 rgb(0 0 0 / .6));
}
.yk-shutdown__photo {
    width: 11rem; aspect-ratio: 1; margin: 1.4rem auto 1.2rem; padding: 4px; border-radius: 50%;
    background: var(--yk-holo); box-shadow: 0 0 30px color-mix(in srgb, var(--inv-glow) 45%, transparent);
}
.yk-shutdown__photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.yk-shutdown__message { max-width: 32ch; margin: 0 auto; font-size: .95rem; line-height: 1.7; color: rgb(255 255 255 / .9); }
.yk-shutdown__sign { margin-top: 1.3rem; font: 600 .85rem/1.3 var(--yk-pixel); color: rgb(255 255 255 / .72); letter-spacing: .06em; }
.yk-shutdown__names { margin-top: .25rem; font: italic 900 clamp(1.7rem, 8vw, 2.2rem)/1.15 var(--yk-sans); text-transform: uppercase; }
.yk-shutdown__safe { margin-top: 1.7rem; font: 1.2rem/1.3 var(--yk-term); color: #ffb84d; }

/* platform credit and check-in */
.yk-branding {
    align-self: center; padding: .35rem .9rem; border-radius: 999px; opacity: 1;
    background: var(--inv-window); border: 1.5px solid var(--yk-line); color: var(--inv-text);
    font: 1.05rem/1.3 var(--yk-term);
}
.inv-checkin { color: #1a1a1a; border: 2px solid var(--yk-edge); box-shadow: 4px 4px 0 var(--yk-shadow); }

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
    .yk-desk { position: absolute; left: 1.5rem; top: 1.5rem; flex-direction: column; gap: 1.2rem; width: auto; padding: 0; }
    .yk-main { gap: 2.2rem; padding-top: 2.4rem; }
}
@media (max-height: 820px) and (max-width: 759px) {
    .yk-desk { display: none; }
}
@media (max-width: 399px) {
    .yk-taskbar .yk-clock { display: none; }
    .yk-profile__body, .yk-profile--bride .yk-profile__body { grid-template-columns: 6.6rem minmax(0, 1fr); }
    .yk-profile--bride .yk-profile__body { grid-template-columns: minmax(0, 1fr) 6.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yk-spark, .yk-load__fill, .yk-cursor, .yk-caret, .yk-ticker__track, .yk-copy__dots span,
    .yk-progress__fill, .yk-link__heart, .yk-live__badge, .yk-cover__photo::after, .yk-event__photo::after { animation: none; }
    .yk-cursor { display: none; }
}

/* ---------- fit: the whole cover (window, dialog, OK button) above the taskbar on one phone screen ---------- */

.yk-cover__photo { height: clamp(100px, 22svh, 260px); }
.yk-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }

@media (max-height: 760px) {
    .yk-cover__stage { padding: .6rem .9rem .9rem; }
    .yk-cover__body { gap: .45rem; padding: .55rem; }
    .yk-cover__photo { height: clamp(96px, 23svh, 220px); }
    .yk-cover__names { padding: .6rem .7rem .7rem; }
    .yk-cover__quote { -webkit-line-clamp: 6; margin-top: .25rem; font-size: .8rem; }
    .yk-dialog { padding: .65rem .85rem .2rem; }
    .yk-dialog__actions { padding: .45rem .85rem .75rem; }
}
@media (max-height: 660px) {
    .yk-cover__stage { padding: .45rem .8rem .7rem; }
    .yk-cover__body { gap: .35rem; padding: .45rem; }
    .yk-load__label { font-size: .95rem; }
    .yk-load__bar { height: .75rem; }
    .yk-cover__photo { height: clamp(84px, 20svh, 200px); }
    .yk-cover__couple { font-size: clamp(1.8rem, 9vw, 2.3rem); }
    .yk-cover__date { font-size: 1.15rem; }
    .yk-win--dialog { margin-top: -.8rem; }
    .yk-dialog__msg { font-size: .82rem; }
}

/* page end: the shutdown screen ends a little above the taskbar (the page's own bottom menu) */
.yk-main { padding-bottom: 5.6rem; }