.tkl { --navy:#0D2C52; --deep:#0A2342; --panel:#12365F; --panel2:#0F2F55; --line:#2A5078; --cyan:#00BFB3; --mid:#006093; --ribbon:#4E6F9E; --sky:#69CBEF; --text:#FFFFFF; --muted:#C3D2E0; --dim:#8FA6BF;
  --font:"Inter", Verdana, sans-serif; --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --u: clamp(12px, 0.55vw + 8px, 17px);
  box-sizing:border-box; background:var(--navy); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased;
  padding:calc(var(--u)*2.4); border-radius:24px; position:relative; }
.tkl *, .tkl *::before, .tkl *::after { box-sizing:border-box; margin:0; padding:0; }
.tkl button { font-family:var(--font); }
.tkl-wrap { max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:calc(var(--u)*1.2); }

/* head */
.tkl-kicker { font-weight:700; font-size:calc(var(--u)*.8); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.tkl-title { font-weight:800; font-size:calc(var(--u)*3.1); line-height:1; letter-spacing:-.02em; margin-top:calc(var(--u)*.45); color:var(--text); }
.tkl-sub { color:var(--muted); font-size:calc(var(--u)*1.12); line-height:1.45; margin-top:calc(var(--u)*.6); max-width:52em; }
.tkl-stats { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.5); margin-top:calc(var(--u)*.9); }
.tkl-stat { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:calc(var(--u)*.35) calc(var(--u)*.85); font-size:calc(var(--u)*.85); color:var(--muted); }
.tkl-stat b { color:var(--text); font-weight:700; }

/* layout */
.tkl-grid { display:grid; gap:calc(var(--u)*1); grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
.tkl-col { display:flex; flex-direction:column; gap:calc(var(--u)*1); min-width:0; }
.tkl-learn, .tkl-size { grid-column:1 / -1; }
.tkl-learn-in { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:calc(var(--u)*1.4); align-items:start; }
.tkl-card { background:var(--panel); border:1px solid var(--line); border-radius:calc(var(--u)*1); padding:calc(var(--u)*1.1) calc(var(--u)*1.2); min-width:0; position:relative; }
.tkl-size[hidden] { display:none; }
.tkl-label { display:flex; align-items:baseline; justify-content:space-between; gap:calc(var(--u)*.6); font-weight:700; font-size:calc(var(--u)*.78); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:calc(var(--u)*.6); }
.tkl-label em { font-style:normal; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--dim); font-size:calc(var(--u)*.85); }
.tkl-hint { color:var(--dim); font-size:calc(var(--u)*.86); line-height:1.45; margin-top:calc(var(--u)*.6); }
.tkl-hint b { color:var(--muted); }

/* prompt */
.tkl-input { width:100%; resize:vertical; min-height:calc(var(--u)*3.6); background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:calc(var(--u)*.6); padding:calc(var(--u)*.7) calc(var(--u)*.8); font:500 calc(var(--u)*1.15)/1.45 var(--font); }
.tkl-input:focus { outline:2px solid var(--sky); outline-offset:1px; }
.tkl-chips { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.4); margin-top:calc(var(--u)*.6); }
.tkl-chip { all:unset; box-sizing:border-box; cursor:pointer; font-size:calc(var(--u)*.84); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:calc(var(--u)*.3) calc(var(--u)*.75); transition:border-color .2s, color .2s; }
.tkl-chip:hover, .tkl-chip.on { border-color:var(--cyan); color:var(--text); }
.tkl-chip:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }

