/* The classic skin: a 90s homepage, after bot arena's classic skin (itself
   after hotlinecafe.com), in tokennet's blue with amber where bot arena has
   pink. An overlay: it is linked after each page's own inline styles and wins
   the cascade over them, so the markup is the modern skin's. Served by
   skin.rs; the guide is docs/design/classic-style.md. */
@import url("https://fonts.googleapis.com/css2?family=PT+Mono&display=swap");

:root {
    --sky-top: #3d5bff; --sky-bottom: #2414c4;
    --panel: rgba(10,18,66,.88); --panel-2: rgba(4,8,40,.78); --solid: #0b1442;
    --amber: #ffb000; --amber-hi: #ffe39a; --cyan: #7dfcff; --hot: #ffd166;
    --text: #cdd5f5; --glow: #a8b8ff; --dim: #8f9bd0; --ok: #5dff9d; --error: #ff6b6b;
    --rule: rgba(125,252,255,.35);
    --mono: 'PT Mono', 'Courier New', monospace;
}

/* ---- Type and sky: one small monospace face, pixel sizes ---- */
/* The sky is the root's, not the body's, so it reaches past a short body. */
html {
    font-size: 13px;
    background: var(--sky-bottom) linear-gradient(180deg, var(--sky-top), var(--sky-bottom)) fixed;
}
body { font: 13px/1.55 var(--mono); color: var(--text); background: none; }
header.tn-header, header.tn-header *, footer.tn-footer, nav.tn-tabs, .tn-tab, a.tn-chip,
.toast, button, input, select, textarea, .tn-hw-svg text { font-family: var(--mono); }
/* CRT scanlines over everything, click-through. */
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07;
    background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}
a { color: var(--cyan); }
.muted, .byline, .location, .model-sub, .up-label, .up-legend, .up-avg, .up-res,
.gauge figcaption, .gauge-sub, .bignum-l, .oauth-divider, .mk-facts dt, .mk-label,
.mk-facts .mk-rel, .applist .app-desc { color: var(--dim); }
.email, .mk-facts dd, section > h3, .card h3, .steps, .steps ul.gpu-pick b,
.intro p, .intro li, .intro strong, td code { color: var(--text); }

/* ---- The column: bar, strip, panels, buttons, footer, all floating on the sky.
   760px is the console's main, the widest column most pages have. ---- */
header.tn-header, body > header, .tn-marquee, .tn-b88s, footer.tn-footer, footer.app-footer {
    position: relative; width: min(100% - 24px, 760px); margin: 12px auto 0;
}
/* Above main, so the bar's menus open over the panel below it. */
header.tn-header, body > header { z-index: 3; }
main, .tn-marquee, .tn-b88s, footer.tn-footer, footer.app-footer { z-index: 2; }
main { position: relative; width: calc(100% - 24px); margin: 15px auto; }
header.tn-header, body > header, main, footer.tn-footer, footer.app-footer {
    background: var(--panel); box-shadow: 3px 3px var(--amber); border-radius: 1px;
}

/* Amber haunts the text: readable letters over a slowly pulsing shadow. */
header.tn-header a.tn-brand, body > header .brand, h1, main h2, .intro h1 {
    text-shadow: 2px 2px 0 rgba(255,176,0,.72), 2px 2px 7px rgba(255,176,0,.42);
    animation: tn-amber-pulse 3.7s ease-in-out infinite alternate;
}
@keyframes tn-amber-pulse {
    50% { text-shadow: 2px 2px 0 rgba(255,176,0,.95), 2px 2px 11px rgba(255,176,0,.78), 0 0 17px rgba(255,176,0,.18); }
}
@keyframes tn-jiggle { 50% { transform: translate(1px,-1px) rotate(-1deg); } }

