:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; color: #252525; background: #fbfbfa; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { border: 1px solid #252525; border-radius: 5px; background: #252525; color: #fff; padding: 13px 23px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
button:hover { background: #414141; }
button:active { transform: scale(.98); }
button:disabled { opacity: .65; cursor: wait; }
button:focus-visible, a:focus-visible { outline: 3px solid #8a620c; outline-offset: 4px; }
input { width: 100%; min-width: 0; background: #fff; color: #252525; border: 1px solid #9c9c96; border-radius: 5px; padding: 14px 16px; font-size: 16px; line-height: 1.4; }
input::placeholder { color: #696963; }
input:focus { outline: 2px solid #8a620c; outline-offset: 2px; }
#home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(60px, 16dvh, 160px) 24px 22px; }
.home-content { width: min(100%, 620px); margin: 0 auto; padding: 0 0 30px; }
.disclaimer { width: min(100%, 620px); margin: auto auto 0; padding-top: 36px; color: #696963; font-size: 12px; line-height: 1.6; text-align: center; }
.disclaimer p { margin: 0; }
.logo { display: block; width: min(100%, 320px); height: auto; margin: 0 auto 28px; }
#open-form { transform: translateX(clamp(0px, calc(50vw - 334px), 80px)); }
label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.message { margin: 12px 0 0; min-height: 23px; font-size: 14px; line-height: 1.5; color: #943924; }
#browser { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.toolbar { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #eaeaea; background: #fbfbfa; }
.quiet { border-color: #b5b5ae; background: transparent; color: #252525; padding: 9px 12px; font-size: 13px; }
.quiet:hover { background: #eeeee9; }
#browser-form { display: flex; flex: 1; min-width: 0; gap: 8px; }
#browser-form input { padding: 9px 12px; }
#go-button { padding: 9px 18px; font-size: 14px; }
.browser-message { color: #943924; background: #fbf3ee; margin: 0; padding: 10px 18px; font-size: 14px; }
#frame-container { flex: 1; min-height: 0; background: #fff; }
#frame-container iframe { display: block; width: 100%; height: 100%; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { text-align: center; padding: 16px; }
@media (max-width: 640px) {
  #home { padding: clamp(48px, 13dvh, 120px) 20px 20px; }
  .logo { width: min(100%, 280px); margin-bottom: 24px; }
  #open-form { transform: none; }
  .input-row { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; gap: 7px; padding: 8px; }
  #browser-form { flex-basis: 100%; order: 2; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }