:root {
    --bg:       #0a0a0b;
    --bg2:      #111114;
    --bg3:      #18181d;
    --line:     #2a2a32;
    --text:     #d8d8e0;
    --muted:    #666680;
    --accent:   #ff5f1f;
    --accent2:  #ff9a5c;
    --metal:    #a0c8ff;
    --code-bg:  #0d1117;
    --sans:     'Syne', sans-serif;
    --mono:     'IBM Plex Mono', monospace;
    --color-border-secondary: orange;
    --color-border-primary: yellow;
    --color-text-tertiary: brown;
    --color-text-primary: yellow;
    --color-text-secondary: orange;
    --color-border-tertiary: brown;
}

*, *::before, *::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.75;
    min-height: 100vh;
}

a {
    color: var(--accent2);
    text-decoration: none;
}

a:hover
{
    color: var(--accent);
    text-decoration: underline;
}

nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,10,11,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2rem; height: 56px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transform-style: preserve-3d;
    perspective: 800px;
    background: #111;
    padding: 12px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

.nav-logo {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.nav-logo {
    display: inline-block;
    transform-origin: top center;
    color: white;
    font-size: 20px;
    text-decoration: none;
    animation: dropSign 0.8s cubic-bezier(.25,1.5,.5,1) forwards;
}

@keyframes dropSign {
    0% {
        transform: rotateX(90deg) rotateY(-10deg);
        opacity: 0;
    }
    
    60% {
        transform: rotateX(-20deg) rotateY(-5deg);
    }
    
    80% {
        transform: rotateX(10deg) rotateY(2deg);
    }
    
    100% {
        transform: rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
}

.nav-logo span {
    color: var(--accent);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    float:right;
    gap: 12px;
}

.lang-btn {
    font-family: var(--mono); font-size: 0.78rem;
    color: var(--muted); border: 1px solid var(--line);
    background: none; padding: 3px 10px; cursor: pointer;
    transition: all .15s;
}

.lang-btn:hover, .lang-btn.active
{
    color: var(--accent);
    border-color: var(--accent);
}

.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: calc(100vh - 56px);
}

aside {
    border-right: 1px solid var(--line);
    padding: 2rem 0;
    position: sticky; top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    display: none;
}

.aside-title {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
    color: var(--muted); text-transform: uppercase;
    padding: 0 1.5rem; margin-bottom: 0.75rem;
}

.ch-link {
    display: flex; align-items: baseline; gap: 0.75rem;
    padding: 0.45rem 1.5rem;
    color: var(--muted); font-size: 0.82rem;
    transition: all .1s; border-left: 2px solid transparent;
}

.ch-link:hover
{
    color: var(--text);
    text-decoration: none;
    border-left-color: var(--line);
}

.ch-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(255,95,31,0.05);
}

.ch-num {
    font-size: 0.68rem;
    color: var(--muted);
    min-width: 18px;
}

main {
    padding: 3.5rem 4rem;
    max-width: 800px;
}

.chapter-meta {
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
h1 {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
}

h1 .accent {
    color: var(--accent);
}

h2 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin: 2.5rem 0 0.75rem;
    letter-spacing: -0.01em;
}

h3 {
    font-family: var(--mono); font-weight: 600; font-size: 0.95rem;
    color: var(--metal); margin: 1.75rem 0 0.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text);
}

/* TERM — inline highlighted keyword */
.term {
    color: var(--metal);
    border-bottom: 1px dotted var(--metal);
    cursor: help;
}
.term a { color: inherit; border: none; }
.term a:hover { text-decoration: none; opacity: 0.8; }

