/* The Lab on the paper: the terminal (ice panel, mono, block cursor) and the request form's classes (the script reads them). */
.lab-term { max-width: 760px; padding: 40px; font-family: var(--mono); }
.lab-term:focus-within { border-color: var(--ink-soft); }
.lab-term__screen { position: relative; overflow: hidden; }
.lab-term__scan { position: absolute; inset: -24px; pointer-events: none; z-index: 0; background: repeating-linear-gradient(to bottom, rgba(229, 227, 220, .03) 0, rgba(229, 227, 220, .03) 1px, transparent 1px, transparent 3px); }
.lab-term__banner { position: relative; z-index: 1; margin: 0 0 24px; background: none; border: 0; padding: 0; font: 12px/1.7 var(--mono); letter-spacing: .04em; color: var(--muted); white-space: pre-wrap; }
.lab-term__form { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 15px; }
.lab-term__label { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.lab-term__inputline:focus-within { box-shadow: inset 0 -1px var(--line-strong); }
.lab-term__inputline { position: relative; display: inline-flex; align-items: center; flex: 1 1 12rem; min-width: 0; min-height: 44px; cursor: text; }
.lab-term__mirror { position: absolute; left: -9999px; top: 0; white-space: pre; font: 16px var(--mono); letter-spacing: .32em; visibility: hidden; }
.lab-term__input { flex: 0 0 auto; width: .6ch; min-width: 0; max-width: calc(100% - 9px); background: none; border: 0; border-radius: 0; outline: none; color: var(--ink); font: 16px var(--mono); letter-spacing: .32em; padding: 0; margin: 0; caret-color: transparent; }
.lab-term__input:focus-visible { outline: none; }
.lab-term__cursor { flex-shrink: 0; display: inline-block; width: 9px; height: 1.05em; background: var(--ink); vertical-align: middle; animation: lab-blink 1s steps(1) infinite; }
.lab-term__key { border: 1px solid var(--ink); border-radius: 3px; background: none; color: var(--ink); font: 12px var(--mono); letter-spacing: .1em; padding: 9px 16px; min-height: 44px; cursor: pointer; transition: color 160ms, border-color 160ms; }
.lab-term__key:hover, .lab-term__key:focus-visible { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.lab-term__key:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.lab-term__key:active { transform: translateY(1px); }
.lab-term__status { position: relative; z-index: 1; margin: 24px 0 0; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lab-term__status[data-state="ok"] { color: var(--ink); }
.lab-term__status[data-state="err"] { color: var(--failure); }
.lab-term__status.is-shake { animation: lab-shake .32s linear both; }
@keyframes lab-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lab-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.lab-req-lead { margin: 40px 0 0; }
.lab-req-toggle { font: inherit; font-size: 14px; }
.lab-req-toggle[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); }
.lab-reqwrap[hidden] { display: none; }
.lab-op { display: block; margin: 24px 0 4px; font-size: 12px; color: var(--muted); }
.lab-op:first-of-type { margin-top: 0; }
.lab-field { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; min-height: 48px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); transition: border-color 160ms; }
.lab-field:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-color: var(--blue); }
.lab-field[aria-invalid="true"] { border-color: var(--failure); }
.lab-field::placeholder { color: var(--muted); opacity: 1; }
textarea.lab-field { resize: vertical; min-height: 96px; }
.lab-err { margin: 6px 0 0; font-size: 12px; color: var(--failure); }
.lab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lab-ts { margin: 24px 0 0; min-height: 0; }
.lab-row { margin: 24px 0 0; }
.lab-send { display: inline-block; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0 0 9px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; min-height: 44px; transition: color 160ms, border-color 160ms; }
.lab-send::after { content: " \2192"; }
.lab-send:hover, .lab-send:focus-visible { color: var(--blue); border-color: var(--blue); }
.lab-send:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.lab-send[disabled] { opacity: .55; cursor: default; }
.lab-status { margin: 24px 0 0; font-size: 15px; color: var(--ink); }
.lab-status[data-state="ok"] { color: var(--blue); }
.lab-status[data-state="err"] { color: var(--failure); }
.lab-fallback { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.lab-fallback a { color: var(--ink); }
.lab-soon { margin-top: 24px; }
.lab-signout { margin: 64px 0 0; }
.lab-signout__btn { font: inherit; font-size: 14px; }
@media (max-width: 700px) { .lab-term { padding: 24px; } .lab-term__inputline { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .lab-term__cursor { animation: none; opacity: 1; } .lab-term__status.is-shake { animation: none; } }