:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; color: #252132; background: #fbf8f4; }* { box-sizing: border-box; }body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 0%, #ffe6d2 0, transparent 27rem), #fbf8f4; }.app { width: min(850px, calc(100% - 32px)); margin: auto; padding: 44px 0 64px; }.header, .dictionary-title, .entry-top, .save-row, .controls { display: flex; align-items: center; }.header, .dictionary-title { justify-content: space-between; gap: 16px; }.eyebrow { margin: 0 0 4px; font-size: .67rem; font-weight: 800; letter-spacing: .14em; color: #a46b56; }h1, h2, h3, p { margin-top: 0; }h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.06em; }h2 { margin-bottom: 0; font-size: 1.3rem; }.privacy, #entry-count { margin: 0; padding: 8px 11px; border-radius: 999px; color: #567260; background: #e2f3e8; font-size: .77rem; font-weight: 700; white-space: nowrap; }.recorder { margin-top: 28px; overflow: hidden; border: 1px solid #ded5cd; border-radius: 20px; background: #fff; box-shadow: 0 18px 55px #4e332114; }.camera-frame { position: relative; aspect-ratio: 16 / 9; background: #24212a; }#camera { width: 100%; height: 100%; display: block; object-fit: cover; transform: scaleX(-1); }.camera-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; color: #f5ece8; text-align: center; background: linear-gradient(135deg, #342b3788, #1a293088); }.camera-empty span { font-size: 3rem; }.camera-empty p { margin: 0; }.recording-badge { position: absolute; top: 15px; left: 15px; display: flex; gap: 7px; align-items: center; padding: 7px 10px; border-radius: 8px; color: #fff; background: #2f1620d9; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }.recording-badge i { width: 8px; height: 8px; border-radius: 50%; background: #ff4f60; animation: blink 1s infinite; }.recording-badge b { font-variant-numeric: tabular-nums; }@keyframes blink { 50% { opacity: .35; } }.controls { gap: 10px; padding: 15px; }button { padding: 11px 14px; border: 0; border-radius: 10px; font: inherit; font-weight: 750; cursor: pointer; transition: transform .15s, opacity .15s; }button:hover:not(:disabled) { transform: translateY(-1px); }button:disabled { opacity: .45; cursor: not-allowed; }.primary { color: white; background: #714f9d; }.secondary { border: 1px solid #dacfc6; color: #4a3a38; background: #fff; }.record { color: #fff; background: #d64d5d; }.record span { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: currentColor; }.record.is-recording { background: #692a36; }.record.is-recording span { border-radius: 2px; }.icon-button { margin-left: auto; padding: 9px 13px; color: #594d52; background: #f2ece7; font-size: 1.3rem; }.entry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding: 20px; border: 1px solid #ded5cd; border-radius: 16px; background: #fff; }.field { min-width: 0; }.field.word { grid-column: span 2; }label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 750; }em { margin-left: 3px; color: #c94a59; font-style: normal; font-size: .7rem; }input, textarea { width: 100%; border: 1px solid #d9d0ca; border-radius: 9px; padding: 10px; color: #27202a; background: #fffdfb; font: inherit; }textarea { resize: vertical; }.save-row { grid-column: span 2; justify-content: space-between; gap: 14px; padding-top: 2px; }.save-row span { color: #847b7a; font-size: .8rem; }.dictionary { margin-top: 44px; }.search { position: relative; display: block; margin-top: 18px; }.search span { position: absolute; top: 9px; left: 12px; color: #8e7e78; font-size: 1.35rem; }.search input { padding-left: 38px; background: #fff; }.entries { display: grid; gap: 13px; margin-top: 17px; }.entry { display: grid; grid-template-columns: 190px 1fr; overflow: hidden; border: 1px solid #ded5cd; border-radius: 14px; background: #fff; }.clip { width: 100%; height: 130px; object-fit: cover; background: #25212a; }.entry-content { padding: 14px 16px; }.entry-top { justify-content: space-between; gap: 8px; }.entry h3 { margin-bottom: 5px; font-size: 1.05rem; }.entry-meaning { margin-bottom: 9px; color: #635a62; font-size: .87rem; }.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }.tag-list span { padding: 3px 7px; border-radius: 6px; color: #775c8e; background: #f0e8f5; font-size: .72rem; }.entry time { display: block; margin-top: 9px; color: #9a908b; font-size: .7rem; }.delete { padding: 5px 8px; color: #aa5060; background: #fdebed; font-size: .72rem; }.no-entries { margin: 35px 0; color: #8a7e79; text-align: center; }@media (max-width: 560px) { .app { width: min(100% - 24px, 850px); padding-top: 28px; }.entry-form { grid-template-columns: 1fr; }.field.word, .save-row { grid-column: auto; }.save-row { align-items: flex-start; flex-direction: column; }.entry { grid-template-columns: 1fr; }.clip { height: auto; aspect-ratio: 16 / 9; }.header { align-items: flex-start; flex-direction: column; } }