:root{--bg:#ffffff;--panel:#ffffff;--muted:#6b7280;--text:#0b1220;--accent:#2563eb}
*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
main{max-width:900px;margin:36px auto;padding:28px}
h1{margin:0 0 8px;font-weight:600;color:var(--text)}
.panel{background:var(--panel);padding:18px;border-radius:8px;margin-top:14px;border:1px solid #eef2ff}
textarea{width:100%;font-size:16px;padding:10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;color:var(--text)}
.controls{margin-top:10px;display:flex;gap:8px;align-items:center}
button{background:var(--accent);border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
button:active{transform:translateY(1px)}
canvas{width:100%;height:160px;border-radius:8px;background:linear-gradient(180deg,#ffffff,#f8fafc);display:block;border:1px solid #eef2ff}
table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
td,th{padding:6px 8px;border-bottom:1px solid rgba(15,23,42,0.03);color:var(--text)}
.muted{color:var(--muted);font-size:13px;margin:6px 0 0}
footer{margin-top:18px;color:var(--muted);font-size:13px}

/* compact mapping: two-letter columns */
.map-compact td{padding:6px 10px}
.map-compact th{display:none}
.map-compact tr:nth-child(odd){background:transparent}

/* compact mapping grid */
#mapping-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;font-size:13px}
#mapping-grid .cell{padding:8px;border-radius:6px;border:1px solid #e6e9ef;background:#f8fafc;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 0 rgba(13,21,35,0.02)}
#mapping-grid .letter{font-weight:600;color:#0b1220}
#mapping-grid .note{color:#374151}

/* larger canvas for generative lines */
#anim{height:260px;background:linear-gradient(180deg,#ffffff,#f6f9fb);border-radius:8px}