:root { --accent: #FFFFFF; --ink: #0A0A0A; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: #0A0A0A; color: #F2F2F0; font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #F2F2F0; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: rgba(255,255,255,.92); color: #0A0A0A; }
::-webkit-scrollbar { width: 10px; background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }
input, textarea, select, button { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255,255,255,.45) !important; }

[data-editing="true"] [data-block] { outline: 1px dashed rgba(255,255,255,.35); outline-offset: 6px; cursor: text; }
[data-editing="true"] [data-block]:hover, [data-editing="true"] [data-block]:focus { outline: 1px dashed var(--accent); }
[data-editing="true"] [data-media] { cursor: pointer; }
[data-editing="true"] [data-media]:hover { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* case preview hover overlay (pure-CSS replacement for JS hover state) */
.case-hover-overlay { opacity: 0; transition: opacity .2s; pointer-events: none; }
.case-media:hover .case-hover-overlay { opacity: 1; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pan { to { background-position: 640px 0; } }
@keyframes panY { to { background-position: 0 420px; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes drawerIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { width: 0; } to { width: 100%; } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes shrinkBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes popIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 60% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes floatUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes blurUp { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }