.kamea-page {
    --k-ink: #171512;
    --k-cream: #fffdf3;
    --k-paper: #fffef9;
    --k-yellow: #ffd400;
    --k-yellow-soft: #fff3b8;
    --k-gray: #716b60;
    --k-muted: #9a9284;
    --k-brass: #9a6f16;
    --k-line: #1d1b17;
    --k-line-soft: #cfc5a8;
    --sat: #a27611;
    --sat-bg: #fbf0c5;
    --jup: #326da5;
    --jup-bg: #e8f1fa;
    --mar: #ad3b2f;
    --mar-bg: #fae6e0;
    --sol: #a96a0a;
    --sol-bg: #fff0c9;
    --ven: #327b50;
    --ven-bg: #e5f2e8;
    --mer: #684b9c;
    --mer-bg: #eee7f7;
    --lun: #286c87;
    --lun-bg: #e4f1f5;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 2rem;
    color: var(--k-ink);
}

.kamea-page button,
.kamea-page input {
    font: inherit;
}

.kamea-masthead {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.15rem clamp(1rem, 3vw, 2.25rem) 1.35rem;
    background: var(--k-paper);
    border: var(--border-thick);
    box-shadow: var(--shadow-comic);
}

.kamea-masthead::after {
    position: absolute;
    right: -3.5rem;
    bottom: -5.8rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid var(--k-brass);
    border-radius: 50%;
    box-shadow: 0 0 0 12px var(--k-paper), 0 0 0 13px var(--k-brass), 0 0 0 28px var(--k-paper), 0 0 0 29px var(--k-brass);
    content: "";
    opacity: .28;
    pointer-events: none;
}

.kamea-masthead-top,
.kamea-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.kamea-masthead-top {
    position: relative;
    z-index: 1;
    margin-bottom: .7rem;
    color: var(--k-brass);
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.kamea-masthead-code {
    color: var(--k-gray);
}

.kamea-masthead h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--k-ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.55rem);
    letter-spacing: .035em;
    line-height: 1.02;
    text-transform: uppercase;
}

.kamea-masthead h1 span:not(.kamea-title-mark) {
    color: var(--k-brass);
}

.kamea-title-mark {
    display: inline-block;
    margin-right: .3em;
    color: var(--k-yellow);
    font-size: .7em;
    -webkit-text-stroke: 1px var(--k-ink);
}

.kamea-masthead p {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: .55rem 0 0;
    color: var(--k-gray);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
}

.kamea-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: .4rem .7rem;
    color: var(--k-ink);
    background: var(--k-yellow);
    border: 2px solid var(--k-ink);
    box-shadow: 3px 3px 0 var(--k-ink);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

.kamea-badge span {
    color: var(--k-brass);
}

.kamea-rule {
    width: 11rem;
    height: 4px;
    margin-top: 1rem;
    background: linear-gradient(90deg, var(--k-ink) 0 40%, var(--k-yellow) 40% 70%, var(--k-brass) 70%);
}

.kamea-notice {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.4rem;
    padding: .75rem 1rem;
    background: var(--k-yellow-soft);
    border: var(--border-thin);
    box-shadow: var(--shadow-comic-sm);
}

.kamea-notice-mark {
    flex: 0 0 auto;
    color: var(--k-brass);
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
}

.kamea-notice p {
    flex: 1;
    margin: 0;
    color: var(--k-ink);
    font-size: .84rem;
    line-height: 1.45;
}

.kamea-guide-button {
    flex: 0 0 auto;
    padding: .42rem .7rem;
    color: var(--k-ink);
    background: var(--k-paper);
    border: 1.5px solid var(--k-ink);
    box-shadow: 2px 2px 0 var(--k-brass);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kamea-guide-button:hover,
.kamea-guide-button:focus-visible {
    background: var(--k-yellow);
    outline: 0;
    transform: translate(-1px, -1px);
}

.kamea-guide-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .25rem;
    border: 1px solid var(--k-ink);
    border-radius: 50%;
}

.kamea-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1.45rem;
    align-items: start;
}

.kamea-panel {
    min-width: 0;
    background: var(--k-paper);
    border: var(--border-medium);
    box-shadow: var(--shadow-comic);
}

.kamea-controls {
    background: var(--k-cream);
}

.kamea-preview-panel {
    padding: clamp(1rem, 2.4vw, 1.5rem);
}

