:root{--black-0: #121212;--gray-950: #121212;--gray-900: #121212;--gray-850: #1a1a1a;--gray-800: #222222;--gray-700: #2e2e2e;--gray-600: #444444;--gray-500: #6b6b6b;--gray-400: #8a8a8a;--gray-300: #a8a8a8;--gray-200: #d4d4d4;--gray-100: #ececec;--white: #fafafa;--white-0: #ffffff;--surface-page: var(--white-0);--surface-card: #fafafa;--surface-raised: #f2f2f2;--surface-overlay: var(--white-0);--surface-inverse: var(--gray-950);--text-primary: var(--gray-950);--text-secondary: var(--gray-600);--text-muted: var(--gray-400);--text-inverse: #fafafa;--border-subtle: var(--gray-100);--border-default: var(--gray-200);--border-strong: var(--gray-300);--border-focus: var(--gray-950);--hover-lift: #f5f5f5;--hover-border: var(--gray-400);--press-dim: rgba(0, 0, 0, .06);--danger: #c9564f;--success: #5d8a68;--mood-dev: oklch(.85 .26 148);--mood-maker: oklch(.74 .19 55);--mood-cooking: oklch(.8 .16 80);--mood-climbing: oklch(.68 .09 60);--mood-photo: oklch(.66 .14 285);--mood-home: oklch(.82 .05 80);--mood-objects: oklch(.83 .15 195);--mood-product: oklch(.68 .2 25);--mood-ai: oklch(.72 .22 340);--mood-sport: oklch(.7 .17 250);--font-sans: "Archivo", "Noto Sans Thai", -apple-system, "Helvetica Neue", sans-serif;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-lg: 18px;--text-xl: 22px;--text-2xl: 28px;--text-3xl: 40px;--text-4xl: 56px;--text-5xl: 76px;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 800;--leading-tight: 1.05;--leading-snug: 1.25;--leading-body: 1.6;--tracking-tight: -.02em;--tracking-label: .03em;--type-display: var(--weight-bold) var(--text-4xl) / var(--leading-tight) var(--font-sans);--type-heading: var(--weight-bold) var(--text-2xl) / var(--leading-snug) var(--font-sans);--type-body: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-sans);--type-label: var(--weight-medium) var(--text-xs) / 1.2 var(--font-sans);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--radius-none: 0;--radius-sm: 2px;--radius-md: 4px;--radius-lg: 6px;--radius-full: 999px;--shadow-card: 0 0 0 1px var(--border-subtle);--shadow-raised: 0 0 0 1px var(--border-default);--shadow-overlay: 0 0 0 1px var(--border-default);--ease-out: cubic-bezier(.2, .8, .2, 1);--dur-fast: .12s;--dur-base: .18s}:root{--bg: var(--surface-page);--surface: var(--surface-page);--text: var(--text-primary);--text-soft: var(--text-secondary);--text-faint: var(--text-muted);--border: var(--border-default);--accent: var(--surface-inverse);--accent-text: var(--text-inverse);--heading: var(--text-primary);--radius: var(--radius-md);--maxw: 600px;--font: var(--font-sans)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-base);font-size-adjust:from-font;line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}:focus-visible{outline:1px solid var(--border-focus);outline-offset:2px}.page{max-width:var(--maxw);margin:0 auto;padding:56px 20px 80px}.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-page);color:var(--text-primary);font-size:var(--text-base);font-weight:var(--weight-semibold);font-family:inherit;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.btn:hover{border-color:var(--hover-border)}.btn:active{background:var(--press-dim)}.btn--primary{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--surface-inverse)}.btn--primary:active{background:var(--gray-800)}.btn--ghost{background:transparent}.muted{color:var(--text-secondary)}.faint{color:var(--text-muted)}.label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:lowercase}@keyframes rise{0%{opacity:0}to{opacity:1}}.rise{animation:rise var(--dur-base) var(--ease-out) both}
