:root { --b: #fff; --f: #000; --l: 1px solid var(--f); --font: ui-monospace, 'Cascadia Code', monospace; }
body.d { --b: #000; --f: #fff; }
* { margin: 0; padding: 0; box-sizing: border-box; transition: 0.3s; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { background: var(--b); color: var(--f); font-family: var(--font); padding: 20px; overflow-x: hidden; }

.f { max-width: 800px; margin: 0 auto; border: var(--l); padding: 40px; }
nav { display: flex; justify-content: space-between; border-bottom: var(--l); padding-bottom: 20px; margin-bottom: 60px; position: sticky; top: 0; background: var(--b); z-index: 100; padding-top: 10px; }
.l { cursor: pointer; user-select: none; }
.nr { display: flex; align-items: center; }
#bn-v { background: none; border: var(--l); color: var(--f); padding: 4px 10px; font-size: 10px; cursor: pointer; margin-right: 20px; }
#bn-v:hover { background: var(--f); color: var(--b); }
.ln a { text-decoration: none; color: inherit; font-size: 12px; margin-left: 20px; }

h1 { font-size: clamp(3rem, 10vw, 5rem); line-height: 0.85; letter-spacing: -4px; margin-bottom: 20px; }
.m { text-transform: uppercase; font-size: 12px; }
.s { border-top: var(--l); padding: 20px 0 40px 0; }
.tag { font-size: 10px; opacity: 0.6; letter-spacing: 2px; display: block; margin-bottom: 10px; }

.c { border: var(--l); padding: 25px; margin-top: 10px; }
.ch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.st { font-size: 9px; border: var(--l); padding: 2px 8px; }
.aw { font-size: 11px; font-style: italic; opacity: 0.7; margin: 5px 0 15px 0; }
.bn-l { display: inline-block; border: var(--l); padding: 8px 16px; text-decoration: none; color: inherit; font-size: 10px; margin-top: 20px; }
.bn-l:hover { background: var(--f); color: var(--b); }

.mw { width: 100%; overflow: hidden; border: var(--l); margin-top: 10px; }
.ms { display: flex; width: fit-content; animation: move 35s linear infinite; }
.ms img { height: 180px; border-right: var(--l); filter: grayscale(1); cursor: pointer; }
@keyframes move { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#v { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none; align-items: center; justify-content: center; z-index: 1000; cursor: pointer; }
#v.on { display: flex; }
#v img { max-width: 90%; max-height: 85%; border: 1px solid #fff; }

.g { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.bn-f { display: block; border: var(--l); padding: 20px; text-align: center; text-decoration: none; color: inherit; font-weight: bold; font-size: 12px; }
.bn-f:hover { background: var(--f); color: var(--b); }

footer { display: flex; justify-content: space-between; font-size: 10px; margin-top: 60px; padding-top: 20px; border-top: var(--l); }

/* CENTER HEART */
#heart-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 10rem;
    color: #ff0000;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
}

#heart-box.on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}