.kamea-panel-kicker {
    margin-bottom: .3rem;
    color: var(--k-brass);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.kamea-controls > .kamea-panel-kicker,
.kamea-controls > h2 {
    margin-inline: 1rem;
}

.kamea-panel h2 {
    margin-top: 0;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--k-ink);
    color: var(--k-ink);
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kamea-controls > h2 {
    margin-bottom: 0;
}

.kamea-section {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--k-line-soft);
}

.kamea-section-compact {
    padding: 0;
}

.kamea-section-label,
.kamea-field-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .55rem;
    color: var(--k-gray);
    font-family: var(--font-display);
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.kamea-section-label::after {
    flex: 1;
    height: 1px;
    background: var(--k-line-soft);
    content: "";
}

.kamea-planet-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kamea-planet-row,
.kamea-sp-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    color: var(--k-ink);
    background: transparent;
    border: 1.5px solid var(--k-line-soft);
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.kamea-planet-row:hover,
.kamea-planet-row:focus-visible,
.kamea-sp-btn:hover,
.kamea-sp-btn:focus-visible {
    background: var(--k-paper);
    border-color: var(--k-ink);
    outline: 0;
}

.kamea-planet-row:focus-visible,
.kamea-sp-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--k-yellow);
}

.kamea-pr-bar,
.kamea-sp-bar {
    align-self: stretch;
    width: 4px;
    flex: 0 0 4px;
    background: var(--k-line-soft);
    transition: background .15s ease;
}

.kamea-pr-sym {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    color: var(--k-gray);
    font-size: 1.1rem;
}

.kamea-pr-name {
    flex: 1;
    padding-inline: .3rem;
    color: var(--k-gray);
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.kamea-pr-order,
.kamea-sp-step {
    padding-right: .55rem;
    color: var(--k-muted);
    font-family: var(--font-mono);
    font-size: .55rem;
}

.kamea-pr-led,
.kamea-sp-dot {
    width: 7px;
    height: 7px;
    margin-right: .55rem;
    background: var(--k-line-soft);
    border-radius: 50%;
}

.kamea-planet-row.active[data-p="saturn"] { background: var(--sat-bg); border-color: var(--sat); }
.kamea-planet-row.active[data-p="jupiter"] { background: var(--jup-bg); border-color: var(--jup); }
.kamea-planet-row.active[data-p="mars"] { background: var(--mar-bg); border-color: var(--mar); }
.kamea-planet-row.active[data-p="sol"] { background: var(--sol-bg); border-color: var(--sol); }
.kamea-planet-row.active[data-p="venus"] { background: var(--ven-bg); border-color: var(--ven); }
.kamea-planet-row.active[data-p="mercury"] { background: var(--mer-bg); border-color: var(--mer); }
.kamea-planet-row.active[data-p="luna"] { background: var(--lun-bg); border-color: var(--lun); }
.kamea-planet-row.active[data-p="saturn"] .kamea-pr-bar { background: var(--sat); }
.kamea-planet-row.active[data-p="jupiter"] .kamea-pr-bar { background: var(--jup); }
.kamea-planet-row.active[data-p="mars"] .kamea-pr-bar { background: var(--mar); }
.kamea-planet-row.active[data-p="sol"] .kamea-pr-bar { background: var(--sol); }
.kamea-planet-row.active[data-p="venus"] .kamea-pr-bar { background: var(--ven); }
.kamea-planet-row.active[data-p="mercury"] .kamea-pr-bar { background: var(--mer); }
.kamea-planet-row.active[data-p="luna"] .kamea-pr-bar { background: var(--lun); }
.kamea-planet-row.active[data-p="saturn"] .kamea-pr-name, .kamea-planet-row.active[data-p="saturn"] .kamea-pr-sym { color: var(--sat); }
.kamea-planet-row.active[data-p="jupiter"] .kamea-pr-name, .kamea-planet-row.active[data-p="jupiter"] .kamea-pr-sym { color: var(--jup); }
.kamea-planet-row.active[data-p="mars"] .kamea-pr-name, .kamea-planet-row.active[data-p="mars"] .kamea-pr-sym { color: var(--mar); }
.kamea-planet-row.active[data-p="sol"] .kamea-pr-name, .kamea-planet-row.active[data-p="sol"] .kamea-pr-sym { color: var(--sol); }
.kamea-planet-row.active[data-p="venus"] .kamea-pr-name, .kamea-planet-row.active[data-p="venus"] .kamea-pr-sym { color: var(--ven); }
.kamea-planet-row.active[data-p="mercury"] .kamea-pr-name, .kamea-planet-row.active[data-p="mercury"] .kamea-pr-sym { color: var(--mer); }
.kamea-planet-row.active[data-p="luna"] .kamea-pr-name, .kamea-planet-row.active[data-p="luna"] .kamea-pr-sym { color: var(--lun); }
.kamea-planet-row.active[data-p="saturn"] .kamea-pr-led { background: var(--sat); }
.kamea-planet-row.active[data-p="jupiter"] .kamea-pr-led { background: var(--jup); }
.kamea-planet-row.active[data-p="mars"] .kamea-pr-led { background: var(--mar); }
.kamea-planet-row.active[data-p="sol"] .kamea-pr-led { background: var(--sol); }
.kamea-planet-row.active[data-p="venus"] .kamea-pr-led { background: var(--ven); }
.kamea-planet-row.active[data-p="mercury"] .kamea-pr-led { background: var(--mer); }
.kamea-planet-row.active[data-p="luna"] .kamea-pr-led { background: var(--lun); }

.kamea-seg {
    display: flex;
    overflow: hidden;
    background: var(--k-paper);
    border: 1.5px solid var(--k-line);
}

.kamea-seg-btn {
    flex: 1;
    min-width: 0;
    padding: .48rem .28rem;
    color: var(--k-gray);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--k-line-soft);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}

