/* ============================================================
   Vyzma.ai — base styles
   (ported 1:1 from the Claude Design prototype's <helmet> block)
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #0B0D12;
  color: #EDEAE3;
  font-family: 'Instrument Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #FF5C2A; color: #0B0D12; }
a { color: #FF5C2A; text-decoration: none; transition: color .3s; }
a:hover { color: #EDEAE3; }
button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #5b6373; }
.char { display: inline-block; will-change: transform; }

@keyframes vyScroll {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   Interaction states
   These replace the prototype's `style-hover` / `style-focus`
   design-time hints with real CSS. Keyboard focus uses
   :focus-visible so focus rings only show for keyboard users
   (the brief requires visible keyboard focus states).
   `!important` is only used where the resting value is set via
   an inline style attribute that would otherwise win.
   ============================================================ */
[data-fx="3"]:focus-visible { outline: 2px solid #FF5C2A; outline-offset: 3px; }
[data-fx="4"]:focus-visible { outline: 2px solid #FF5C2A; outline-offset: 4px; }
[data-fx="field"]:focus     { border-bottom-color: #FF5C2A !important; }

[data-hv="white"]:hover  { color: #EDEAE3 !important; }
[data-hv="accent"]:hover { color: #FF5C2A !important; }
[data-hv="ink"]:hover    { color: #0B0D12 !important; }
[data-hv="border"]:hover { border-color: #EDEAE3 !important; }
[data-hv="lift"]:hover   { transform: translateY(-6px); border-color: #FF5C2A !important; }