/* ---- The brand bar ---- */
header.tn-header, body > header { padding: 8px 12px; background-image: none; border-bottom: 1px solid var(--amber); }
header.tn-header a.tn-brand, body > header .brand { color: var(--cyan); font: bold 20px var(--mono); letter-spacing: 0; }
details.tn-apps summary { color: var(--amber); font: bold 20px var(--mono); opacity: 1; letter-spacing: 0; }
details.tn-apps summary:hover { color: var(--hot); animation: tn-jiggle .42s steps(2,end) 2; }
nav.tn-apps-menu, nav.tn-profile-menu {
    background: var(--solid); border: 2px outset var(--rule); border-radius: 0;
    box-shadow: 3px 3px var(--amber); padding: 4px;
}
nav.tn-apps-menu a, nav.tn-profile-menu a, nav.tn-profile-menu button { border-radius: 0; color: var(--cyan); }
nav.tn-apps-menu .tn-app-name { color: var(--cyan); font-weight: bold; }
nav.tn-apps-menu .tn-app-desc { color: var(--dim); }
nav.tn-apps-menu a:hover, nav.tn-profile-menu a:hover, nav.tn-profile-menu button:hover { background: var(--panel-2); color: var(--hot); }
nav.tn-apps-menu a.current { background: var(--panel-2); }
nav.tn-apps-menu a.current .tn-app-name { color: var(--amber); }
/* The one round thing in the skin: a square avatar shows its light background in the corners. */
.tn-avatar { background: var(--solid); border-color: var(--cyan); }
a.tn-chip {
    border-radius: 0; background: var(--panel-2); border: 2px inset var(--rule);
    color: var(--amber); font-size: 11px;
}
a.tn-chip:hover { background: var(--panel-2); color: var(--hot); }

/* ---- The news strip ---- */
.tn-marquee {
    display: block; overflow: hidden; margin-top: 8px; background: var(--amber); color: var(--solid);
    border: 1px solid #b07800; white-space: nowrap; font: bold 9px var(--mono);
}
.tn-marquee div { width: max-content; padding: 4px 0; animation: tn-scroll 25s linear infinite; }
@keyframes tn-scroll { to { transform: translateX(-50%); } }

/* ---- Tabs: a menu bar in a well ---- */
nav.tn-tabs { background: var(--panel-2); border: 2px inset var(--rule); border-radius: 0; padding: 3px; }
.tn-tab { color: var(--cyan); font-size: 11px; font-weight: bold; border-radius: 0; padding: 4px 10px; }
.tn-tab:hover { background: transparent; color: var(--hot); }
.tn-tab.active { background: var(--amber); color: var(--solid); box-shadow: none; }
nav.subtabs { border-bottom: 1px dotted var(--rule); }
nav.subtabs .tab { color: var(--cyan); font-size: 11px; }
nav.subtabs .tab:hover { color: var(--hot); }
nav.subtabs .tab.active { color: var(--amber); border-bottom-color: var(--amber); }

/* ---- Headings: section headings become title bars ---- */
h1, .intro h1 { color: var(--cyan); font-family: var(--mono); letter-spacing: 0; }
main h2, .intro h2 {
    padding: 5px 7px; background: var(--panel-2); color: var(--cyan);
    border-top: 1px dotted var(--rule); border-bottom: 1px dotted var(--rule);
    font: bold 14px var(--mono); letter-spacing: 0;
}
/* Model-written headings are prose, not the page's structure. */
.tn-md h1, .tn-md h2, .tn-md h3 {
    background: none; border: 0; padding: 0; text-shadow: none; animation: none; color: var(--glow);
}
.cardhead h2 { flex: 1; }

/* ---- Boxes: square, panel-2, a thin cyan rule ---- */
.card, .answer, .member, .synthesis, .guide-os, .guide-engine, .sysbox, .applist a.app,
.steps ul.gpu-pick > li, .newkey {
    background: var(--panel-2); border: 1px solid var(--rule); border-radius: 0; box-shadow: none;
}
.synthesis, .answer.winner { border: 2px solid var(--amber); box-shadow: 3px 3px var(--amber); }
.guide-os summary, .guide-engine summary, .sysbox summary, .member summary { color: var(--cyan); }
.guide-os[open] summary, .guide-engine[open] summary, .sysbox[open] summary { border-bottom: 1px dotted var(--rule); }
.applist a.app:hover { background: var(--panel); border-color: var(--cyan); }
.applist .app-name, .homelinks a, .steps a, .intro-more a, .sn-id, .up-toggle { color: var(--cyan); }
.up-toggle:hover { color: var(--hot); }
.sn-detail > td { background: var(--panel-2); }
.note, .msg.info .bubble { background: rgba(255,176,0,.12); border: 1px solid var(--amber); border-radius: 0; color: var(--hot); }
.error { color: var(--error); }
.error::before { content: "⚠ "; }
.pos, .status-done { color: var(--ok); }
.neg, .status-paused { color: var(--error); }
.status-running { color: var(--amber); }
.bignum-n { color: var(--ok); }
.badge, h2 .count-pill, span.easiest { border-radius: 0; border: 1px solid currentColor; }
.oauth-divider::before, .oauth-divider::after { background: var(--rule); }