.kamea-seg-btn:last-child { border-right: 0; }
.kamea-seg-btn:hover,
.kamea-seg-btn:focus-visible { background: var(--k-yellow-soft); color: var(--k-ink); outline: 0; }
.kamea-seg-btn.active { color: var(--k-ink); background: var(--k-yellow); }

.kamea-field-label {
    color: var(--k-ink);
    margin-bottom: .35rem;
}

#word-input {
    display: block;
    width: 100%;
    min-height: 2.55rem;
    padding: .5rem .7rem;
    color: var(--k-ink);
    background: var(--k-paper);
    border: 2px solid var(--k-ink);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: .95rem;
    letter-spacing: .06em;
    outline: 0;
    text-align: center;
}

#word-input:focus {
    background: var(--k-yellow-soft);
    box-shadow: var(--shadow-comic-sm);
}

#word-input.rtl {
    direction: rtl;
    font-family: var(--font-body);
    font-size: 1.2rem;
    text-align: right;
}

#word-input::placeholder {
    color: var(--k-muted);
    font-size: .78rem;
    font-style: italic;
}

.kamea-heb-keyboard {
    display: none;
    padding: .45rem;
    background: var(--k-paper);
    border: 1.5px solid var(--k-ink);
    border-top: 0;
}

.kamea-heb-keyboard.visible { display: block; }
.kamea-heb-grid { display: flex; flex-wrap: wrap; gap: 3px; direction: rtl; }
.kamea-heb-key {
    display: flex;
    min-width: 34px;
    padding: 3px 4px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: var(--k-ink);
    background: var(--k-cream);
    border: 1px solid var(--k-line-soft);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1.4rem;
}
.kamea-heb-key:hover,
.kamea-heb-key:focus-visible { background: var(--k-yellow); outline: 0; }
.kamea-hk-name { color: var(--k-gray); font-family: var(--font-mono); font-size: .42rem; }
.kamea-hk-val { color: var(--k-brass); font-family: var(--font-mono); font-size: .46rem; }
.kamea-heb-key-del { font-family: var(--font-display); font-size: .56rem; font-weight: 700; }

.kamea-method-sel { display: none; }
.kamea-method-sel.visible { display: block; }

.kamea-toggles { display: flex; flex-direction: column; gap: 4px; }
.kamea-tog {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .42rem .55rem;
    color: var(--k-gray);
    background: transparent;
    border: 1.5px solid var(--k-line-soft);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .73rem;
    font-weight: 700;
    text-align: left;
}
.kamea-tog:hover,
.kamea-tog:focus-visible { background: var(--k-paper); border-color: var(--k-ink); outline: 0; }
.kamea-tog.active { color: var(--k-ink); background: var(--k-yellow-soft); border-color: var(--k-brass); }
.kamea-tog-switch {
    position: relative;
    width: 28px;
    height: 15px;
    flex: 0 0 28px;
    background: var(--k-line-soft);
    border-radius: 10px;
}
.kamea-tog-switch::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    background: var(--k-paper);
    border-radius: 50%;
    content: "";
    transition: transform .2s ease;
}
.kamea-tog.active .kamea-tog-switch { background: var(--k-brass); }
.kamea-tog.active .kamea-tog-switch::after { transform: translateX(13px); }