/* tokens */
.tkl-ctx { display:flex; align-items:center; gap:calc(var(--u)*.6); font-size:calc(var(--u)*.82); color:var(--dim); margin-bottom:calc(var(--u)*.6); }
.tkl-ctxbar { flex:1; height:6px; background:var(--panel2); border-radius:999px; overflow:hidden; }
.tkl-ctxbar i { display:block; height:100%; width:0; background:var(--ribbon); border-radius:999px; transition:width .25s; }
.tkl-stage { position:relative; padding-top:calc(var(--u)*2.6); }
.tkl-arcs { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.tkl-toks { position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:calc(var(--u)*1.1) calc(var(--u)*.22); line-height:1; min-height:calc(var(--u)*4); }
.tkl-tok { --w:0; cursor:pointer; position:relative; font:600 calc(var(--u)*1.02)/1 var(--mono); color:var(--text); padding:calc(var(--u)*.42) calc(var(--u)*.38); border-radius:calc(var(--u)*.4); border:1px solid rgba(105,203,239,.18);
  background:linear-gradient(rgba(0,191,179,var(--w)), rgba(0,191,179,var(--w))), var(--panel2); white-space:pre; transition:background .25s, border-color .25s; }
.tkl-tok:nth-child(even) { border-color:rgba(78,111,158,.45); }
.tkl-tok .sp { color:var(--ribbon); }
.tkl-tok.gen { color:var(--sky); border-color:rgba(105,203,239,.55); border-style:dashed; }
.tkl-tok.sel { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,191,179,.35); }
.tkl-tok.new { animation:tkl-pop .35s ease-out; }
.tkl-tok:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
.tkl-tok::after { content:attr(data-id); position:absolute; left:50%; top:calc(100% + 3px); transform:translateX(-50%); font:600 10px/1 var(--mono); color:var(--dim); opacity:0; transition:opacity .15s; pointer-events:none; }
.tkl-tok:hover::after, .tkl-tok.sel::after { opacity:1; }
@keyframes tkl-pop { from { transform:translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
.tkl-btns { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.5); margin-top:calc(var(--u)*1); }
.tkl-btn { all:unset; box-sizing:border-box; cursor:pointer; font-weight:700; font-size:calc(var(--u)*.92); border-radius:calc(var(--u)*.5); padding:calc(var(--u)*.6) calc(var(--u)*1.05); background:var(--cyan); color:var(--navy); transition:filter .2s; }
.tkl-btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.tkl-btn:hover { filter:brightness(1.08); } .tkl-btn[disabled] { opacity:.45; cursor:default; }
.tkl-btn:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }

/* next-token bars */
.tkl-bars { display:flex; flex-direction:column; gap:calc(var(--u)*.32); }
.tkl-bar { display:grid; grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3.6em; align-items:center; gap:calc(var(--u)*.55); font-size:calc(var(--u)*.92); }
.tkl-bar .t { font:600 calc(var(--u)*.95)/1.2 var(--mono); white-space:pre; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.tkl-bar .t .sp { color:var(--ribbon); }
.tkl-bar .track { display:block; height:calc(var(--u)*1.05); background:var(--panel2); border-radius:999px; overflow:hidden; }
.tkl-bar .fill { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--mid), var(--cyan)); transition:width .3s cubic-bezier(.3,.7,.3,1); }
.tkl-bar .p { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); font-size:calc(var(--u)*.85); }
.tkl-bar.cut .fill { background:var(--line); } .tkl-bar.cut .t, .tkl-bar.cut .p { color:var(--dim); text-decoration:line-through; text-decoration-color:rgba(143,166,191,.5); }
.tkl-bar.pick .fill { background:var(--sky); } .tkl-bar.pick .t { color:var(--sky); }
.tkl-pool { margin-top:calc(var(--u)*.7); font-size:calc(var(--u)*.86); color:var(--muted); line-height:1.45; }
.tkl-pool b { color:var(--text); }

/* knobs */
.tkl-knob { margin-top:calc(var(--u)*.85); }
.tkl-knob:first-of-type { margin-top:0; }
.tkl-knob-top { display:flex; justify-content:space-between; align-items:baseline; font-size:calc(var(--u)*.92); font-weight:700; }
.tkl-knob-top output { font-variant-numeric:tabular-nums; color:var(--cyan); font-weight:800; }
.tkl-knob small { display:block; color:var(--dim); font-size:calc(var(--u)*.8); line-height:1.4; margin-top:calc(var(--u)*.2); }
.tkl input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:calc(var(--u)*1.6); background:transparent; margin-top:calc(var(--u)*.25); }
.tkl input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:linear-gradient(90deg, var(--cyan) var(--pct,50%), var(--line) var(--pct,50%)); }
.tkl input[type=range]::-moz-range-track { height:6px; border-radius:999px; background:var(--line); }
.tkl input[type=range]::-moz-range-progress { height:6px; border-radius:999px; background:var(--cyan); }
.tkl input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:calc(var(--u)*1.25); height:calc(var(--u)*1.25); border-radius:50%; background:var(--text); border:3px solid var(--cyan); margin-top:calc(-0.625 * var(--u) + 3px); }
.tkl input[type=range]::-moz-range-thumb { width:calc(var(--u)*1.05); height:calc(var(--u)*1.05); border-radius:50%; background:var(--text); border:3px solid var(--cyan); }
.tkl input[type=range]:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }

/* attention */
.tkl-seg { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.3); align-items:center; }
.tkl-seg span { font-size:calc(var(--u)*.8); color:var(--dim); margin-right:calc(var(--u)*.3); min-width:3.6em; }
.tkl-seg + .tkl-seg { margin-top:calc(var(--u)*.45); }
.tkl-sb { all:unset; box-sizing:border-box; cursor:pointer; min-width:calc(var(--u)*2.1); text-align:center; font-weight:700; font-size:calc(var(--u)*.85); padding:calc(var(--u)*.32) calc(var(--u)*.5); border-radius:calc(var(--u)*.4); border:1px solid var(--line); color:var(--muted); }
.tkl-sb.on { background:var(--cyan); border-color:var(--cyan); color:var(--navy); }
.tkl-sb:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
.tkl-look { margin-top:calc(var(--u)*.7); font-size:calc(var(--u)*.9); color:var(--muted); line-height:1.5; }
.tkl-look b { color:var(--text); font-family:var(--mono); }

/* learn */
.tkl-chart { width:100%; height:calc(var(--u)*9.5); display:block; }
.tkl-learn-row { display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--u)*.6); margin-top:calc(var(--u)*.3); font-size:calc(var(--u)*.88); color:var(--muted); }
.tkl-learn-row b { color:var(--text); font-variant-numeric:tabular-nums; }
.tkl-sample { margin-top:calc(var(--u)*.7); background:var(--panel2); border-radius:calc(var(--u)*.6); padding:calc(var(--u)*.75) calc(var(--u)*.85); font-size:calc(var(--u)*.95); line-height:1.5; min-height:calc(var(--u)*6.5); color:var(--text); }
.tkl-sample i { font-style:normal; color:var(--dim); }
.tkl-learn .tkl-btn { margin-top:calc(var(--u)*.7); }

/* model size */
.tkl-sizes { display:grid; grid-template-columns:repeat(auto-fit, minmax(9em, 1fr)); gap:calc(var(--u)*.5); }
.tkl-size-b { all:unset; box-sizing:border-box; cursor:pointer; border:1px solid var(--line); border-radius:calc(var(--u)*.6); padding:calc(var(--u)*.6) calc(var(--u)*.75); display:flex; flex-direction:column; gap:calc(var(--u)*.2); }
.tkl-size-b b { font-size:calc(var(--u)*1.05); } .tkl-size-b small { color:var(--dim); font-size:calc(var(--u)*.8); line-height:1.35; }
.tkl-size-b.on { border-color:var(--cyan); background:rgba(0,191,179,.08); }
.tkl-size-b:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }

/* loading */
.tkl-load { position:absolute; inset:0; background:rgba(10,35,66,.86); border-radius:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*.7); z-index:5; text-align:center; padding:calc(var(--u)*1.5); }
.tkl-load[hidden] { display:none; }
.tkl-load p { color:var(--muted); font-size:calc(var(--u)*.95); }
.tkl-load .tkl-ctxbar { width:min(320px, 70%); flex:none; height:8px; }
.tkl-load .tkl-ctxbar i { background:var(--cyan); }

/* foot */
.tkl-foot { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*1); flex-wrap:wrap; color:var(--muted); font-size:calc(var(--u)*.86); border-top:1px solid var(--line); padding-top:calc(var(--u)*1); }
.tkl-foot a { color:var(--sky); text-decoration:none; font-weight:600; }
.tkl-books summary { cursor:pointer; color:var(--sky); font-weight:600; }
.tkl-books p { margin-top:calc(var(--u)*.5); color:var(--dim); font-size:calc(var(--u)*.82); line-height:1.6; max-width:80em; }