/* ---- Tables ---- */
table { border: 1px solid var(--rule); }
th { color: var(--glow); background: var(--panel-2); font-size: 10px; border-bottom: 1px solid var(--rule); }
td { border-bottom: 1px dotted var(--rule); }
tfoot td { border-top: 1px solid var(--rule); }
.tn-md th, .tn-md td { border: 1px solid var(--rule); }

/* ---- Code: no pills, cyan in a well ---- */
code, .steps code, .tn-md code, .newkey code {
    color: var(--cyan); background: var(--panel-2); border: 1px inset var(--rule); border-radius: 0;
}
pre, .tn-md pre, .steps pre, .cmd pre, .out pre {
    background: var(--panel-2); border: 1px inset var(--rule); border-radius: 0; color: var(--text);
}
pre code, .tn-md pre code, .steps pre code, .cmd pre code, .out pre code { color: var(--text); background: none; border: 0; }
.tn-md blockquote { border-left-color: var(--amber); color: var(--glow); }

/* ---- Bevels, not rounded corners: raised until pressed ---- */
button, .oauth-btn, .downloads a.dl {
    font: bold 11px var(--mono); border-radius: 0; cursor: pointer;
    background: var(--amber); color: var(--solid); border: 2px outset var(--amber-hi);
}
button:hover, button.primary:hover, .oauth-btn:hover, .downloads a.dl:hover { border-style: inset; background: var(--amber); color: var(--solid); }
button.primary { background: var(--amber); color: var(--solid); }
button.ghost, .oauth-btn, .downloads a.dl, form.tn-feedback button.tn-shot {
    background: var(--panel-2); color: var(--cyan); border: 2px outset var(--rule);
}
button.ghost:hover, form.tn-feedback button.tn-shot:hover { background: var(--panel-2); color: var(--hot); border-style: inset; }
button.ghost.danger { color: var(--error); border-color: rgba(255,107,107,.6); }
button.ghost.danger:hover { background: var(--panel-2); }
.up-toggle { background: none; border: 0; font-weight: normal; }
nav.tn-profile-menu button { background: none; border: 0; font-size: 13px; }
input[type=email], input[type=text], input:not([type]), select, textarea,
.sn-detail select, .chat-bar select, .sysbody textarea, form.tn-feedback textarea,
form.new-battle textarea, form.new-council textarea, .decide textarea {
    background: var(--panel-2); color: var(--cyan); border: 2px inset var(--rule); border-radius: 0;
    font-family: var(--mono);
}
input:focus, .sysbody textarea:focus, form.tn-feedback textarea:focus {
    outline: 1px solid var(--cyan); border-color: var(--rule); box-shadow: none;
}
input[type=file] { color: var(--text); }