.kamea-step-wrap {
    display: none;
    overflow: hidden;
    border-bottom: 1px solid var(--k-line-soft);
}
.kamea-step-wrap.visible { display: block; }
.kamea-step-hdr {
    padding: .42rem .7rem;
    color: var(--k-gray);
    background: var(--k-yellow-soft);
    border-bottom: 1px solid var(--k-line-soft);
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.kamea-step-planets { display: flex; flex-direction: column; gap: 2px; padding: .4rem; }
.kamea-sp-btn { min-height: 27px; border-width: 1px; }
.kamea-sp-btn:has(.kamea-sp-sym) { font-size: .68rem; }
.kamea-sp-sym { display: flex; align-items: center; justify-content: center; width: 27px; color: var(--k-gray); font-size: .9rem; }
.kamea-sp-name { flex: 1; padding-inline: .25rem; color: var(--k-gray); font-family: var(--font-body); font-size: .66rem; font-weight: 700; }
.kamea-sp-btn.active { background: var(--k-yellow-soft); border-color: var(--k-brass); }
.kamea-sp-btn.active .kamea-sp-name { color: var(--k-ink); }
.kamea-sp-btn.active .kamea-sp-dot { background: var(--k-brass); }
.kamea-sp-btn.sp-auto { border-style: dashed; }
.kamea-synergy-bar { padding: .5rem .7rem; color: var(--k-brass); background: var(--k-yellow-soft); border-top: 1px solid var(--k-line-soft); font-family: var(--font-body); font-size: .68rem; font-style: italic; }

.kamea-pipeline { display: none; overflow: hidden; border-bottom: 1px solid var(--k-line-soft); }
.kamea-pipeline.visible { display: block; }
.kamea-pipe-row { display: flex; min-height: 27px; border-bottom: 1px solid var(--k-line-soft); }
.kamea-pipe-row:last-child { border-bottom: 0; }
.kamea-pipe-label { display: flex; min-width: 95px; align-items: center; padding: .25rem .45rem; color: var(--k-gray); background: var(--k-yellow-soft); border-right: 1px solid var(--k-line-soft); font-family: var(--font-mono); font-size: .5rem; }
.kamea-pipe-body { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 3px; padding: .25rem .35rem; }
.kamea-pipe-body.rtl { direction: rtl; justify-content: flex-end; }
.kamea-pipe-tok { padding: 1px 4px; color: var(--k-ink); background: var(--k-paper); border: 1px solid var(--k-line-soft); font-family: var(--font-mono); font-size: .62rem; }
.kamea-pipe-tok.heb { color: var(--k-brass); font-family: var(--font-body); font-size: .88rem; }
.kamea-pipe-tok.pair { font-size: .54rem; }
.kamea-pipe-empty { padding: 3px; color: var(--k-muted); font-size: .64rem; font-style: italic; }
.kamea-pipe-row.final .kamea-pipe-label { color: var(--k-brass); font-weight: 700; }
.kamea-pipe-row.final .kamea-pipe-tok { background: var(--k-yellow-soft); border-color: var(--k-brass); }

.kamea-reference details { margin-bottom: 4px; background: var(--k-paper); border: 1px solid var(--k-line-soft); }
.kamea-reference summary { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; color: var(--k-gray); cursor: pointer; font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.kamea-reference summary::after { color: var(--k-brass); content: "+"; font-size: .8rem; }
.kamea-reference details[open] summary::after { content: "−"; }
.kamea-reference summary::-webkit-details-marker { display: none; }
.kamea-ref-body { padding: .45rem; border-top: 1px solid var(--k-line-soft); }
.kamea-ref-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 1px; }
.kamea-ref-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.kamea-ref-heb { color: var(--k-brass); font-family: var(--font-body); font-size: 1.05rem; }
.kamea-ref-lat { color: var(--k-gray); font-family: var(--font-mono); font-size: .5rem; }
.kamea-ref-val { color: var(--k-brass); font-family: var(--font-mono); font-size: .53rem; }

.kamea-note { padding: .8rem 1rem 1rem; color: var(--k-gray); background: var(--k-yellow-soft); font-family: var(--font-body); font-size: .72rem; font-style: italic; line-height: 1.55; }
.kamea-note strong { color: var(--k-ink); font-family: var(--font-display); font-size: .62rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.kamea-note p { margin: .45rem 0 0; }

.kamea-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kamea-preview-heading h2 { margin-bottom: 1rem; }
.kamea-live-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem; color: var(--k-ink); background: var(--k-yellow); border: 1.5px solid var(--k-ink); font-family: var(--font-mono); font-size: .61rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.kamea-live-badge span { width: .45rem; height: .45rem; background: var(--k-ink); border-radius: 50%; animation: kamea-pulse 1.8s ease-in-out infinite; }
@keyframes kamea-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.kamea-canvas-frame {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: .6rem;
    background: linear-gradient(135deg, #5f4817, #b48b34, #5f4817);
    border: 2px solid var(--k-ink);
    box-shadow: 5px 5px 0 var(--k-ink);
}

#kamea-canvas { display: block; width: 100%; height: auto; background: #ecd9a4; }
.kamea-info-strip { display: flex; width: 100%; max-width: 620px; margin: 1rem auto 0; overflow: hidden; background: var(--k-cream); border: 1.5px solid var(--k-ink); }
.kamea-info-cell { flex: 1; padding: .45rem .3rem; color: var(--k-gray); border-right: 1px solid var(--k-line-soft); font-family: var(--font-mono); font-size: .58rem; text-align: center; }
.kamea-info-cell:last-child { border-right: 0; }
.kamea-info-cell strong { display: block; margin-bottom: 2px; color: var(--k-ink); font-size: .68rem; }
.kamea-chips-wrap { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 620px; min-height: 50px; flex-wrap: wrap; gap: 4px; margin: .6rem auto; }
.kamea-chip { display: flex; min-width: 34px; padding: .3rem .45rem; flex-direction: column; align-items: center; background: var(--k-cream); border: 1px solid var(--k-line-soft); border-top: 3px solid var(--k-brass); }
.kamea-chip.active { border-top-color: var(--k-ink); }
.kamea-ch-lat { color: var(--k-ink); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; }
.kamea-ch-heb { color: var(--k-brass); font-family: var(--font-body); font-size: .95rem; line-height: 1; }
.kamea-ch-src, .kamea-ch-raw, .kamea-ch-num { color: var(--k-gray); font-family: var(--font-mono); font-size: .48rem; line-height: 1.2; }
.kamea-ch-arr { color: var(--k-muted); font-size: .45rem; line-height: 1; }
.kamea-empty-hint { color: var(--k-gray); font-family: var(--font-body); font-size: .8rem; font-style: italic; }
.kamea-display-note { margin: .2rem 0 .85rem; color: var(--k-gray); font-size: .76rem; font-style: italic; text-align: center; }
.kamea-download-row { display: flex; width: 100%; max-width: 620px; flex-wrap: wrap; gap: .55rem; margin: 0 auto; }
.kamea-dl-btn { flex: 1; min-height: 2.45rem; padding: .5rem .65rem; color: var(--k-ink); background: var(--k-paper); border: var(--border-thin); box-shadow: var(--shadow-comic-sm); cursor: pointer; font-family: var(--font-display); font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.kamea-dl-btn:hover, .kamea-dl-btn:focus-visible { background: var(--k-yellow); outline: 0; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--k-ink); }
.kamea-dl-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.kamea-dl-btn.accent { color: var(--k-yellow); background: var(--k-ink); }
.kamea-dl-btn.accent:hover, .kamea-dl-btn.accent:focus-visible { color: var(--k-ink); }
.kamea-dl-btn.rainbow { color: #fff; background: linear-gradient(90deg, #ad3b2f, #a27611, #327b50, #326da5, #684b9c, #ad3b2f); background-size: 200%; text-shadow: 1px 1px 0 #111; animation: kamea-rainbow 5s linear infinite; }
@keyframes kamea-rainbow { from { background-position: 0%; } to { background-position: 200%; } }

.kamea-modal-overlay { display: none; position: fixed; z-index: 100000; inset: 0; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; overscroll-behavior: contain; background: rgba(17, 15, 11, .76); }
.kamea-modal-overlay.open { display: flex !important; }
.kamea-modal { width: 100%; max-width: 800px; margin: auto; background: var(--k-paper); border: 3px solid var(--k-ink); box-shadow: 8px 8px 0 var(--k-ink); }
.kamea-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--k-yellow); border-bottom: 2px solid var(--k-ink); }
.kamea-modal-header h2 { margin: 0; color: var(--k-ink); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; }
.kamea-modal-header h2 span { margin-right: .35rem; }
.kamea-modal-close { display: flex; width: 31px; height: 31px; align-items: center; justify-content: center; color: var(--k-ink); background: var(--k-paper); border: 1.5px solid var(--k-ink); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.kamea-modal-close:hover, .kamea-modal-close:focus-visible { background: var(--k-ink); color: var(--k-yellow); outline: 0; }
.kamea-modal-tabs { display: flex; overflow-x: auto; border-bottom: 2px solid var(--k-ink); }
.kamea-m-tab { flex: 0 0 auto; padding: .75rem .8rem; color: var(--k-gray); background: var(--k-paper); border: 0; border-right: 1px solid var(--k-line-soft); border-bottom: 4px solid transparent; cursor: pointer; font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kamea-m-tab:hover, .kamea-m-tab:focus-visible { background: var(--k-yellow-soft); outline: 0; }
.kamea-m-tab.active { color: var(--k-ink); border-bottom-color: var(--k-brass); }
.kamea-modal-body { display: none; padding: clamp(1rem, 3vw, 1.75rem); }
.kamea-modal-body.active { display: block; }
.kamea-modal-body h3 { margin: 0 0 .65rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--k-ink); color: var(--k-brass); font-family: var(--font-display); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.kamea-modal-body h3:not(:first-child) { margin-top: 1.5rem; }
.kamea-modal-body p, .kamea-guide-steps { color: var(--k-ink); font-family: var(--font-body); font-size: .88rem; line-height: 1.7; }
.kamea-modal-body p { margin: 0 0 .8rem; }
.kamea-modal-body em { color: var(--k-brass); }
.kamea-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .5rem; margin: 1rem 0 1.25rem; }
.kamea-guide-grid div { display: flex; padding: .55rem; flex-direction: column; background: var(--k-yellow-soft); border: 1px solid var(--k-line-soft); }
.kamea-guide-grid strong { font-family: var(--font-display); font-size: .72rem; }
.kamea-guide-grid span { margin-top: .2rem; color: var(--k-gray); font-family: var(--font-mono); font-size: .6rem; }
.kamea-guide-steps { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding-left: 1.35rem; }
.kamea-guide-steps li { padding-left: .25rem; }
.kamea-guide-steps strong { font-family: var(--font-display); letter-spacing: .03em; }
.kamea-guide-note { margin: 1rem 0; padding: .7rem .85rem; background: var(--k-yellow-soft); border-left: 4px solid var(--k-brass); color: var(--k-ink); font-family: var(--font-body); font-size: .82rem; line-height: 1.6; }
.kamea-guide-note strong { font-family: var(--font-display); text-transform: uppercase; }

@media (max-width: 900px) {
    .kamea-layout { grid-template-columns: 1fr; }
    .kamea-controls { order: 1; }
    .kamea-preview-panel { order: 2; }
}

@media (max-width: 575px) {
    .kamea-page { padding-inline: .1rem; }
    .kamea-masthead-top, .kamea-title-row { flex-direction: column; }
    .kamea-masthead h1 { font-size: 2rem; }
    .kamea-badge { align-self: flex-start; }
    .kamea-notice { align-items: flex-start; flex-wrap: wrap; }
    .kamea-notice p { flex-basis: calc(100% - 2.1rem); }
    .kamea-guide-button { margin-left: 2.1rem; }
    .kamea-preview-heading h2 { font-size: 1.1rem; }
    .kamea-info-strip { overflow-x: auto; }
    .kamea-info-cell { min-width: 74px; }
    .kamea-download-row { flex-direction: column; }
    .kamea-dl-btn { flex: none; width: 100%; }
    .kamea-modal-overlay { padding: .7rem; }
    .kamea-modal-tabs { scrollbar-width: thin; }
}

@media print {
    .kamea-page { max-width: none; }
    .kamea-masthead, .kamea-notice, .kamea-controls, .kamea-download-row, .kamea-display-note, .kamea-panel-kicker, .kamea-live-badge { display: none !important; }
    .kamea-layout, .kamea-preview-panel { display: block; padding: 0; border: 0; box-shadow: none; }
    .kamea-canvas-frame { max-width: 760px; margin: 0 auto; border: 0; box-shadow: none; }
    .kamea-info-strip, .kamea-chips-wrap { display: none; }
}