| |
| :root { |
| --n-bg: #f2f4f8; |
| --n-surface: #ffffff; |
| --n-ink: #131925; |
| --n-muted: #586276; |
| --n-line: #d6dce6; |
| --n-accent: #2343e0; |
| --n-accent-soft: #e3e8ff; |
| --n-signal: #c97a00; |
| --n-signal-soft: #fff1d9; |
| --n-tail: #b9c1cf; |
| --n-tok-a: #e6e9f0; --n-tok-b: #d3d8e3; |
| --n-gen-a: #e1e7ff; --n-gen-b: #bfcbff; |
| --n-fmt: #1d2433; --n-fmt-ink: #f2f4f8; |
| --n-ok: #2f9e6a; --n-err: #d0453b; |
| --n-sys: #7a3fc4; --n-sys-a: #efe6fb; --n-sys-b: #dfcdf6; |
| --n-font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; |
| --n-font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; |
| --n-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; |
| |
| } |
| .dark { |
| --n-bg: #0e131c; --n-surface: #161d29; --n-ink: #e8ecf4; --n-muted: #9ba5b9; --n-line: #2a3445; |
| --n-accent: #8aa0ff; --n-accent-soft: #1f2a4d; --n-signal: #f2b84b; --n-signal-soft: #3a2c12; --n-tail: #4a5468; |
| --n-tok-a: #222b3a; --n-tok-b: #2d3849; --n-gen-a: #23305a; --n-gen-b: #33447a; |
| --n-fmt: #e8ecf4; --n-fmt-ink: #0e131c; |
| --n-sys: #c39bf5; --n-sys-a: #2e2142; --n-sys-b: #3e2c5a; |
| color-scheme: dark; |
| } |
| #nte, #nte * { box-sizing: border-box; } |
| |
| body, gradio-app, .gradio-container, .main, .app, .contain { background: var(--n-bg) !important; } |
| .gradio-container { max-width: none !important; padding: 0 !important; margin: 0 !important; } |
| .gradio-container .main, .gradio-container .main > .wrap, .gradio-container .contain { padding: 0 !important; max-width: none !important; } |
| footer { display: none !important; } |
| #nte { color: var(--n-ink); font-family: var(--n-font-body); font-size: 17px; line-height: 1.5; } |
| #nte [hidden] { display: none !important; } |
| #nte .nte-wrap { max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); padding-block: 22px 40px; display: grid; gap: 20px; } |
| #nte header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 32px; } |
| #nte .eyebrow { font-family: var(--n-font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-muted); margin: 0 0 6px; } |
| #nte h1 { font-family: var(--n-font-display); font-weight: 750; font-size: clamp(30px, 4vw, 52px); line-height: 1.02; margin: 0; letter-spacing: -0.01em; } |
| #nte .hright { display: grid; gap: 8px; justify-items: start; max-width: 56ch; } |
| #nte .lede { margin: 0; color: var(--n-muted); font-size: 16px; } |
| #nte .status { font-family: var(--n-font-mono); font-size: 13px; color: var(--n-muted); display: inline-flex; align-items: center; gap: 8px; } |
| #nte .status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--n-signal); animation: pulse 1.2s ease-in-out infinite; } |
| #nte .status.ok .dot { background: var(--n-ok); animation: none; } |
| #nte .status.err .dot { background: var(--n-err); animation: none; } |
| @keyframes pulse { 50% { opacity: .3; } } |
| #nte button { font: inherit; color: inherit; } |
| #nte button:focus-visible, #nte textarea:focus-visible, #nte input:focus-visible { outline: 3px solid var(--n-accent); outline-offset: 2px; } |
| #nte button:disabled { opacity: .45; cursor: default; } |
| #nte .chips { display: flex; flex-wrap: wrap; gap: 8px; } |
| #nte .chip { font-size: 15px; border: 1px solid var(--n-line); background: var(--n-surface); border-radius: 999px; padding: 6px 14px; cursor: pointer; } |
| #nte .chip:hover { border-color: var(--n-accent); } |
| #nte .chip .m { font-family: var(--n-font-mono); font-size: 11.5px; color: var(--n-muted); margin-left: 6px; } |
| #nte .seg { display: inline-flex; gap: 6px; flex-wrap: wrap; } |
| #nte .seg button { font-size: 15px; border: 1px solid var(--n-line); background: var(--n-surface); border-radius: 999px; padding: 7px 15px; cursor: pointer; } |
| #nte .seg button[aria-pressed="true"] { background: var(--n-ink); color: var(--n-bg); border-color: var(--n-ink); } |
| #nte .input { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 16px; padding: 16px 18px 18px; display: grid; gap: 12px; } |
| #nte .input-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } |
| #nte .input-head h2, #nte .panel h2 { font-family: var(--n-font-display); font-size: 21px; font-weight: 700; margin: 0; } |
| #nte textarea { width: 100%; resize: vertical; font-family: var(--n-font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; color: var(--n-ink); background: var(--n-bg); border: 1px solid var(--n-line); border-radius: 10px; padding: 12px 14px; min-height: 2.4em; } |
| #nte .toks-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } |
| #nte .toks-head .n { font-family: var(--n-font-display); font-size: 30px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; } |
| #nte .toks-head .u { color: var(--n-muted); font-size: 15px; } |
| #nte .toks-head .hov { font-family: var(--n-font-mono); font-size: 13.5px; color: var(--n-muted); margin-left: auto; } |
| #nte .toks { font-family: var(--n-font-mono); font-size: 16px; line-height: 2; overflow-wrap: anywhere; min-height: 2em; } |
| #nte .tok { display: inline-block; padding: 0 3px; margin: 0 1px 3px 0; border-radius: 4px; line-height: 1.55; white-space: pre; background: var(--n-tok-a); } |
| #nte .tok.alt { background: var(--n-tok-b); } |
| #nte .tok.gen { background: var(--n-gen-a); } |
| #nte .tok.gen.alt { background: var(--n-gen-b); } |
| #nte .tok.special { background: var(--n-fmt); color: var(--n-fmt-ink); font-size: .86em; } |
| #nte .tok.partial { outline: 1px dashed var(--n-muted); outline-offset: -1px; } |
| #nte .ws { opacity: .5; } |
| #nte .sentence { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 16px; padding: 20px 24px; font-family: var(--n-font-display); font-weight: 600; font-size: clamp(24px, 3vw, 38px); line-height: 1.3; min-height: 2.8em; overflow-wrap: anywhere; white-space: pre-wrap; } |
| #nte .sentence .who { display: block; font-family: var(--n-font-mono); font-weight: 400; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-muted); margin-top: 6px; } |
| #nte .sentence .who:first-child { margin-top: 0; } |
| #nte .sentence .prompt { color: var(--n-muted); font-weight: 500; } |
| #nte .sentence .gen { color: var(--n-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; text-decoration-color: var(--n-gen-b); text-decoration-skip-ink: none; cursor: pointer; border-radius: 2px; } |
| #nte .sentence .gen.alt { text-decoration-color: var(--n-accent); } |
| #nte .sentence .gen:hover { background: var(--n-accent-soft); } |
| #nte .sentence .gen.new { animation: pop .4s ease; } |
| #nte .sentence .sp { font-family: var(--n-font-mono); font-size: .5em; vertical-align: .3em; background: var(--n-fmt); color: var(--n-fmt-ink); border-radius: 5px; padding: 1px 6px; } |
| @keyframes pop { from { background: var(--n-signal-soft); } to { background: transparent; } } |
| #nte .caret { display: inline-block; width: .45em; height: .95em; vertical-align: -0.1em; background: var(--n-signal); margin-left: 3px; border-radius: 2px; animation: blink 1.1s steps(1) infinite; } |
| #nte .caret.busy { animation: pulse .6s ease-in-out infinite; } |
| @keyframes blink { 50% { opacity: 0; } } |
| #nte .msg { font-size: 15.5px; background: var(--n-signal-soft); border-left: 4px solid var(--n-signal); border-radius: 6px; padding: 8px 12px; } |
| #nte .msg.err { border-left-color: var(--n-err); } |
| #nte .board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px; align-items: start; } |
| #nte .panel { background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 16px; padding: 18px 20px 20px; display: grid; gap: 14px; min-width: 0; } |
| #nte .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } |
| #nte .panel-head small { font-family: var(--n-font-mono); font-size: 13px; color: var(--n-muted); } |
| #nte .strip-wrap { display: grid; gap: 6px; } |
| #nte .strip { position: relative; display: flex; height: 38px; border-radius: 8px; overflow: hidden; background: var(--n-tail); } |
| #nte .strip span { height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--n-font-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; border-right: 1px solid var(--n-surface); transition: width .3s ease; } |
| #nte .strip span:nth-child(odd) { background: var(--n-accent-soft); } |
| #nte .strip span:nth-child(even) { background: color-mix(in srgb, var(--n-accent-soft) 55%, var(--n-surface)); } |
| #nte .strip span.top { background: var(--n-accent); color: var(--n-surface); } |
| #nte .strip span.tail { background: var(--n-tail); } |
| #nte .pointer { position: absolute; top: 0; bottom: 0; width: 4px; background: var(--n-signal); border-radius: 2px; transform: translateX(-2px); transition: left .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 2px var(--n-surface); } |
| #nte .strip-cap { font-size: 14px; color: var(--n-muted); } |
| #nte .bars { display: grid; gap: 4px; } |
| #nte .bar { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; border: 0; background: none; text-align: left; padding: 3px 6px; border-radius: 8px; cursor: pointer; width: 100%; } |
| #nte .bar:hover:not(:disabled) { background: var(--n-bg); } |
| #nte .bar .lab { font-family: var(--n-font-mono); font-size: 18px; white-space: pre; overflow: hidden; text-overflow: ellipsis; } |
| #nte .bar .lab .ws { color: var(--n-muted); } |
| #nte .bar .track { position: relative; height: 22px; background: var(--n-bg); border-radius: 5px; overflow: hidden; } |
| #nte .bar .ghost { position: absolute; inset: 0 auto 0 0; border: 2px dashed var(--n-muted); border-radius: 5px; opacity: .55; } |
| #nte .bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--n-accent); border-radius: 5px; transition: width .3s ease; min-width: 2px; } |
| #nte .bar.top .fill { background: var(--n-signal); } |
| #nte .bar .pct { font-family: var(--n-font-mono); font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; } |
| #nte .bar.tailrow { cursor: default; } |
| #nte .bar.tailrow .lab { font-family: var(--n-font-body); font-size: 15px; color: var(--n-muted); white-space: normal; } |
| #nte .bar.tailrow .fill { background: var(--n-tail); } |
| #nte .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--n-muted); } |
| #nte .legend span { display: inline-flex; align-items: center; gap: 6px; } |
| #nte .sw { width: 22px; height: 12px; border-radius: 3px; display: inline-block; background: var(--n-accent); } |
| #nte .sw.ghost { background: none; border: 2px dashed var(--n-muted); } |
| #nte .sw.top { background: var(--n-signal); } |
| #nte .placeholder { color: var(--n-muted); font-size: 16px; padding: 24px 0; } |
| #nte .side { display: grid; gap: 18px; align-content: start; } |
| #nte .temp-read { display: flex; align-items: baseline; gap: 12px; } |
| #nte .temp-read .t { font-family: var(--n-font-display); font-weight: 750; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; } |
| #nte .temp-read .what { color: var(--n-muted); font-size: 16px; } |
| #nte input[type="range"] { width: 100%; accent-color: var(--n-accent); height: 28px; } |
| #nte .ticks { display: flex; justify-content: space-between; font-family: var(--n-font-mono); font-size: 12.5px; color: var(--n-muted); } |
| #nte .explain { font-size: 15px; color: var(--n-muted); margin: 0; } |
| #nte .ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } |
| #nte .ctrl button { border: 1px solid var(--n-line); background: var(--n-surface); border-radius: 10px; padding: 10px 12px; text-align: left; display: grid; gap: 1px; cursor: pointer; } |
| #nte .ctrl button:hover:not(:disabled) { border-color: var(--n-accent); } |
| #nte .ctrl button b { font-weight: 600; font-size: 16px; } |
| #nte .ctrl kbd { font-family: var(--n-font-mono); font-size: 12px; color: var(--n-muted); } |
| #nte .ctrl .primary { background: var(--n-ink); color: var(--n-bg); border-color: var(--n-ink); } |
| #nte .ctrl .primary kbd { color: var(--n-bg); opacity: .7; } |
| #nte .explain kbd { font-family: var(--n-font-mono); font-size: 12.5px; border: 1px solid var(--n-line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; } |
| #nte .foot { color: var(--n-muted); font-size: 14px; margin: 0; max-width: 105ch; } |
| @media (max-width: 900px) { |
| #nte .board { grid-template-columns: minmax(0, 1fr); } |
| #nte .bar { grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) 56px; gap: 8px; } |
| #nte .bar .lab { font-size: 15px; } |
| #nte .toks-head .hov { margin-left: 0; width: 100%; } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| #nte, #nte *, #nte *::before { animation: none !important; transition: none !important; } |
| } |
|
|
| |
| #nte .persona { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 12px; background: var(--n-bg); border: 1px dashed var(--n-sys); } |
| #nte .field-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; } |
| #nte .field-label { font-family: var(--n-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-ink); } |
| #nte .field-sub { text-transform: none; letter-spacing: 0; font-family: var(--n-font-body); font-size: 14px; color: var(--n-muted); margin-left: 6px; } |
| #nte .pcount { font-family: var(--n-font-mono); font-size: 13px; color: var(--n-muted); } |
| #nte #system { font-family: var(--n-font-body); font-weight: 400; font-size: 17px; line-height: 1.45; min-height: 4.5em; background: var(--n-surface); } |
| #nte .chip[aria-pressed="true"] { background: var(--n-ink); color: var(--n-bg); border-color: var(--n-ink); } |
| #nte .hint { margin: 0; font-size: 14.5px; color: var(--n-muted); } |
| #nte .sentence .sysline { display: block; font-family: var(--n-font-body); font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--n-muted); margin-bottom: 6px; padding-left: 10px; border-left: 3px solid var(--n-sys); white-space: normal; } |
| #nte .tok.sys { background: var(--n-sys-a); box-shadow: inset 0 -2px 0 var(--n-sys); } |
| #nte .tok.sys.alt { background: var(--n-sys-b); } |
| #nte .persona .field-label::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--n-sys); margin-right: 8px; vertical-align: 0; } |
| #nte #system::placeholder { color: var(--n-muted); font-style: italic; opacity: 1; } |
| #nte #system { resize: vertical; max-height: 22em; overflow-y: auto; } |
| @media (max-width: 600px) { #nte #system { font-size: 15.5px; max-height: 14em; } #nte .persona { padding: 12px; } } |
|
|