/* ---- Dialogs, toasts, chat ---- */
dialog { background: var(--solid); color: var(--text); border: 2px outset var(--rule); border-radius: 0; box-shadow: 3px 3px var(--amber); }
.toast { background: var(--solid); border: 2px outset var(--rule); border-radius: 0; box-shadow: 3px 3px var(--amber); }
.toast.bad { background: #5a0b14; }
.msg .who { color: var(--glow); }
.msg .bubble { border-radius: 0; }
.msg.user .bubble { background: #2a1fb0; border: 1px solid var(--rule); color: #fff; }
.msg.assistant .bubble { background: var(--panel-2); border: 1px solid var(--rule); color: var(--text); }
.msg.assistant .bubble.tn-md pre, .msg.assistant .bubble.tn-md code { background: var(--panel); }
.msg.pending i { background: var(--amber); }
.decision { border: 1px solid var(--rule); border-radius: 0; }
.decision .state, .verdict-row b { color: var(--text); }
.decision .meta, .verdict-row, .prob .pct { color: var(--dim); }
.decision.error { background: rgba(255,176,0,.12); border-color: var(--amber); color: var(--hot); }
.verdict-row .verdict { color: var(--amber); }
.prob .track { background: var(--panel); border-radius: 0; }
.prob .fill { background: var(--dim); }
.prob.top .fill { background: var(--amber); }

/* ---- Charts drawn for a white card, redrawn for a dark one ---- */
.gauge-dial [stroke="#0f172a"] { stroke: var(--amber); }
.gauge-dial [fill="#0f172a"] { fill: var(--amber); }
.gauge-dial [fill="#16a34a"] { fill: var(--ok); }
/* The dial's empty track and the strips' empty blocks are a pale grey that
   glares on navy; a dark track lets the reading carry the colour. */
.gauge-dial [stroke="#f1f5f9"] { stroke: #1c2a78; }
.gauge-dial [stroke="#fff"] { stroke: var(--dim); }
.up-strip [fill="#f1f5f9"], .up-strip [fill="#e2e8f0"] { fill: #1c2a78; }
.up-legend i[style*="#f1f5f9"], .up-legend i[style*="#e2e8f0"] { background: #1c2a78 !important; }
.tn-hw-grid, .tn-hw-spine, .tn-hw-lead { stroke: var(--rule); }
.tn-hw-axis-line, .tn-hw-tickmark { stroke: var(--dim); }
.tn-hw-tick, .tn-hw-axis, .tn-hw-value { fill: var(--dim); }
.tn-hw-captick, .tn-hw-label { fill: var(--text); }
.tn-hw-captick.on { fill: var(--amber); }
.tn-hw-label { stroke: var(--solid); }
.tn-hw-legend, .tn-hw-tip { color: var(--text); }
.tn-hw-tip { background: var(--solid); border: 2px outset var(--rule); border-radius: 0; box-shadow: 3px 3px var(--amber); }
.tn-hw-tip b { color: var(--cyan); }

/* ---- 88x31 buttons, one per app ---- */
.tn-b88s { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.tn-b88 {
    width: 88px; height: 31px; display: flex; align-items: center; justify-content: center;
    font: bold 8px/9px var(--mono); text-decoration: none; text-align: center; border: 1px solid currentColor;
}
a.tn-b88:hover { animation: tn-jiggle .22s steps(2,end) infinite; }
.tn-b88.amber { background: var(--amber); color: var(--solid); }
.tn-b88.cyan { background: var(--cyan); color: var(--solid); }
.tn-b88.stripe { color: #fff; background: repeating-linear-gradient(135deg, #2414c4 0 6px, var(--amber) 6px 12px); text-shadow: 1px 1px 0 var(--solid); }
.tn-b88.dark { background: var(--solid); color: var(--cyan); }

/* ---- Footer ---- */
footer.tn-footer, footer.app-footer {
    margin-bottom: 16px; padding: 7px 10px; font-size: 9px; color: var(--glow);
    border-top: 1px solid var(--amber);
}
footer.tn-footer form.tn-feedback { font-size: 13px; }
form.tn-feedback button { background: var(--amber); color: var(--solid); border: 2px outset var(--amber-hi); border-radius: 0; }
form.tn-feedback button:hover { background: var(--amber); border-style: inset; }
figure.tn-feedback-shot img { border-radius: 0; border-color: var(--rule); }
.tn-skin-classic { font-weight: bold; color: var(--amber); }

/* ---- The sky behind the column: drifting clouds, ghost characters ---- */
.tn-clouds { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .4; mix-blend-mode: screen; }
.tn-cloud {
    position: absolute; width: 420px; height: 125px; border-radius: 50%; background: rgba(255,255,255,.28);
    filter: blur(28px); animation: tn-drift 58s linear infinite;
}
.tn-cloud::before, .tn-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; filter: blur(4px); }
.tn-cloud::before { width: 190px; height: 145px; left: 72px; top: -48px; }
.tn-cloud::after { width: 230px; height: 120px; right: 35px; top: -25px; }
.tn-cloud.c1 { left: -430px; top: 17%; animation-duration: 68s; }
.tn-cloud.c2 { left: -520px; top: 52%; width: 520px; height: 150px; opacity: .55; animation-duration: 91s; animation-delay: -31s; }
.tn-cloud.c3 { left: -390px; top: 79%; width: 360px; height: 100px; opacity: .38; animation-duration: 77s; animation-delay: -52s; }
@keyframes tn-drift { to { transform: translateX(calc(100vw + 900px)); } }
/* トークン = "token", 網 = "net". */
.tn-kanji {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; color: #fff;
    font: 300 34vw "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif; letter-spacing: -.08em;
}
.tn-kanji span {
    position: absolute; line-height: 1; opacity: .08; filter: blur(1.4px); white-space: nowrap;
    text-shadow: 0 0 20px rgba(255,176,0,.5); animation: tn-orbit 34s ease-in-out infinite alternate;
}
.tn-kanji .k1 { left: -4vw; top: 2vw; font-size: 15vw; }
.tn-kanji .k2 { right: -2vw; bottom: -6vw; animation-delay: -17s; }
@keyframes tn-orbit {
    from { transform: translate(-3vw,-2vh) rotate(-8deg) scale(.92); }
    to { transform: translate(3vw,2vh) rotate(6deg) scale(1.04); }
}

@media (max-width: 660px) {
    header.tn-header, body > header, .tn-marquee, .tn-b88s, footer.tn-footer, footer.app-footer, main {
        width: 100%; margin-left: 0; margin-right: 0;
    }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }