.ht { --ht-accent: #9bffb0; --ht-bright: #d6ffdf; --ht-muted: #6c8577; --ht-line: #203129; --ht-bg: #080e0b; position: fixed; inset: 0; z-index: 60; background: var(--ht-bg); color: #b3c5b9; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; display: flex; flex-direction: column; padding: 0 32px; font-size: 11px; letter-spacing: .035em; color-scheme: dark; overflow: hidden; }
.ht[data-theme="amber"] { --ht-accent: #ffca7d; --ht-bright: #ffe6bb; --ht-muted: #96846a; --ht-line: #383020; --ht-bg: #100d08; }
.ht[data-theme="ice"] { --ht-accent: #8bdcff; --ht-bright: #d3f3ff; --ht-muted: #6f8597; --ht-line: #24313c; --ht-bg: #080d12; }
.ht[data-theme="violet"] { --ht-accent: #c6a4ff; --ht-bright: #eee1ff; --ht-muted: #8d7f9e; --ht-line: #30263e; --ht-bg: #0e0915; }
.ht[data-theme="rose"] { --ht-accent: #ffa6bf; --ht-bright: #ffe1ea; --ht-muted: #9f7e89; --ht-line: #3c2630; --ht-bg: #140a0e; }
.ht .ht-violet { background: #c6a4ff; }
.ht .ht-rose { background: #ffa6bf; }
.ht *, .ht *::before, .ht *::after { box-sizing: border-box; }
.ht button, .ht select { font: inherit; cursor: pointer; }
.ht button { color: inherit; border: 0; background: transparent; }
.ht a { color: inherit; text-decoration: none; }
.ht button:hover, .ht a:hover { color: var(--ht-accent); }
.ht button:focus-visible, .ht a:focus-visible, .ht select:focus-visible { outline: 1px solid var(--ht-accent); outline-offset: 5px; }
.ht-header { height: 98px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.ht-brand { display: flex; align-items: center; gap: 13px; color: var(--ht-bright) !important; font-size: 24px; letter-spacing: .19em; font-weight: 700; line-height: 1.25; }
.ht-brand-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ht-accent); font-size: 30px; color: var(--ht-accent); font-weight: 400; letter-spacing: 0; }
.ht-header-status { display: flex; gap: 13px; align-items: center; font-size: 10px; color: var(--ht-accent); }
.ht-header-status > span:last-child { color: var(--ht-muted); }
.ht-divider { color: var(--ht-line); padding: 0 9px; }
.ht .ht-icon-button { font-size: 26px; width: 40px; height: 40px; border: 1px solid var(--ht-line); }
.ht-dot { display: inline-block; background: var(--ht-accent); height: 5px; width: 5px; border-radius: 50%; box-shadow: 0 0 9px color-mix(in srgb, var(--ht-accent) 35%, transparent); flex-shrink: 0; }
.ht-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 286px; border: 1px solid var(--ht-line); flex: 1; min-height: 0; }
.ht-terminal { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: radial-gradient(ellipse at 30% 45%, color-mix(in srgb, var(--ht-accent) 3%, transparent), transparent 70%); }
.ht-tabbar { min-height: 49px; border-bottom: 1px solid var(--ht-line); display: flex; align-items: stretch; justify-content: space-between; }
.ht-file { display: flex; align-items: center; gap: 12px; padding: 0 21px; border-right: 1px solid var(--ht-line); border-top: 1px solid var(--ht-accent); color: var(--ht-bright); margin-top: -1px; }
.ht-file > span:first-child { font-size: 22px; color: var(--ht-accent); }
.ht-file .ht-dot { width: 4px; height: 4px; margin-left: 12px; }
.ht-tab-label { color: var(--ht-muted); align-self: center; padding-right: 20px; font-size: 9px; letter-spacing: .1em; }
.ht-code-area { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 25px 25px 50px; scrollbar-width: thin; scrollbar-color: var(--ht-line) transparent; cursor: text; }
.ht-boot { font-size: 11px; line-height: 1.9; color: var(--ht-muted); margin-bottom: 28px; }
.ht-boot > span:first-child { color: var(--ht-accent); }
.ht-boot-prompt { color: var(--ht-bright); }
.ht-code { font-size: 13px; line-height: 1.85; letter-spacing: 0; color: var(--ht-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--ht-accent) 12%, transparent); }
.ht-code-line { display: flex; min-height: 24px; }
.ht-line-number { width: 44px; flex-shrink: 0; user-select: none; color: var(--ht-muted); opacity: .55; font-size: 10px; padding-top: 3px; }
.ht-source { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.ht-comment { color: var(--ht-muted); }
.ht-string { color: var(--ht-bright); }
.ht-number { color: #deb78e; }
.ht-keyword { color: #77bca6; }
.ht-cursor { display: inline-block; width: 8px; height: 16px; background: var(--ht-accent); vertical-align: -3px; margin-left: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--ht-accent) 40%, transparent); animation: ht-blink 1.1s step-end infinite; }
.ht-terminal-status { display: flex; justify-content: flex-end; padding: 12px 19px; border-top: 1px solid var(--ht-line); font-size: 9px; color: var(--ht-muted); gap: 10px; }
.ht-sidebar { border-left: 1px solid var(--ht-line); display: flex; flex-direction: column; overflow: hidden; }
.ht-panel { padding: 20px; border-bottom: 1px solid var(--ht-line); }
.ht-panel-heading { display: flex; justify-content: space-between; font-size: 9px; color: var(--ht-muted); letter-spacing: .08em; }
.ht-panel-heading > span { font-size: 8px; }
.ht-accent, .ht-small-dot { color: var(--ht-accent); }
.ht-radar { color: var(--ht-accent); text-align: center; }
.ht-radar svg { display: block; width: 100%; max-height: 220px; }
.ht-radar-grid { stroke: var(--ht-line); fill: none; stroke-width: .7; }
.ht-network path { stroke: var(--ht-accent); stroke-width: .65; opacity: .3; fill: none; }
.ht-network circle { fill: var(--ht-accent); }
.ht-sweep { transform-origin: 130px 110px; stroke: var(--ht-accent); opacity: .4; }
.ht-radar > span { color: var(--ht-muted); font-size: 8px; letter-spacing: .09em; }
.ht-throughput { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; }
.ht-throughput strong { font-size: 42px; line-height: 1; color: var(--ht-bright); font-weight: 400; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ht-throughput > span { font-size: 8px; }
.ht-bars { display: flex; height: 51px; gap: 3px; align-items: flex-end; }
.ht-bars i { flex: 1; background: var(--ht-accent); opacity: .4; transition: height .25s; min-height: 3px; }
.ht-metric-caption { display: flex; justify-content: space-between; font-size: 8px; color: var(--ht-muted); margin-top: 10px; }
.ht-log-panel { display: flex; flex-direction: column; flex: 1; min-height: 80px; border: 0; }
.ht-events { margin-top: 18px; flex: 1; overflow: hidden; font-size: 9px; line-height: 2.2; }
.ht-event { display: flex; gap: 10px; }
.ht-event time { color: var(--ht-muted); font-size: 8px; }
.ht-event span { color: var(--ht-accent); }
.ht-session { display: flex; justify-content: space-between; border-top: 1px solid var(--ht-line); padding-top: 14px; margin-top: 12px; font-size: 8px; color: var(--ht-muted); }
.ht-controls { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 20px; }
.ht-settings, .ht-actions { display: flex; align-items: center; gap: 25px; }
.ht-settings label { display: flex; gap: 12px; align-items: center; color: var(--ht-muted); font-size: 9px; }
.ht select { background: transparent; border: 1px solid var(--ht-line); padding: 8px 24px 8px 10px; color: #b3c5b9; font-size: 10px; border-radius: 3px; }
.ht select option { background: var(--ht-bg); }
.ht-palettes { display: flex; gap: 10px; }
.ht .ht-swatch { width: 12px; height: 12px; border-radius: 50%; padding: 0; }
.ht-swatch[aria-pressed="true"] { outline: 1px solid var(--ht-muted); outline-offset: 4px; }
.ht .ht-green { background: #9bffb0; }.ht .ht-amber { background: #ffca7d; }.ht .ht-ice { background: #8bdcff; }
.ht-actions { font-size: 10px; color: var(--ht-muted); gap: 20px; }
.ht-bottom { min-height: 42px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; font-size: 8px; color: var(--ht-muted); }
.ht-bottom button { padding: 0; }.ht-bottom button span { opacity: .7; padding-left: 5px; }
.ht-fiction { font-size: 7px; white-space: nowrap; padding-top: 1px; }
.ht-fiction a { color: #9aaa9f; }
.ht .ht-keyboard-input { position: absolute; left: 40px; bottom: 1px; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; resize: none; font-size: 16px; }
.ht-mobile-keyboard { display: none; }
.ht-overlay { position: absolute; inset: 0; z-index: 5; background: #030906de; backdrop-filter: blur(8px); display: grid; place-items: center; }
.ht [hidden] { display: none !important; }
.ht-access-card { text-align: center; color: var(--ht-accent); border: 1px solid currentColor; padding: 45px 60px; max-width: calc(100% - 40px); background: var(--ht-bg); box-shadow: 0 0 100px color-mix(in srgb, var(--ht-accent) 7%, transparent); }
.ht-overlay[data-denied="true"] .ht-access-card { color: #ff7979; }
.ht-access-symbol { font-size: 48px; margin-bottom: 15px; }
.ht-access-card p { font-size: 9px; letter-spacing: .14em; margin: 0 0 20px; }
.ht-access-card h2 { font: inherit; font-size: clamp(23px, 4vw, 48px); letter-spacing: -.04em; margin: 0 0 15px; }
.ht-access-card > span { color: var(--ht-muted); font-size: 10px; line-height: 1.8; }
.ht .ht-access-card button { display: block; margin: 30px auto 0; padding: 12px 0 0; border-top: 1px solid var(--ht-line); font-size: 10px; }
.ht-access-card button span { color: var(--ht-muted); margin-left: 30px; }
@keyframes ht-blink { 50% { opacity: 0; } }
@media (min-width: 1600px) { .ht { padding: 0 48px; }.ht-header { height: 110px; }.ht-workspace { grid-template-columns: minmax(0, 1fr) 320px; }.ht-code { font-size: 15px; }.ht-code-area { padding: 32px; } }
@media (max-height: 800px) { .ht-header { height: 76px; }.ht-panel { padding: 15px; }.ht-radar svg { max-height: 160px; }.ht-controls { min-height: 64px; }.ht-bottom { min-height: 32px; }.ht-events { margin-top: 8px; }}
@media (max-width: 1000px) { .ht { padding: 0 20px; }.ht-workspace { grid-template-columns: minmax(0, 1fr) 230px; }.ht-fiction { display: none; }.ht-tab-label { display: none; }.ht-settings { gap: 20px; }.ht-code-area { padding: 20px 15px 35px; } }
@media (max-width: 720px) { .ht { padding: 0 14px; }.ht-sidebar { display: none; }.ht-workspace { grid-template-columns: minmax(0, 1fr); }.ht-header { height: 76px; }.ht-brand { font-size: 20px; }.ht-brand-icon { width: 32px; height: 32px; font-size: 24px; }.ht-header-status { font-size: 8px; gap: 7px; }.ht-header-status > span { display: none; }.ht-settings { gap: 16px; }.ht-settings label { flex-direction: column; align-items: flex-start; gap: 6px; }.ht-controls { flex-wrap: wrap; padding: 16px 0; gap: 20px; }.ht select { padding: 7px 4px; }.ht-palettes { gap: 10px; }.ht-actions { gap: 18px; font-size: 9px; }.ht-mobile-keyboard { display: inline-block; }.ht-bottom { font-size: 7px; min-height: 34px; }.ht-bottom button span { display: none; }.ht-code { font-size: 11px; }.ht-line-number { width: 32px; }.ht-boot { font-size: 9px; }.ht-access-card { padding: 30px 20px; } }
@media (max-height: 500px) { .ht-header { height: 50px; }.ht-sidebar { display: none; }.ht-workspace { grid-template-columns: 1fr; }.ht-controls { min-height: 50px; padding: 8px 0; }.ht-bottom { min-height: 24px; }.ht-boot { margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .ht *, .ht *::before, .ht *::after { animation: none !important; transition: none !important; } }

/* Fullscreen presents the workspace without the simulation controls or hints. */
.ht:fullscreen { padding-bottom: 24px; }
.ht:fullscreen .ht-controls,
.ht:fullscreen .ht-bottom { display: none; }


.ht-controls { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.ht-settings { flex-wrap: wrap; }
@media (max-width: 480px) {
  .ht-header-status { display: none; }
  .ht-brand { font-size: 18px; letter-spacing: .12em; }
}


.ht .ht-light { background: #f4f6f8; box-shadow: inset 0 0 0 1px #9ba6b1; }
.ht[data-theme="light"] {
  --ht-accent: #216c62;
  --ht-bright: #243542;
  --ht-muted: #606f7b;
  --ht-line: #cdd5dc;
  --ht-bg: #f4f6f8;
  color: #344454;
  color-scheme: light;
}
.ht[data-theme="light"] .ht-terminal { background: #ffffff; }
.ht[data-theme="light"] .ht-code { color: #344454; text-shadow: none; }
.ht[data-theme="light"] .ht-keyword { color: #7542a6; }
.ht[data-theme="light"] .ht-string { color: #a04419; }
.ht[data-theme="light"] .ht-number { color: #195ca3; }
.ht[data-theme="light"] .ht-line-number { opacity: 1; }
.ht[data-theme="light"] select { color: #344454; background: #ffffff; }
.ht[data-theme="light"] .ht-fiction a { color: #435766; }
.ht[data-theme="light"] .ht-cursor,
.ht[data-theme="light"] .ht-dot { box-shadow: none; }
.ht[data-theme="light"] .ht-overlay { background: #e7edf1de; }
.ht[data-theme="light"] .ht-overlay[data-denied="true"] .ht-access-card { color: #ad3039; }