@media (max-width: 980px) {
  .tkl { padding:calc(var(--u)*1.3); }
  .tkl-grid { grid-template-columns:minmax(0,1fr); }
  .tkl-col { display:contents; }
  .tkl-prompt { order:1; } .tkl-tokens { order:2; } .tkl-next { order:3; } .tkl-knobs { order:4; } .tkl-attn { order:5; } .tkl-learn { order:6; } .tkl-size { order:7; }
  .tkl-learn-in { grid-template-columns:minmax(0,1fr); }
  .tkl-title { font-size:calc(var(--u)*2.5); }
}

/* ---- recording frames (?frame=1): fixed layouts per aspect ratio, phone-overlay safe ---- */
body.tkl-frame { margin:0 !important; padding:0 !important; overflow:hidden; background:#0D2C52; }
.tkl-frame .tkl, .tkl-frame .tkl * { transition:none !important; animation:none !important; }
.tkl-frame .tkl { --pt:5vh; --pr:5vw; --pb:4.5vh; --pl:5vw; --u:1.7vw; width:100vw; height:100vh; border-radius:0; padding:var(--pt) var(--pr) calc(var(--pb) + var(--u) * 4) var(--pl); overflow:hidden; }
.tkl-frame .tkl-wrap { max-width:none; }
.tkl-frame .tkl-grid { align-content:start; }
.tkl-frame .tkl-prompt, .tkl-frame .tkl-attn, .tkl-frame .tkl-size, .tkl-frame .tkl-foot, .tkl-frame .tkl-hint, .tkl-frame .tkl-btns, .tkl-frame .tkl-stats, .tkl-frame .tkl-pool,
.tkl-frame .tkl-knob:not(:first-of-type), .tkl-frame .tkl-knob small, .tkl-frame #tkl-usesnap, .tkl-frame .tkl-load, .tkl-frame .tkl-sub { display:none !important; }
.tkl-frame .tkl-title { font-size:calc(var(--u)*3.4); }
.tkl-frame .tkl-tok { font-size:calc(var(--u)*1.3); }
.tkl-frame .tkl-bar { font-size:calc(var(--u)*1.1); }
.tkl-frame .tkl-bar .t { font-size:calc(var(--u)*1.15); }
.tkl-frame .tkl-bars .tkl-bar:nth-child(n+7) { display:none; }
.tkl-brand { display:none; }
.tkl-frame .tkl-brand { display:flex; position:absolute; left:var(--pl); bottom:var(--pb); align-items:center; gap:calc(var(--u)*1); color:var(--muted); font-size:calc(var(--u)*1.05); font-weight:600; }
.tkl-brand img { height:calc(var(--u)*2.4); width:auto; display:block; }
.tkl-frame .tkl-learn-in { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(var(--u)*1); }
.tkl-frame .tkl-chart { height:calc(var(--u)*7); }
.tkl-frame .tkl-sample { font-size:calc(var(--u)*1); min-height:0; }
/* 16:9 */
@media (min-aspect-ratio: 13/10) {
  .tkl-frame .tkl { --u:0.95vw; --pt:5vh; --pb:4.5vh; --pl:4vw; --pr:4vw; }
  .tkl-frame .tkl-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  .tkl-frame .tkl-learn { grid-column:1 / -1; }
}
/* portrait and 4:5: one column */
@media (max-aspect-ratio: 13/10) {
  .tkl-frame .tkl-grid { grid-template-columns:minmax(0,1fr); }
  .tkl-frame .tkl-col { display:contents; }
  .tkl-frame .tkl-tokens { order:1; } .tkl-frame .tkl-next { order:2; } .tkl-frame .tkl-knobs { order:3; } .tkl-frame .tkl-learn { order:4; }
}
/* 9:16: TikTok and Reels overlays (top 14%, bottom 20%, right 17%, left 7%) */
@media (max-aspect-ratio: 2/3) {
  .tkl-frame .tkl { --u:1.85vw; --pt:14vh; --pr:17vw; --pb:21vh; --pl:7vw; }
  .tkl-frame .tkl-learn-in { grid-template-columns:minmax(0,1fr); }
  .tkl-frame .tkl-sample { display:none; }
  .tkl-frame .tkl-title { font-size:calc(var(--u)*3); }
  .tkl-frame .tkl-chart { height:calc(var(--u)*5.5); }
}
/* LinkedIn 4:5 cut (?li=1): keep the top 19% and outer 10% clear */
.tkl-frame.li .tkl { --pt:19vh; --pl:10vw; --pr:10vw; --u:1.42vw; }