*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC","Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: var(--c-text);
    background-color: var(--c-bg);
    transition: background var(--tr-med), color var(--tr-med);
    max-width: 100vw;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:root {
    --c-bg:          #f5f3ef;
    --c-surface:     #ffffff;
    --c-surface-2:   #f3f4f6;
    --c-surface-3:   #e5e7eb;
    --c-primary:     #6366f1;
    --c-primary-2:   #818cf8;
    --c-space:       clamp(12px, 1.6vw, 20px);
    --c-karaoke-hit: #facc15;
    --c-person-opacity: 0;
    --c-person-bottom: 8%;
    --c-person-scale-num: 1;
    --c-person-flip: 0;
    --c-bg-offset-x-px: 0px;
    --c-text:        #111827;
    --c-text-2:      #6b7280;
    --c-text-3:      #9ca3af;
    --c-danger:      #ef4444;
    --c-like:        #ef4444;
    --c-success:     #10b981;
    --c-border:      rgba(17, 24, 39, 0.08);
    --c-border-strong: rgba(17, 24, 39, 0.12);
    --c-shadow:      0 10px 40px rgba(99, 102, 241, 0.12);
    --c-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.04);
    --c-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.08);
    --c-cover-fallback: url('cover/twitter_icon_1st.jpg');
    --c-skin-wallpaper: none;
    --c-blur: 0px;
    --bg-image: none;
    --s-gap-xs: 4px;
    --s-gap-sm: 8px;
    --s-gap-md: 14px;
    --s-gap-lg: 22px;
    --s-radius-sm: 6px;
    --s-radius-md: 10px;
    --s-radius-lg: 16px;
    --s-radius-xl: 999px;
    --s-card-pad: 14px 16px;
    --s-cover-w:  clamp(260px, 70vw, 420px);
    --s-topbar-h: 56px;
    --s-control-h: 72px;
    --tr-fast: 140ms cubic-bezier(.22,.61,.36,1);
    --tr-med:  320ms cubic-bezier(.22,.61,.36,1);
    --tr-slow: 520ms cubic-bezier(.22,.61,.36,1);
    --fs-xxs: 9px;
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-md: 12px;
    --fs-lg: 13px;
    --fs-xl: 14px;
    --fs-xl2: 15px;
    --fs-2xl: 16px;
    --fs-2xl2: 17px;
    --fs-3xl: 18px;
    --fs-4xl: 20px;
    --fs-5xl: 22px;
    --fs-6xl: 24px;
    --fs-7xl: 28px;
    --fs-8xl: 32px;
    --fs-9xl: 36px;
    --fs-10xl: 40px;
    --fs-11xl: 48px;
}

[data-theme="dark"] {
    --c-bg:          #000000;
    --c-surface:     #121212;
    --c-surface-2:   #1e1e1e;
    --c-surface-3:   #2a2a2a;
    --c-text:        #f3f4f6;
    --c-text-2:      #9ca3af;
    --c-text-3:      #6b7280;
    --c-border:      rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.14);
    --c-shadow:      0 10px 40px rgba(0, 0, 0, 0.4);
    --c-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.2);
    --c-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.3);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--c-text-3) transparent;
}

@media (max-width: 768px) {
    body {
        height: auto;
        overflow: auto;
    }
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--c-text-3);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-2);
}

.u-flex      { display: flex; }
.u-between   { justify-content: space-between; }
.u-center    { justify-content: center; align-items: center; }
.u-col       { flex-direction: column; }
.u-full-w    { width: 100%; }
.u-ellipsis  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mt-sm     { margin-top: var(--s-gap-sm); }
.u-mt-md     { margin-top: var(--s-gap-md); }
.u-mt-lg     { margin-top: var(--s-gap-lg); }
.u-hidden    { display: none !important; }
.u-clickable { cursor: pointer; user-select: none; -webkit-user-select: none; }
.u-text-dim { font-size: var(--fs-md); color: var(--c-text-3); }
.u-center-block { display: block; text-align: center; padding: 10px 0; }
.u-text-primary-sm { color: var(--c-primary); font-size: var(--fs-md); }
.u-spacer-lg { height: 140px; }
.u-fs-xs { font-size: var(--fs-xs); }
.u-fs-sm { font-size: var(--fs-sm); }
.u-fs-md { font-size: var(--fs-md); }
.u-fs-lg { font-size: var(--fs-lg); }
.u-fs-xl { font-size: var(--fs-xl); }
.u-fs-2xl { font-size: var(--fs-2xl); }