@font-face {
    font-family: 'Certa Sans';
    src: url('/fonts/certa-sans-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

:root {
    --head-h: 68px;
    --gap: clamp(16px, 3vw, 40px);
    --radius: 14px;

    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);

    --fast: 0.22s;
    --mid: 0.42s;
    --slow: 0.72s;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    overflow: hidden;
    overscroll-behavior: none;
}

::selection { background: var(--select); }

h1, h2, .h {
    font-family: 'Certa Sans', 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
}

a { color: var(--accent); text-decoration: none; }

.top {
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(var(--head-h) + var(--safe-top));
    padding: var(--safe-top) var(--gap) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 60;
    background: linear-gradient(var(--paper), rgba(0, 0, 0, 0) 92%);
    pointer-events: none;
}

.top > * { pointer-events: auto; }

.top-left {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    margin-left: -8px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--ink);
    cursor: pointer;
    transition: color var(--fast) var(--ease),
                background-color var(--fast) var(--ease);
}

.mark:hover { color: var(--door-hot, var(--hot)); background: var(--accent-tint); }

.tag {
    --tilt: -6deg;
    position: absolute;
    top: calc(100% - 18px);
    left: calc(var(--tag-x, 0px) - 6px);
    z-index: 2;
    font: inherit;
    font-family: var(--hand, 'Caveat', cursive);
    font-synthesis-weight: none;
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 6px;
    border: 0;
    background: none;
    color: var(--accent);
    cursor: pointer;
    transform-origin: left center;
    transform: rotate(var(--tilt));
    transition: color var(--fast) var(--ease);
}

.tag:hover:not(:disabled),
.tag[aria-expanded='true'] { color: var(--door-hot, var(--hot)); }
.tag:disabled { cursor: default; }

.tag.is-new { animation: tag-in var(--mid) var(--ease); }

@keyframes tag-in {
    from { opacity: 0; transform: rotate(var(--tilt)) translate3d(-8px, 0, 0); }
    to { opacity: 1; transform: rotate(var(--tilt)); }
}

.tag-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 10;
    min-width: 300px;
    max-width: min(420px, calc(100vw - 2 * var(--gap)));
    max-height: min(64vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--lift);
    box-shadow: 0 18px 48px var(--shadow);
    animation: tag-menu-in var(--fast) var(--ease) both;
}

@keyframes tag-menu-in {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: none; }
}

.ic { display: block; overflow: visible; }

.ic .pen {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ch-draw 0.34s cubic-bezier(0.33, 0.9, 0.5, 1) var(--d, 0s) forwards;
}

@keyframes ch-draw { to { stroke-dashoffset: 0; } }

.ic-mark { width: 34px; height: 34px; color: var(--ink); }

.mark-name {
    font-family: 'Certa Sans', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.mark-name i { font-style: normal; color: var(--ink-faint); }

.mark:hover .mark-name i { color: color-mix(in srgb, currentColor 55%, transparent); }

.mark:hover .gag-bucket {
    transform-origin: 22px 37px;
    animation: ch-bucket 0.66s ease-in-out infinite;
}

@keyframes ch-bucket {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30% { transform: translateY(0.8px) scaleY(0.96); }
    60% { transform: translateY(-0.6px) scaleY(1.03); }
}

.gag-pop { transform-box: fill-box; transform-origin: center; }

.mark:hover .gag-pop {
    animation: ch-pop 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) var(--d, 0s) infinite;
}

@keyframes ch-pop {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    35% { transform: translateY(-7px) rotate(-22deg) scale(1.1); }
    70% { transform: translateY(1.5px) rotate(10deg) scale(0.94); }
}

.doors {
    display: flex;
    align-items: center;
    gap: 4px;
}

.door {
    font: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: none;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
                background-color var(--fast) var(--ease);
}

.door:hover { color: var(--door-hot, var(--hot)); background: var(--accent-tint); }

.door-ic { padding: 7px 9px; display: inline-flex; }

.door-lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ic-nav { width: 34px; height: 34px; }

.door:hover .ic-nav .pen,
.door:focus-visible .ic-nav .pen {
    animation: ch-draw 0.42s cubic-bezier(0.33, 0.9, 0.5, 1) var(--d, 0s) both;
}

.door:hover .gag-holes,
.door:focus-visible .gag-holes {
    animation: ch-run 0.9s linear 0.25s infinite;
}

@keyframes ch-run {
    from { transform: translateY(0); }
    to { transform: translateY(5.2px); }
}

.door:hover .gag-spark,
.door:focus-visible .gag-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: ch-spark 1.1s ease-in-out 0.3s infinite;
}

@keyframes ch-spark {
    0%, 100% { opacity: 0.25; transform: scale(0.9); }
    40% { opacity: 1; transform: scale(1.12); }
}

.door[aria-current='page'] {
    color: var(--ink);
    border-color: var(--line-strong);
}

.age {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-faint);
    white-space: nowrap;
    user-select: none;
    cursor: default;
    vertical-align: 1px;
}

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--head-h) + var(--safe-top)) var(--gap)
             calc(20px + var(--safe-bottom));
    overflow: hidden;
    will-change: transform, opacity;
}

.slide-in {
    animation: slide-in var(--mid) var(--ease) both;
}

.slide-out {
    animation: slide-out var(--fast) var(--ease-in) both;
    pointer-events: none;
}

.slide-back.slide-in { animation-name: slide-in-back; }
.slide-back.slide-out { animation-name: slide-out-back; }

@keyframes slide-in {
    from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.992); }
    to { opacity: 1; transform: none; }
}

@keyframes slide-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.994); }
}

@keyframes slide-in-back {
    from { opacity: 0; transform: translate3d(0, -22px, 0) scale(0.992); }
    to { opacity: 1; transform: none; }
}

@keyframes slide-out-back {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.994); }
}

.curtain {
    position: fixed;
    inset: 0;
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
    z-index: 90;
    transition: opacity var(--fast) var(--ease);
}

.curtain.is-down { opacity: 1; }

body.is-swipe .stage { z-index: 70; }

.d {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.d:hover, .d:focus-visible {
    color: var(--door-hot, var(--hot));
    border-bottom-color: var(--door-hot, var(--hot));
}

.hand {
    font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
    font-synthesis-weight: none;
    font-weight: 600;
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .slide-in, .slide-out { animation-duration: 0.01s; }
    .tag.is-new { animation: none; }
    .tag-menu { animation: none; }
    .door:hover .ic-nav .pen, .door:focus-visible .ic-nav .pen { animation: none; }
    .door:hover .gag-holes, .door:hover .gag-spark { animation: none; }
    .curtain { transition-duration: 0.01s; }
    .ic .pen { animation: none; stroke-dashoffset: 0; }
    .mark:hover .gag-bucket, .mark:hover .gag-pop { animation: none; }
}

@media (max-width: 640px) {
    :root { --head-h: 58px; }
    body { font-size: 16px; }
    .mark-name { font-size: 17px; }
    .door { padding: 8px 11px; font-size: 14px; }
    .mark img { width: 30px; height: 30px; }
}

@media (max-width: 420px) {
    .mark-name i { display: none; }
    .tag { max-width: 7em; font-size: 19px; }
    .doors { gap: 0; }
    .door { padding: 8px 8px; font-size: 13px; }
}

.ic .bk-leaf {
    fill: var(--paper);
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-linecap: round;
}