@font-face { font-family:'Inter'; src:local('Inter'),url(/Inter.woff2) format('woff2'); }

.material-symbols-outlined {
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; font-size:24px; line-height:1;
  letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased;
}

.custom-scroll::-webkit-scrollbar        { width: 6px; }
.custom-scroll::-webkit-scrollbar-track  { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb  { background: #3f3f46; border-radius: 9999px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #52525b; }
.custom-scroll { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }

.prose h2     { font-size:1.1rem; font-weight:700; margin-top:1.5rem; margin-bottom:.5rem; color:#e4e4e7; }
.prose p,
.prose li     { color:#a1a1aa; font-size:.9rem; line-height:1.7; }
.prose ul     { list-style:disc; padding-left:1.25rem; }
.prose li     { margin-bottom:.25rem; }

#result-screen        { transform: translateY(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); }
#result-screen.shown  { transform: translateY(0); }

@keyframes pulse-urgent { 0%,100%{opacity:1} 50%{opacity:.45} }
.timer-urgent { animation: pulse-urgent 0.7s ease-in-out infinite; }

.screen-fade { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

#resize-handle {
  flex-shrink: 0;
  background: #27272a;
  transition: background 0.15s;
  position: relative;
  z-index: 10;
}
#resize-handle:hover,
#resize-handle.dragging { background: #3f3f46; }

@media (min-width: 768px) {
  #resize-handle { width: 5px; height: 100%; cursor: col-resize; }
  #resize-handle::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 3px; height: 32px; border-radius: 2px; background: #52525b;
  }
}
@media (max-width: 767px) {
  #resize-handle { height: 5px; width: 100%; cursor: row-resize; }
  #resize-handle::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 3px; width: 32px; border-radius: 2px; background: #52525b;
  }
}