/* ============================================================ Model Arena — "Talad Poster" design system Light-first: cream paper, hard ink outlines, offset shadows, vermillion + banana-leaf green. Like a Thai market menu board. Display/body: Mitr (Thai). Serif accent: Trirong (Thai). Numbers: IBM Plex Mono. Theme switched by .dark on . ============================================================ */ :root { /* day market: cream paper + ink */ --bg: #f7efdc; --surface: #fffaf0; --surface-2: #f1e6cd; --ink: #23180d; --ink-mute: #7a6a52; --line: #23180d; /* outlines are INK — this design draws, not fades */ --line-soft: #d9cbab; --accent: #d5402f; /* vermillion */ --accent-hover: #b93325; --accent-ink: #fffaf0; --accent-soft: rgba(213, 64, 47, 0.10); --green: #1e6b48; /* banana leaf */ --gold: #c98a06; /* turmeric */ --danger: #b3261e; --danger-bg: rgba(179, 38, 30, 0.08); --meter-track: #efe3c6; --shadow-ink: #23180d; /* hard offset shadows, no blur */ --dot: rgba(35, 24, 13, 0.05); } html.dark { /* market after dark: warm charcoal, same ink logic */ --bg: #17130c; --surface: #211b11; --surface-2: #2c2417; --ink: #f6ecd8; --ink-mute: #a3947a; --line: #f6ecd8; --line-soft: #3d3423; --accent: #ff5c4a; --accent-hover: #ff7a6b; --accent-ink: #1c0d08; --accent-soft: rgba(255, 92, 74, 0.13); --green: #3dbd8a; --gold: #e8b13c; --danger: #ff7369; --danger-bg: rgba(255, 115, 105, 0.10); --meter-track: #2c2417; --shadow-ink: #000000; --dot: rgba(246, 236, 216, 0.045); } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; } html.dark { color-scheme: dark; } body { min-height: 100vh; display: flex; flex-direction: column; font-family: "Mitr", "Trebuchet MS", sans-serif; background-color: var(--bg); /* halftone paper dots */ background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 20px 20px; color: var(--ink); -webkit-font-smoothing: antialiased; transition: background-color 0.25s, color 0.25s; } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: inherit; } img { max-width: 100%; } code, .mono, .num { font-family: "IBM Plex Mono", ui-monospace, monospace; } .num { font-variant-numeric: tabular-nums; } code { font-size: 0.85em; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0.1em 0.4em; } /* ---------- nav (with awning scallops) ---------- */ .nav { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 2px solid var(--line); } .nav::after { /* scalloped awning edge, like a shopfront canopy */ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: radial-gradient(circle at 50% 0, var(--accent) 0 8.5px, transparent 9px); background-size: 22px 9px; background-repeat: repeat-x; pointer-events: none; } .nav-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; height: 3.9rem; display: flex; align-items: center; gap: 0.25rem; } .nav-links { display: flex; align-items: center; gap: 0.2rem; overflow-x: auto; } .nav-link { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--ink-mute); border: 2px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; } .nav-link:hover { color: var(--ink); border-color: var(--line-soft); } .nav-link.active { color: var(--accent-ink); background: var(--accent); border-color: var(--line); box-shadow: 2px 2px 0 var(--shadow-ink); } /* ---------- layout ---------- */ main { flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; } .footer { border-top: 2px solid var(--line); padding: 1.3rem 1rem; text-align: center; font-family: "Trirong", serif; font-style: italic; font-size: 0.8rem; color: var(--ink-mute); background: var(--surface); } /* ---------- type ---------- */ h1 { font-size: 1.8rem; font-weight: 600; line-height: 1.15; } .page-sub { margin-top: 0.45rem; color: var(--ink-mute); max-width: 46rem; } .kicker { font-family: "Trirong", serif; font-style: italic; font-weight: 500; font-size: 0.95rem; color: var(--accent); } .kicker::before { /* small ink diamond — drawn, not typed, so no platform turns it into emoji */ content: ""; display: inline-block; vertical-align: 0.1em; width: 0.5em; height: 0.5em; margin-right: 0.45em; background: var(--accent); transform: rotate(45deg); } /* inline SVG icons */ .icon { vertical-align: -0.18em; } .btn .icon, .alert .icon { margin-right: 0.15rem; } /* ---------- cards / panels ---------- */ .card { background: var(--surface); border: 2px solid var(--line); border-radius: 12px; box-shadow: 5px 5px 0 var(--shadow-ink); } .card-pad { padding: 1.5rem; } .panel-title { display: inline-block; font-weight: 600; font-size: 0.95rem; padding: 0.15rem 0.7rem; background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; box-shadow: 2px 2px 0 var(--shadow-ink); transform: rotate(-1deg); } .empty { margin-top: 1.5rem; padding: 2.75rem 1.5rem; text-align: center; border: 2px dashed var(--line); border-radius: 12px; color: var(--ink-mute); background: var(--surface); } .empty a { color: var(--accent); font-weight: 500; } .alert { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 10px; border: 2px solid var(--danger); background: var(--danger-bg); color: var(--danger); font-size: 0.92rem; box-shadow: 3px 3px 0 var(--shadow-ink); } /* ---------- buttons ---------- */ .btn { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 10px; border: 2px solid var(--line); font: 500 0.95rem "Mitr", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--shadow-ink); transition: transform 0.1s, box-shadow 0.1s, background 0.15s; } .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow-ink); } .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow-ink); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; } .btn-ghost { background: var(--surface); color: var(--ink); } .btn-ghost:hover { background: var(--surface-2); } .btn-sm { padding: 0.3rem 0.9rem; font-size: 0.8rem; box-shadow: 3px 3px 0 var(--shadow-ink); } .btn-lg { padding: 0.95rem 1.5rem; font-size: 1.1rem; font-weight: 600; } .btn-lg .icon { margin-right: 0.3rem; } .btn-block { display: block; width: 100%; text-align: center; } .predict-submit { position: fixed; left: 0; right: 0; bottom: 1.4rem; z-index: 30; text-align: center; pointer-events: none; } .predict-submit .btn { pointer-events: auto; } /* ---------- forms ---------- */ label, .field-label { display: block; font-size: 0.88rem; font-weight: 500; } .req { color: var(--accent); } input[type="text"], input[type="search"], input[type="number"], select { margin-top: 0.35rem; width: 100%; padding: 0.55rem 0.8rem; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 400 0.92rem "Mitr", sans-serif; box-shadow: inset 2px 2px 0 rgba(35, 24, 13, 0.06); } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); } input[type="file"] { margin-top: 0.35rem; width: 100%; font-size: 0.85rem; color: var(--ink-mute); cursor: pointer; } input[type="file"]::file-selector-button { margin-right: 0.8rem; padding: 0.45rem 1rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: 500 0.82rem "Mitr", sans-serif; cursor: pointer; box-shadow: 2px 2px 0 var(--shadow-ink); } input[type="file"]::file-selector-button:hover { background: var(--accent); color: var(--accent-ink); } .hint { margin-top: 0.35rem; font-size: 0.76rem; color: var(--ink-mute); font-weight: 400; } /* ---------- tables (menu-board ruling) ---------- */ .table-wrap { margin-top: 1.5rem; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } thead th { padding: 0.75rem 1rem; text-align: left; font: 600 0.66rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--surface-2); border-bottom: 2px solid var(--line); } thead th.r, td.r { text-align: right; } tbody td { padding: 0.75rem 1rem; border-bottom: 1px dashed var(--line-soft); } tbody tr { transition: background 0.12s; } tbody tr:hover { background: var(--accent-soft); } tbody tr:last-child td { border-bottom: none; } .team-link { font-weight: 500; color: var(--accent); text-decoration: none; } .team-link:hover { text-decoration: underline wavy; text-underline-offset: 3px; } .tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font: 500 0.72rem "IBM Plex Mono", monospace; background: var(--surface); border: 1.5px solid var(--line); } /* ---------- rank badges & achievement stickers ---------- */ .rank-badge { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border: 2px solid var(--line); border-radius: 999px; font: 600 0.8rem "IBM Plex Mono", monospace; background: var(--surface); } .rank-badge.gold { background: #f5c542; color: #23180d; box-shadow: 2px 2px 0 var(--shadow-ink); transform: rotate(-4deg); } .rank-badge.silver { background: #d7d3c8; color: #23180d; box-shadow: 2px 2px 0 var(--shadow-ink); transform: rotate(3deg); } .rank-badge.bronze { background: #d99e6b; color: #23180d; box-shadow: 2px 2px 0 var(--shadow-ink); transform: rotate(-2deg); } .sticker { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.5rem; border: 1.5px solid var(--line); border-radius: 999px; font: 500 0.62rem "IBM Plex Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; box-shadow: 1px 1px 0 var(--shadow-ink); cursor: help; } .sticker:nth-of-type(odd) { transform: rotate(-2deg); } .sticker:nth-of-type(even) { transform: rotate(2deg); } .sticker.champion { background: #f5c542; color: #23180d; } .sticker.sharpshooter { background: var(--accent); color: var(--accent-ink); } .sticker.lightning { background: var(--gold); color: #fffaf0; } .sticker.featherweight { background: var(--green); color: #fffaf0; } .sticker.pioneer { background: var(--surface-2); color: var(--ink); } /* trophy shelf (model card) */ .trophy-shelf { margin-top: 1.1rem; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .trophy { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.9rem 1rem; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 3px 3px 0 var(--shadow-ink); } .trophy:nth-child(odd) { transform: rotate(-0.8deg); } .trophy:nth-child(even) { transform: rotate(0.8deg); } .trophy-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); } .trophy.champion .trophy-icon { background: #f5c542; color: #23180d; } .trophy.sharpshooter .trophy-icon { background: var(--accent); color: var(--accent-ink); } .trophy.lightning .trophy-icon { background: var(--gold); color: #fffaf0; } .trophy.featherweight .trophy-icon { background: var(--green); color: #fffaf0; } .trophy-label { font-weight: 600; font-size: 0.95rem; } .trophy-desc { margin-top: 0.15rem; font-size: 0.76rem; color: var(--ink-mute); } /* ---------- meters (candy stripes) ---------- */ .meter { flex: 1; height: 0.7rem; border-radius: 999px; background: var(--meter-track); border: 1.5px solid var(--line); overflow: hidden; } .meter-fill { height: 100%; border-radius: 999px; background: repeating-linear-gradient( -45deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 78%, var(--accent-ink)) 6px 12px); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .meter-fill.alt { background: repeating-linear-gradient( -45deg, var(--green) 0 6px, color-mix(in srgb, var(--green) 78%, var(--surface)) 6px 12px); } .meter-row { display: flex; align-items: center; gap: 0.6rem; min-width: 130px; } /* ---------- hero (home + upload) ---------- */ .hero { padding: 2.25rem 0 1.5rem; } .hero-grid { display: grid; gap: 2rem; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; } } .hero-text { text-align: center; } @media (min-width: 900px) { .hero-text { text-align: left; } } .hero-text h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 600; line-height: 1.08; } .hero-text h1 .accent { color: var(--accent); text-shadow: 4px 4px 0 var(--green); /* misregistered-print poster effect */ } .hero-text p { margin: 1rem auto 0; max-width: 34rem; color: var(--ink-mute); font-size: 1rem; } @media (min-width: 900px) { .hero-text p { margin-inline: 0; } } .hero-actions { margin-top: 1.5rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } @media (min-width: 900px) { .hero-actions { justify-content: flex-start; } } .upload-card .kicker { margin: 0 0 0.2rem; } /* staggered load-in */ @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .rise { animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; } .d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.12s; } .d3 { animation-delay: 0.19s; } .d4 { animation-delay: 0.26s; } .d5 { animation-delay: 0.33s; } .d6 { animation-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } .meter-fill { transition: none; } } /* pipeline */ .pipeline { margin-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.6rem; } .pipe-step { display: flex; align-items: center; gap: 0.6rem; } .pipe-card { width: 10rem; height: 100%; padding: 1rem 0.8rem; text-align: center; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--shadow-ink); transition: transform 0.15s, box-shadow 0.15s; } .pipe-card:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 5px 5px 0 var(--shadow-ink); } .pipe-card .n { font: 600 0.66rem "IBM Plex Mono", monospace; color: var(--accent); letter-spacing: 0.2em; } .pipe-card .pic { margin-top: 0.35rem; color: var(--accent); } .pipe-card .name { margin-top: 0.15rem; font-weight: 600; font-size: 0.92rem; } .pipe-card .desc { margin-top: 0.2rem; font-size: 0.73rem; color: var(--ink-mute); } .pipe-arrow { color: var(--ink); font-size: 1.3rem; font-weight: 600; } @media (max-width: 767px) { .pipe-arrow { display: none; } } /* stat tiles — price tags on a market stall */ .stats { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { padding: 1.2rem 1.3rem; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--shadow-ink); } .stat:nth-child(odd) { transform: rotate(-0.6deg); } .stat:nth-child(even) { transform: rotate(0.6deg); } .stat .label { font-family: "Trirong", serif; font-style: italic; font-size: 0.8rem; color: var(--ink-mute); } .stat .value { margin-top: 0.3rem; font-size: 2.1rem; font-weight: 600; } .stat .value small { font-size: 1rem; font-weight: 400; color: var(--ink-mute); } /* charts */ .section-head { margin-top: 2.9rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-head h2 { font-size: 1.35rem; font-weight: 600; } .section-head a { font-size: 0.88rem; color: var(--accent); text-decoration: none; font-weight: 500; } .section-head a:hover { text-decoration: underline wavy; text-underline-offset: 3px; } .chart-grid { margin-top: 1.3rem; display: grid; gap: 1.2rem; } @media (min-width: 768px) { .chart-grid { grid-template-columns: 1fr 1fr; } } .chart-card h3 { font-size: 1rem; font-weight: 600; } .chart-card .sub { font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.15rem; } .chart-box { margin-top: 0.9rem; height: 16rem; position: relative; } /* ---------- grids ---------- */ .grid-2 { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .grid-metrics { margin-top: 1.5rem; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } /* ---------- upload ---------- */ .progress-indeterminate { position: relative; overflow: hidden; height: 0.7rem; border-radius: 999px; background: var(--meter-track); border: 1.5px solid var(--line); } @keyframes indeterminate { 0% { left: -35%; } 100% { left: 100%; } } .progress-indeterminate::after { content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%; border-radius: 999px; background: repeating-linear-gradient( -45deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 78%, var(--accent-ink)) 6px 12px); animation: indeterminate 1.2s ease-in-out infinite; } .steps { margin-top: 1rem; list-style: none; counter-reset: step; } .steps li { counter-increment: step; position: relative; padding: 0.6rem 0 0.6rem 2.5rem; font-size: 0.86rem; color: var(--ink-mute); font-weight: 400; border-bottom: 1px dashed var(--line-soft); } .steps li:last-child { border-bottom: none; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0.55rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font: 600 0.72rem "IBM Plex Mono", monospace; color: var(--accent-ink); background: var(--accent); border: 1.5px solid var(--line); border-radius: 999px; } .steps b { color: var(--ink); font-weight: 500; } /* ---------- predict: demo-dish gallery ---------- */ .sample-empty { margin-top: 0.9rem; text-align: center; } /* -- header row: title left, search top-right -- */ .gallery-head { align-items: center; row-gap: 0.6rem; } .search-box { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; } .search-box .field { position: relative; width: 16rem; max-width: 62vw; } .search-box .icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; } .search-box input[type="search"] { margin-top: 0; width: 100%; padding: 0.5rem 0.9rem 0.5rem 2.3rem; border-radius: 999px; font-size: 0.86rem; background: var(--surface); box-shadow: inset 1.5px 1.5px 0 rgba(35, 24, 13, 0.06); } .search-box input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } .search-box #sample-count { white-space: nowrap; margin: 0; } /* -- gallery grid of dish tiles: fixed 4-per-row, 4 rows a page -- */ .dish-grid { margin-top: 1.1rem; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .dish-grid { grid-template-columns: repeat(4, 1fr); } } .dish-grid[hidden] { display: none; } .dish-card { display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; text-align: center; transition: transform 0.15s, box-shadow 0.15s; } .dish-card[hidden] { display: none; } .dish-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow-ink); } .dish-card.active { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); } .dish-card.picked { border-color: var(--accent); } /* every tile the same shape regardless of the source photo's own aspect */ .dish-card .thumb-wrap { position: relative; width: 100%; padding-top: 78%; border-bottom: 2px solid var(--line); overflow: hidden; } .dish-card .thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dish-card.picked .thumb-wrap::after { content: "✓"; position: absolute; top: 0.4rem; right: 0.4rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--line); box-shadow: 1px 1px 0 var(--shadow-ink); font-size: 0.8rem; font-weight: 700; } .dish-card .name { padding: 0.55rem 0.6rem; font-family: "Trirong", serif; font-style: italic; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -- expanded photo picker for one dish, spans the full grid row -- */ .dish-expand { grid-column: 1 / -1; margin-top: -0.15rem; padding: 1rem; border: 2px dashed var(--line-soft); border-radius: 12px; background: var(--surface-2); } .dish-expand[hidden] { display: none; } .samples { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .samples { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .samples { grid-template-columns: repeat(5, 1fr); } } .sample { cursor: pointer; position: relative; display: block; } .sample input { position: absolute; opacity: 0; } .sample img { width: 100%; height: 6.2rem; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); transition: transform 0.15s, box-shadow 0.15s; } .sample:hover img { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 3px 3px 0 var(--shadow-ink); } .sample input:checked ~ img { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); transform: rotate(-1.5deg); } .sample .cap { display: block; margin-top: 0.35rem; text-align: center; font-family: "Trirong", serif; font-style: italic; font-size: 0.76rem; color: var(--ink-mute); } .pager { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 1.3rem; } .pager[hidden] { display: none; } .pager .hint { margin: 0; } .result-top { font-size: 2rem; font-weight: 600; text-transform: capitalize; } .pred-row { font-size: 0.86rem; display: flex; justify-content: space-between; margin-bottom: 0.3rem; } .result-img { border-radius: 10px; max-height: 18rem; width: 100%; object-fit: contain; background: var(--surface-2); border: 2px solid var(--line); } /* ---------- model card ---------- */ .facts { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1rem; font-size: 0.88rem; } .facts dt { font-family: "Trirong", serif; font-style: italic; color: var(--ink-mute); font-size: 0.8rem; } .facts dd { font-weight: 500; margin-top: 0.1rem; } .kv { display: flex; justify-content: space-between; padding-bottom: 0.55rem; border-bottom: 1px dashed var(--line-soft); font-size: 0.88rem; } .kv dt { color: var(--ink-mute); } .kv dd { font-weight: 500; } .score-badge { padding: 0.85rem 1.5rem; text-align: center; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--line); border-radius: 12px; box-shadow: 4px 4px 0 var(--shadow-ink); transform: rotate(2deg); } .score-badge .label { font-family: "Trirong", serif; font-style: italic; font-size: 0.74rem; opacity: 0.85; } .score-badge .value { font-size: 1.6rem; font-weight: 600; } /* utility */ .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .row { display: flex; gap: 1rem; flex-wrap: wrap; } .between { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .space-y > * + * { margin-top: 1.25rem; }