/* CALLOUT BOXES */
.callout {
    border-left: 3px solid var(--accent);
    background: rgba(255,95,31,0.06);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.callout.info { border-color: var(--metal); background: rgba(160,200,255,0.05); }
.callout.note { border-color: #888; background: rgba(255,255,255,0.03); }
.callout.mouly { border-color: #B5B8E2; background: rgba(255,255,255,0.03); }
.callout .label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 0.4rem;
    color: var(--accent);
}
.callout.info .label { color: var(--metal); }
.callout.note .label { color: var(--muted); }

.callout.prereq {
    border-color: var(--accent2);
    background: rgba(160,200,255,0.05);
}
.callout.prereq .label { color: var(--metal); }
.callout.prereq ul {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .5rem;
}
.callout.prereq li a {
    padding: 3px 3px;
    font-size: .8rem; color: var(--accent2);
    transition: border-color .15s, color .15s;
}
.callout.prereq li {
    border: 1px solid var(--line);
    padding: 3px 12px; border-radius: 4px;
    font-size: .8rem; color: var(--text);
    transition: border-color .15s, color .15s;
}
.callout.prereq li a:hover { border-color: var(--metal); color: var(--metal); text-decoration: none; }

.callout.objective {
    border-color: var(--accent);
    background: rgba(255,95,31,0.06);
    margin: 1.75rem 0 2.25rem;
}
.callout.objective .label { color: var(--accent); }
.callout.objective ul {
    margin: 0; padding-left: 1.15rem; font-size: 0.9rem;
}
.callout.objective li { margin-bottom: 0.3rem; }
.callout.objective .goal-meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
    margin-top: 0.9rem; padding-top: 0.8rem;
    border-top: 1px dashed var(--line);
    font-size: 0.78rem; color: var(--muted);
}
.callout.objective .goal-meta b { color: var(--text); font-weight: 600; }
.callout.objective .goal-meta a { color: var(--accent2); }
.callout.objective .goal-meta ul {
    list-style: none; display: inline-flex; flex-wrap: wrap;
    gap: 0.35rem; padding: 0; margin: 0;
}
.callout.objective .goal-meta li {
    margin: 0; border: 1px solid var(--line); border-radius: 4px;
    padding: 1px 8px;
}

.projec {
    border-bottom: 1px solid var(--accent2);
    border-top: 1px solid var(--accent2);
    background: rgba(255,95,31,0.06);
    padding: 22px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}
pre {
    background: var(--code-bg);
    border: 1px solid var(--line);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.25rem 0;
    font-size: 0.82rem;
    line-height: 1.7;
}
.structureproj {
    margin: 0;
    text-decoration: underline double var(--accent2);
    text-underline-offset: 11%;
}
.aaa {
    text-decoration: underline double var(--accent2);
    text-underline-offset: -33%;
    letter-spacing: 0.03em;
    margin: 3rem 4rem;
    border: 1px double var(--accent);
    padding: 3px;
    background: var(--code-bg)
}
.repet {
    font-size: 0.59rem;
}
code { font-family: var(--mono); color: var(--accent2); font-size: 0.87em; }
pre code { color: var(--text); }
.kw { color: #ff79c6; }
.ty { color: #8be9fd; }
.str { color: #f1fa8c; }
.vlt { color: #43DFFF; }
.test { color: #8E223F; }
.vltc { color: #5685FA; }
.noth { color: #4E40F0; }
.uct { color: #9945F3; }

.fn { color: #50f17F; }
.fnour { color: #92E846; }
.cm { color: #777AAA; font-style: italic; opacity: 89%;}
.yol { color: #EDCF47; }
.blu { color: #9784FF; }
.define { color: orange; }
.oran { color: #ED5147; }
.mtl { color: #8DFF7D; }
.clas { color: #47EDA8; }

/* EXTERNAL LINK pill */
.ext {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; color: var(--muted);
    border: 1px solid var(--line); padding: 1px 8px;
    margin-left: 6px; vertical-align: middle;
    transition: all .15s;
}
.ext:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* NAV PREV/NEXT */
.ch-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4rem; padding-top: 2rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
}
.ch-nav a {
    display: flex; flex-direction: column;
    color: var(--muted); transition: color .15s;
}
.ch-nav a:hover { color: var(--accent); text-decoration: none; }
.ch-nav .dir { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.ch-nav .title { color: var(--text); }

/* HERO (index only) */
.hero {
    padding: 5rem 4rem 3rem;
    border-bottom: 1px solid var(--line);
}
.hero-tag {
    font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 1rem;
}
.hero h1 { font-size: 8.9rem; margin-bottom: 1.25rem; }
.hero p { font-size: 0.95rem; color: var(--muted); max-width: 620px; }
.hero-cta {
    display: inline-block; margin-top: 2rem;
    background: var(--accent); color: #fff;
    font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
    padding: 0.65rem 1.5rem; letter-spacing: 0.05em;
    transition: background .15s;
}
.hero-cta:hover { background: var(--accent2); text-decoration: none; color: #000; }

.grid-chapters {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line);
    margin: 3rem 4rem;
}
.grid-ch {
    background: var(--bg2); padding: 1.5rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    transition: background .15s;
}
.grid-ch:hover { background: var(--bg3); }
.grid-ch .num { font-size: 0.7rem; color: var(--muted); }
.grid-ch .name { font-family: var(--sans); font-weight: 700; color: #fff; font-size: 1rem; }
.grid-ch.wip .name { color: var(--muted); }
.grid-ch .wip-badge {
    font-size: 0.65rem; color: var(--muted); border: 1px solid var(--line);
    padding: 1px 6px; align-self: flex-start; margin-top: 4px;
}

kbd {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg3); border: 1px solid var(--line);
    border-bottom: 3px solid var(--line);
    border-radius: 4px; padding: 2px 8px;
    font-family: var(--mono); font-size: 0.8rem; color: var(--text);
    min-width: 28px; line-height: 1.4;
    box-shadow: 0 1px 0 var(--line);
}
.shortcut-row {
    display: flex; align-items: center; gap: 6px;
    padding: 0.55rem 0; border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
}
.shortcut-row .desc { color: var(--muted); margin-right: auto; }
.shortcut-plus { color: var(--muted); font-size: 0.7rem; }

/* PIPELINE CSS */
.pipeline {
    display: flex; align-items: center; gap: 0;
    margin: 2rem 0; overflow-x: auto;
    padding-bottom: 0.5rem;
}
.pipe-box {
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--bg2);
    padding: 0.75rem 1rem;
    text-align: center; min-width: 110px;
}
.pipe-box.programmable {
    border-color: var(--accent);
    background: rgba(255,95,31,0.06);
}
.pipe-box.output {
    border-color: var(--metal);
    background: rgba(160,200,255,0.05);
}
.pipe-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
}
.pipe-box:not(.programmable):not(.output) .pipe-label { color: var(--muted); }
.pipe-box.output .pipe-label { color: var(--metal); }
.pipe-sub { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
.pipe-arrow {
    flex-shrink: 0; color: var(--muted);
    font-size: 1.1rem; padding: 0 4px;
}

/* BITS CSS */
.bits-row {
    display: flex; gap: 4px; margin: 1rem 0; flex-wrap: wrap;
}
.bit {
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 1rem; font-weight: 700;
    color: var(--muted); background: var(--bg2);
    flex-direction: column;
}
.bit.on { border-color: var(--accent); background: rgba(255,95,31,0.08); color: var(--accent); }
.bit-exp { font-size: 0.5rem; color: var(--muted); margin-bottom: 1px; }

.let-greekul {
    list-style-type: lower-greek;
}

.digreek {
    
}

dl.dlistshift { display: flex; flex-direction: column; gap: 0; margin: 1.5rem 0; }
dl.dlistshift dt {
    font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
    color: #fff; padding: 1rem 1.25rem 0.25rem;
    border-left: 3px solid var(--accent);
    background: rgba(255,95,31,0.05);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    margin-top: 0;
}
dl.dlistshift dt:first-of-type { border-top: 1px solid var(--line); }
dl.dlistshift dd {
    color: white; font-size: 0.85rem;
    padding: 0.5rem 1.25rem 1rem 1.25rem;
    margin: 0;
    border-left: 3px solid var(--accent);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255,95,31,0.02);
}
dl.dlistshift dt.tlistshift { border-left-color: var(--metal); background: rgba(160,200,255,0.04); }
dl.dlistshift dd.tlistshift { border-left-color: var(--metal); background: rgba(160,200,255,0.02); }

.kb-row { display: flex; gap: 5px; align-items: flex-end; }

.k {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(180deg, #2e2e38 0%, #252530 100%);
    border: 1px solid #3a3a48;
    border-bottom: 3px solid #111118;
    border-radius: 6px;
    padding: 5px 7px 4px;
    min-width: 38px; height: 38px;
    font-family: var(--mono); font-size: 0.72rem;
    color: #c8c8d8;
    cursor: default;
    transition: all .08s;
    position: relative;
    box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.k:hover {
    background: linear-gradient(180deg, #383848 0%, #2d2d3c 100%);
    color: #fff;
}
.k.wide   { min-width: 58px; }
.k.wider  { min-width: 78px; }
.k.widest { min-width: 100px; }
.k.space  { min-width: 240px; }
.k.tall   { height: 58px; }

.k.big {
    min-width: 68px;
    background: linear-gradient(180deg, #353545 0%, #29293a 100%);
    border-color: #454558;
    color: #e0e0f0;
}
.k.big:hover { background: linear-gradient(180deg, #424255 0%, #333345 100%); }

.k.active {
    background: linear-gradient(180deg, #ff7040 0%, #cc4010 100%) !important;
    border-color: #ff5f1f !important;
    border-bottom-color: #882200 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(255,95,31,0.4), 0 1px 0 rgba(0,0,0,0.4);
}
.k.active-blue {
    background: linear-gradient(180deg, #6090ff 0%, #3060cc 100%) !important;
    border-color: #5080ff !important;
    border-bottom-color: #1040aa !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(80,144,255,0.4), 0 1px 0 rgba(0,0,0,0.4);
}
.k.pressed {
    border-bottom-width: 1px;
    transform: translateY(2px);
}

.k-sub { font-size: 0.55rem; color: var(--muted); display: block; }
.k-main { font-size: 0.78rem; }
.k-sym { font-size: 1rem; line-height: 1; }

.kb-section {
    width: 1px; height: 28px; background: var(--line); margin: 0 4px;
    align-self: center;
}

.kb-legend {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin-top: 0.75rem; font-size: 0.72rem;
}
.kb-legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.kb-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.loop-viz {
    background: var(--code-bg); border: 1px solid var(--line);
    padding: 1.5rem; margin: 1.5rem 0;
}
.loop-viz-title {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 1rem;
}
.loop-frames {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.lf {
    width: 44px; height: 44px; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 0.75rem;
    color: var(--muted); background: var(--bg2);
    flex-direction: column; gap: 1px;
    transition: all .15s;
    position: relative;
}
.lf .lf-num { font-size: 0.65rem; color: var(--muted); }
.lf .lf-idx { font-size: 0.95rem; font-weight: 700; }
.lf.current {
    border-color: var(--accent); background: rgba(255,95,31,0.12);
    color: var(--accent);
}
.lf.current .lf-num { color: var(--accent2); }
.lf.current .lf-idx { color: var(--accent); }
.lf.was-current { border-color: var(--line); opacity: 0.5; }

.loop-code {
    font-size: 0.78rem; color: var(--muted);
    display: flex; flex-direction: column; gap: 3px;
}
.loop-code .lc-line { display: flex; gap: 0.5rem; align-items: center; }
.loop-code .lc-val { color: var(--accent); font-weight: 700; min-width: 24px; }
.loop-code .lc-label { color: var(--muted); }
.loop-code .lc-result { color: var(--ok, #50fa7b); }

.loop-controls {
    display: flex; gap: 8px; margin-top: 1rem; flex-wrap: wrap;
}
.loop-btn {
    background: var(--bg2); border: 1px solid var(--line);
    color: var(--text); font-family: var(--mono); font-size: 0.72rem;
    padding: 5px 14px; cursor: pointer; transition: all .15s;
}
.loop-btn:hover { border-color: var(--accent); color: var(--accent); }
.loop-btn.active { border-color: var(--accent); background: rgba(255,95,31,0.08); color: var(--accent); }

.layout { grid-template-columns: 1fr; }
main { padding: 2rem 1.5rem; }
.hero { padding: 3rem 1.5rem 2rem; }
.hero h1 { font-size: 2.3rem; }
h1 .accen { color: var(--accent); font-size: 2.0rem; }
.grid-chapters { margin: 2rem 1.5rem; }

@media (max-width: 768px) {
    .layout { grid-template-columns: 1fr; }
 
    main { padding: 2rem 1.5rem; }
    .hero { padding: 3rem 1.5rem 2rem; }
    .hero h1 { font-size: 2rem; }
    .grid-chapters { margin: 2rem 1.5rem; }
}

@media (max-width: 768px) { .nav-shortcuts { display: none; } }

.tech-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); padding: 3px 10px;
    font-size: 0.72rem; color: var(--muted); background: var(--bg2);
}
.tech-badge img { width: 16px; height: 16px; object-fit: contain; }
.login {
    position: fixed;
    top: 60px;
    right: 20px;
    
    background: #1a1a1a;
    color: #fff;
    
    padding: 12px 16px;
    border-radius: 8px;
    max-width: 300px;
    
    font-size: 13px;
    font-family: var(--mono);
    
    box-shadow: 0 15px 30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
    
    transform: rotate(2deg);
    animation: swing;
    animation-duration: 3000ms;
    animation-timing-function: ease-in;
    animation-delay: 5s;
    animation-iteration-count: 5;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
.login:hover { text-decoration: underline; color: yellow; }

ol {
    padding-left: 23px;
}

.rom {
    margin-left: 2px;
    background: black;
    color: #3F6157;
    box-shadow: 0 15px 30px rgba(0,0,0,1.7), inset 0 3px 0 rgba(255,255,255,0.05);
    padding-top: 23px;
}

.panelstaticcolor {
    position: fixed;
    bottom: 89px;
    right: 10px;
    font-size: 0.7rem;
    line-height: 1.4;
    z-index: 999;
    opacity: 0.7;
}

.panelstaticcolor span {
    display: block;
}

#toggleLegend {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 0.65rem;
    opacity: 0.5;
    z-index: 1001;
}

.panelstaticcolor {
    transition: opacity 0.2s;
}

.panelstaticcolor.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

/* colors Only */
.color-demo {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px;
}

.color-swatch {
    padding: 10px;
    font-family: var(--mono); font-size: 11px;
    transition: transform .15s;
}
.color-swatch:hover { transform: translateY(-2px); }

.swatch-dot {
    width: 150px; height: 150px; border-radius: 50%;
    margin-bottom: 10px;
}

.swatch-label { color: var(--text); font-weight: 500; }
.swatch-hex   { color: var(--muted); font-size: 12px; }
/* End colors */

.comments-drawer {
    position: fixed;
    right: -506px;
    top: 189px;
    width: 506px;
    height: calc(100vh - 56px);
    background: var(--bg2);
    border-left: 1px solid var(--line);
    transition: right 0.25s ease;
    overflow-y: auto;
    padding: 1.5rem;
    z-index: 500;
    display: block;
}
.comments-drawer.open { right: 0; }

.comments-toggle {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
    padding: 6px 14px;
    cursor: pointer;
    z-index: 501;
}

.checkpoint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    font-size: 0.8rem;
    color: #555;
    font-family: 'IBM Plex Mono', monospace;
}
.checkpoint-icon {
    color: #ff5f1f;
    font-size: 0.9rem;
}

.kat {
    font-size: 22px;
}

tr {
    border-bottom:1px solid var(--line);
}
th {
    padding:8px 12px;
    color:var(--muted);
    text-align: center;
}
td {
    padding:7px 12px;
    text-align: center;
}

.cis {
    background: rgba(255,95,31,0.06);
    border: 1px solid var(--accent2);
    padding-left: 3px;
    padding-right: 2px;
}

.cos {
    padding-left: 23px;
    padding-right: 23px;
}

.katex {
    line-height: normal !important;
}

.iq {
    margin: 1.75rem 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    padding: 1.1rem 1.25rem 1rem;
    font-family: var(--mono);
    font-size: 0.85rem;
}
.iq-label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
}
.iq-q {
    color: var(--text);
    margin-bottom: 0.85rem;
    line-height: 1.55;
}
.iq-choices {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.iq-opt {
    text-align: left;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    line-height: 1.45;
}
.iq-opt:hover:not(:disabled) {
    border-color: rgba(255,95,31,.45);
    color: var(--text);
    background: rgba(255,95,31,.05);
}
.iq-opt:disabled { cursor: default; }
.iq-opt.iq-correct {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255,95,31,.08);
}
.iq-opt.iq-wrong {
    border-color: #444;
    color: #555;
    text-decoration: line-through;
}
.iq-opt.iq-reveal {
    border-color: var(--accent);
    color: var(--accent);
    opacity: .55;
}
.iq-feedback {
    margin-top: 0.65rem;
    font-size: 0.78rem;
    min-height: 1.2em;
    color: var(--muted);
    display: none;
}
.iq-feedback.show { display: block; }
.iq-feedback.ok { color: var(--accent); }
.iq-feedback.ko { color: var(--muted); }

/* XP flash badge */
.iq-xp-flash {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--accent);
    border: 1px solid rgba(255,95,31,.35);
    padding: 1px 8px;
    margin-left: 8px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity .3s;
}
.iq-xp-flash.show { opacity: 1; }

.btn-validate {
    padding: 10px 18px;
    font-size: 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-bottom: 31px;
}

.btn-validat {
    padding: 10px 18px;
    font-size: 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    margin-bottom: 31px;
    position: fixed;
    margin-left: auto;
    top: 50%;
    right: 100px;
    width: 123px;
}

.quiz-wrap{padding:1.5rem 0;max-width:680px;margin-left:89px;}

.quiz-header{margin-bottom:2rem;}
.quiz-header .chapter-label{font-size:11px;color:var(--color-text-secondary);letter-spacing:.5px;text-transform:lowercase;margin-bottom:.5rem;}
.quiz-header h1{font-size:20px;font-weight:500;color:var(--color-text-primary);letter-spacing:-.3px;}
.quiz-header .sub{font-size:13px;color:var(--color-text-secondary);margin-top:.35rem;}

.q-block{background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:1.25rem 1.5rem;margin-bottom:1rem;}
.q-num{font-size:10px;color:var(--color-text-secondary);letter-spacing:.5px;text-transform:lowercase;margin-bottom:.5rem;}
.q-text{font-size:14px;color:var(--color-text-primary);margin-bottom:1rem;line-height:1.55;}

/* single / multi choices */
.choices{display:flex;flex-direction:column;gap:.5rem;}
.choice-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.55rem .75rem;border-radius:6px;border:0.5px solid var(--color-border-tertiary);transition:border-color .15s,background .15s;font-size:13px;color:var(--color-text-primary);}
.choice-label:hover{border-color:rgba(255,95,31,.45);background:rgba(255,95,31,.06);}
.choice-label input{accent-color:#ff5f1f;width:14px;height:14px;flex-shrink:0;}
.choice-label input:checked + span{color:#ff5f1f;}

/* text input */
.text-answer{width:100%;background:transparent;border:0.5px solid var(--color-border-tertiary);border-radius:6px;padding:.6rem .85rem;font-family:inherit;font-size:13px;color:var(--color-text-primary);outline:none;transition:border-color .15s;}
.text-answer:focus{border-color:rgba(255,95,31,.6);}

.quiz-footer{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;}
.q-count{font-size:12px;color:var(--color-text-secondary);}

.btn-submit{display:inline-flex;align-items:center;gap:.5rem;background:#ff5f1f;color:#fff;border:none;border-radius:6px;padding:.6rem 1.25rem;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:opacity .15s;}
.btn-submit:hover{opacity:.85;}


/* ── Layout ─────────────────────────────────────────────────────── */
.codegen-wrap         { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.codegen-header       { margin-bottom: 2rem; }
.codegen-header h1    { font-size: 1.8rem; font-weight: 700; margin-bottom: .35rem; }
.codegen-header p     { color: var(--color-muted); font-size: .95rem; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.cg-tabs              { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: .75rem; }
.cg-tab               { padding: .45rem 1rem; border-radius: 6px; border: 1px solid transparent; font-size: .875rem; cursor: pointer; background: none; color: var(--color-muted); transition: all .15s; }
.cg-tab:hover         { background: var(--color-surface-2); color: var(--color-text); }
.cg-tab.active        { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ── Panels ──────────────────────────────────────────────────────── */
.cg-panel             { display: none; }
.cg-panel.active      { display: block; }

/* ── Form elements ───────────────────────────────────────────────── */
.cg-row               { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.cg-row.triple        { grid-template-columns: 1fr 1fr 1fr; }
.cg-field             { display: flex; flex-direction: column; gap: .3rem; }
.cg-field label       { font-size: .75rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.cg-field textarea,
.cg-field input,
.cg-field select      { width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); padding: .5rem .75rem; font-size: .875rem; font-family: inherit; }
.cg-field textarea    { font-family: var(--font-mono, monospace); font-size: .8rem; line-height: 1.5; resize: vertical; min-height: 110px; }
.cg-field textarea:focus,
.cg-field input:focus,
.cg-field select:focus { outline: none; border-color: var(--color-accent); }

/* ── Check pills ─────────────────────────────────────────────────── */
.cg-checks            { display: flex; flex-wrap: wrap; gap: .5rem; }
.cg-pill              { display: flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: .8rem; cursor: pointer; color: var(--color-muted); transition: all .12s; user-select: none; }
.cg-pill:hover        { border-color: var(--color-accent); color: var(--color-text); }
.cg-pill.on           { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.cg-pill input        { display: none; }

/* ── Generate button ─────────────────────────────────────────────── */
.cg-gen-btn           { margin-top: 1.25rem; width: 100%; padding: .7rem; background: var(--color-accent); color: #fff; border: none; border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: opacity .15s; }
.cg-gen-btn:hover     { opacity: .88; }
.cg-gen-btn:disabled  { opacity: .4; cursor: not-allowed; }

/* ── Output ──────────────────────────────────────────────────────── */
.cg-output            { margin-top: 2rem; display: none; }
.cg-out-tabs          { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 0; }
.cg-out-tab           { padding: .35rem .9rem; font-size: .8rem; border-radius: 6px 6px 0 0; border: 1px solid var(--color-border); border-bottom: none; cursor: pointer; background: var(--color-surface-2); color: var(--color-muted); transition: all .1s; }
.cg-out-tab.active    { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.cg-out-box           { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 8px 8px 8px; padding: 1rem; position: relative; }
.cg-code              { font-family: var(--font-mono, monospace); font-size: .78rem; line-height: 1.65; white-space: pre-wrap; color: var(--color-text); max-height: 460px; overflow-y: auto; }
.cg-copy-btn          { position: absolute; top: .6rem; right: .6rem; padding: .3rem .75rem; font-size: .75rem; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; color: var(--color-muted); }
.cg-copy-btn:hover    { color: var(--color-text); }
.cg-status            { font-size: .75rem; color: var(--color-muted); margin-top: .5rem; min-height: 1rem; }
.cg-usage             { font-size: .7rem; color: var(--color-muted); margin-top: .25rem; }

/* ── Spinner ─────────────────────────────────────────────────────── */
.cg-spinner           { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: cg-spin .7s linear infinite; }
@keyframes cg-spin    { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────on garde ? au dessus─── */
@media (max-width: 600px) {
    .cg-row, .cg-row.triple { grid-template-columns: 1fr; }
}

.cg-wrap            { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.cg-header          { margin-bottom: 2rem; }
.cg-header h1       { font-size: 1.8rem; font-weight: 700; margin-bottom: .3rem; }
.cg-header p        { color: var(--color-muted); font-size: .9rem; }

/* Tabs principaux */
.cg-tabs            { display: flex; gap: .4rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: .75rem; }
.cg-tab             { padding: .45rem 1.2rem; border-radius: 6px; font-size: .875rem; cursor: pointer; background: none; border: 1px solid transparent; color: var(--color-muted); transition: all .15s; }
.cg-tab:hover       { background: var(--color-surface-2); color: var(--color-text); }
.cg-tab.active      { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.cg-panel           { display: none; }
.cg-panel.active    { display: block; }

/* Form */
.cg-row             { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.cg-row.triple      { grid-template-columns: 1fr 1fr 1fr; }
.cg-field           { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.cg-field label     { font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.cg-field textarea,
.cg-field input,
.cg-field select    { width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); padding: .5rem .75rem; font-size: .875rem; font-family: inherit; }
.cg-field textarea  { font-family: var(--font-mono, monospace); font-size: .8rem; line-height: 1.6; resize: vertical; }
.cg-field textarea:focus,
.cg-field input:focus,
.cg-field select:focus { outline: none; border-color: var(--color-accent); }

/* Sections collapsibles */
.cg-section         { margin-bottom: 1.25rem; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.cg-section-head    { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--color-surface-2); cursor: pointer; user-select: none; font-size: .85rem; font-weight: 600; }
.cg-section-head:hover { background: var(--color-surface-3, var(--color-surface-2)); }
.cg-section-body    { padding: 1rem; display: none; }
.cg-section.open .cg-section-body { display: block; }
.cg-section-arrow   { transition: transform .2s; font-size: .7rem; }
.cg-section.open .cg-section-arrow { transform: rotate(90deg); }
.cg-section-count   { font-size: .72rem; color: var(--color-accent); margin-left: .4rem; }

/* Pills */
.cg-checks          { display: flex; flex-wrap: wrap; gap: .4rem; }
.cg-pill            { display: flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: .78rem; cursor: pointer; color: var(--color-muted); transition: all .12s; user-select: none; }
.cg-pill:hover      { border-color: var(--color-accent); color: var(--color-text); }
.cg-pill.on         { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.cg-pill input      { display: none; }
.cg-pill.pro::after { content: ' ★'; font-size: .65rem; opacity: .6; }

/* Bouton générer */
.cg-gen-btn         { width: 100%; padding: .75rem; margin-top: 1.5rem; background: var(--color-accent); color: #fff; border: none; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: opacity .15s; }
.cg-gen-btn:hover   { opacity: .88; }
.cg-gen-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Bouton preview */
.cg-preview-btn     { width: 100%; padding: .45rem; margin-top: .5rem; background: none; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 6px; font-size: .78rem; cursor: pointer; transition: all .15s; }
.cg-preview-btn:hover { border-color: var(--color-accent); color: var(--color-text); }

/* Output */
.cg-output          { margin-top: 2rem; display: none; }
.cg-out-tabs        { display: flex; gap: .3rem; flex-wrap: wrap; }
.cg-out-tab         { padding: .35rem .9rem; font-size: .78rem; border-radius: 6px 6px 0 0; border: 1px solid var(--color-border); border-bottom: none; cursor: pointer; background: var(--color-surface-2); color: var(--color-muted); }
.cg-out-tab.active  { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.cg-out-box         { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0 8px 8px 8px; padding: 1rem; position: relative; }
.cg-code            { font-family: var(--font-mono, monospace); font-size: .78rem; line-height: 1.65; white-space: pre-wrap; color: var(--color-text); max-height: 520px; overflow-y: auto; }
.cg-copy-btn        { position: absolute; top: .6rem; right: .6rem; padding: .3rem .8rem; font-size: .72rem; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; color: var(--color-muted); }
.cg-copy-btn:hover  { color: var(--color-text); }
.cg-status          { font-size: .75rem; color: var(--color-muted); margin-top: .5rem; }
.cg-usage           { font-size: .7rem; color: var(--color-muted); margin-top: .2rem; }

/* Spinner */
.cg-spinner         { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin     { to { transform: rotate(360deg); } }

/* Preview modal */
.cg-preview-box     { display: none; margin-top: .75rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; }
.cg-preview-box pre { font-family: var(--font-mono, monospace); font-size: .72rem; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }

@media (max-width: 640px) {
    .cg-row, .cg-row.triple { grid-template-columns: 1fr; }
}

.msl-code {
    background: #11151c;
    color: #d7dde3;
    border: 1px solid #232a35;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-x: auto;
    tab-size: 4;
}
.msl-code-title {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c7785;
    margin-bottom: .35rem;
}
.msl-kw    { color: #c97be0; font-weight: 600; }   /* keywords        */
.msl-bi    { color: #58b4ff; }                     /* builtins        */
.msl-bpy   { color: #ff9d4d; font-weight: 600; }   /* bpy/mathutils   */
.msl-self  { color: #ff7a93; font-style: italic; } /* self / cls      */
.msl-str   { color: #9fd770; }                     /* strings         */
.msl-com   { color: #6c7785; font-style: italic; } /* comments        */
.msl-num   { color: #ffd166; }                      /* numbers         */
.msl-dec   { color: #ffd166; font-weight: 600; }    /* decorators @x   */
.msl-def   { color: #58b4ff; font-weight: 600; }    /* nom def/class   */
.msl-op    { color: #9aa6b2; }                      /* opérateurs      */

.section-break {
    display: flex; align-items: center; gap: 1rem;
    margin: 3rem 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.section-break::before,
.section-break::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.section-break .label {
    white-space: nowrap;
    display: flex; align-items: center; gap: .5rem;
    color: var(--accent);
}
.section-break .label::before { content: "◆"; font-size: .6rem; }

.tip {
    color: var(--text);
    border-bottom: 1px dotted var(--metal);
    cursor: help;
    position: relative;
}
.tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 0; bottom: 100%;
    margin-bottom: 6px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.72rem;
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    z-index: 50;
}
.tip:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.kc-tools    { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.kc-filter   { flex:1 1 260px; max-width:420px; background:var(--bg2); color:var(--text);
               border:1px solid var(--line); border-radius:6px; padding:0.5rem 0.75rem;
               font-family:var(--mono); font-size:0.8rem; }
.kc-filter:focus { outline:none; border-color:var(--accent); }
.kc-count    { color:var(--muted); font-size:0.75rem; font-family:var(--mono); white-space:nowrap; }
.kc-sec      { margin:0 0 1.75rem; }
.kc-group    { font-size:0.85rem; color:var(--muted); font-weight:600; margin:0 0 0.5rem; }
.kc-table    { width:100%; border-collapse:collapse; font-size:0.8rem; }
.kc-table th { padding:8px 12px; color:var(--muted); font-weight:500; text-align:left;
               border-bottom:1px solid var(--line); }
.kc-table td { padding:6px 12px; border-bottom:1px solid var(--line); text-align:left; }
.kc-table tbody tr:hover { background:rgba(255,255,255,0.03); }
.kc-table .kc-c { text-align:center; width:4.5rem; }
.kc-key      { font-weight:600; }
.kc-2nd      { color:var(--muted); font-weight:500; }
.kc-alt      { color:var(--muted); font-size:0.9em; font-weight:400; margin-left:0.35em; }
.kc-const    { font-size:0.73rem; color:var(--muted); }
@media (max-width:640px) {
    .kc-table th:last-child, .kc-table td:last-child { display:none; }
}

.comments-title {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--text);
    margin: 0 0 1rem;
}
.comments-empty { color: var(--muted); font-size: 0.78rem; }
.comment {
    border-left: 1px solid var(--line);
    padding: 0 0 0 0.75rem;
    margin-bottom: 1rem;
}
.comment-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-family: var(--mono);
}
.comment-head strong { color: var(--accent); }
.comment-head .comment-anon { color: var(--muted); font-weight: 500; }
.comment-head time { color: var(--muted); font-size: 0.68rem; }
.comment-body {
    margin: 0.35rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.comment-reply {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.68rem;
    cursor: pointer;
}
.comment-reply:hover { color: var(--accent); }
.comment-form {
    border-top: 1px solid var(--line);
    margin-top: 1.25rem;
    padding-top: 1rem;
}
.comment-reply-to {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-family: var(--mono);
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.comment-reply-to button {
    background: none; border: none; color: var(--muted); cursor: pointer;
}
/* une regle display sur la classe l'emporte sur le [hidden] du navigateur */
.comment-reply-to[hidden] { display: none; }
.comment-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 6px 8px;
    margin-bottom: 0.5rem;
    resize: vertical;
}
.comment-input:focus { outline: 1px solid var(--accent); }
.comment-submit {
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: var(--mono);
    font-size: 0.74rem;
    padding: 6px 16px;
    cursor: pointer;
}
.comment-submit[disabled] { opacity: 0.5; cursor: default; }
.comment-error { color: #ff6b6b; font-size: 0.72rem; margin: 0 0 0.5rem; }
.comment-hint {
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.75rem;
    line-height: 1.5;
}

.anim {
    width: 216px;
    height: 216px;
    background-image: url('/static/assets/spritesheet.png');
    background-size: calc(216px * 17) 216px;
    animation: play 5s steps(17) infinite;
}

@keyframes play {
    from { background-position: 0 0; }
    to   { background-position: calc(-216px * 17) 0; }
}

@keyframes dropSign {
    0% {
        transform: rotateX(90deg) rotateY(-10deg);
        opacity: 0;
    }
    60% {
        transform: rotateX(-20deg) rotateY(-5deg);
    }
    80% {
        transform: rotateX(10deg) rotateY(2deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes swing {
    0% { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}

.ch-num.annexe { color: black; }

.yell {
    font-size: 0.72rem;
    color: var(--bg);
    background: var(--accent);
    padding: 3px 14px; font-family: var(--mono); font-weight: 600;
    white-space: nowrap; transition: background .15s;"
    onmouseover="this.style.background='var(--accent2)'; this.style.color='#000'"
    onmouseout="this.style.background='var(--accent)'; this.style.color='var(--bg)'"
}

.site-footer {
    border-top: 1px solid var(--line);
    margin: 3rem 5.5rem 0;
    padding: 1.5rem 0 2rem;
    font-family: var(--mono);
    display: flex; flex-direction: column; gap: 1.25rem;
}
.footer-support {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--muted);
}
.footer-wink { color: var(--accent); }
.footer-links {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
    font-size: 0.78rem;
}

.footer-links a {
    color: var(--muted); border: none; text-decoration: none;
    letter-spacing: 0.03em; transition: color .15s;
}
.footer-links a:hover { color: var(--accent2); }
.footer-legal {
    font-size: 0.72rem; color: var(--muted); line-height: 1.7; margin: 0;
}
.footer-legal a { color: var(--accent2); }
@media (max-width: 700px) {
    .site-footer { margin: 2rem 1rem 0; }
    .footer-links { flex-direction: column; gap: 0.6rem; }
}