@font-face{font-family:Inter;src:url('/inter.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;--paper:#f7f4ed;--surface:#fffdf8;--ink:#1b2233;--muted:#515965;--accent:#254cb2;--blue:#204399;--line:#d9d6cc;--navy:#172641}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55}
a{color:var(--blue);text-underline-offset:.19em}
button,select,input,textarea{font:inherit}
button,select{cursor:pointer}
button,select,input,textarea{min-height:42px;border:1px solid #aaa99f;border-radius:5px;background:white;color:var(--ink)}
button,select{padding:.45rem .7rem}
button:hover{background:#eaf0ff}
:focus-visible{outline:3px solid #3361d2;outline-offset:3px}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.top,.footer{display:flex;align-items:center;justify-content:space-between;gap:1.25rem}
.top{min-height:76px;border-bottom:1px solid var(--line)}
.top a,.footer a{font-size:.87rem}
.top .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-size:1.25rem;font-weight:760}
.brand span{font:700 1rem ui-monospace,monospace;background:var(--accent);color:white;padding:.26rem .44rem;border-radius:4px}
.intro{padding:clamp(2.5rem,7vw,5rem) 0 2.15rem;display:grid;grid-template-columns:1.65fr 1fr;align-items:end;gap:2rem}
h1,h2,p{margin:0}
h1{font-family:Georgia,serif;font-size:clamp(3rem,7.6vw,6.4rem);font-weight:400;letter-spacing:-.075em;line-height:.93}
h1 span{color:var(--accent)}
.intro>p{font-size:1.04rem;max-width:27rem;color:var(--muted);padding-bottom:.35rem}
h2{font-size:1.22rem;line-height:1.2;letter-spacing:-.025em}
.workspace{display:grid;grid-template-columns:1.48fr 1fr;gap:1rem;align-items:stretch}
.editor,.inspector,.expansion,.outputs{min-width:0;border:1px solid var(--line);border-radius:10px;padding:clamp(1rem,3vw,2rem)}
.editor,.expansion,.outputs{background:var(--surface)}
.editor{display:flex;flex-direction:column}
.editor-top,.editor-bottom,.expansion-heading,.output-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap}
.editor-top p,.lesson p{color:var(--muted);margin-top:.3rem}
.size,.output-toolbar label,.expansion-heading label{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:650}
.matrix-scroll{margin:1.25rem 0;max-width:100%;padding:5px}
.matrix-input{display:grid;gap:.55rem}
.matrix-input[data-size="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.matrix-input[data-size="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.matrix-input[data-size="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.matrix-input[data-size="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.matrix-input input{width:100%;min-width:0;padding:.38rem .15rem;min-height:clamp(42px,6vw,62px);font:600 clamp(.78rem,2.6vw,1.16rem) ui-monospace,monospace;text-align:center}
.matrix-input .same-axis{background:#edf2ff;border-color:#8094bf}
.matrix-input .selected{background:var(--accent);color:white;border-color:var(--accent)}
.editor-bottom{justify-content:flex-start}
button{font-weight:650;font-size:.85rem}
.paste{margin-top:.9rem;font-size:.86rem}
.paste summary{cursor:pointer;color:var(--blue);width:max-content;max-width:100%;font-weight:650;padding:.25rem .1rem}
.paste label{display:block;margin:.35rem 0}
.paste textarea{display:block;width:100%;padding:.5rem;margin-bottom:.4rem}
.error,#paste-error{color:#9b3120;font-size:.86rem}
.error:not(:empty),#paste-error:not(:empty){margin-top:.5rem}
.inspector{background:var(--navy);border-color:var(--navy);color:#fff}
.inspector-heading{padding-bottom:.75rem;border-bottom:1px solid #4b5a73}
.coordinates{color:#b9cbfb;font-family:ui-monospace,monospace;font-size:.81rem;margin-top:.28rem}
.selection-note{margin:.9rem 0;color:#e1e8fa;font-size:.93rem}
.minor,.output-matrix{max-width:100%;overflow:auto}
.matrix-table{border-collapse:separate;border-spacing:0;margin:0;font:600 .95rem ui-monospace,monospace}
.matrix-table td{padding:.56rem;text-align:center;border:1px solid var(--line);min-width:2.4rem}
.inspector .matrix-table td{border-color:#52627e;background:#21334f}
.cofactor{padding-top:.8rem}
.cofactor p,.cofactor span{color:#c6d2ec;font-size:.79rem}
.cofactor strong{display:block;font:400 clamp(1.6rem,4vw,2.9rem) Georgia,serif;overflow-wrap:anywhere}
.result{display:grid;grid-template-columns:1.48fr 1fr;gap:1rem;margin-top:1rem}
.expansion-heading{align-items:flex-start}
.expansion-heading output{display:block;max-width:100%;overflow-wrap:anywhere;font:400 clamp(1.7rem,4vw,2.8rem) Georgia,serif;color:var(--blue)}
.expansion-heading>div{min-width:0}
.products{list-style:none;padding:0;margin:1rem 0 0}
.products li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);align-items:baseline;gap:.5rem;padding:.55rem 0;border-top:1px solid var(--line);font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.products small{color:var(--muted)}
.output-matrix{margin-top:1rem}
#copy-status{font-size:.85rem;margin-top:.35rem}
.lesson{width:100%;border-top:1px solid var(--line);padding:1.35rem 0;margin-top:2rem}
.lesson a{display:inline-block;margin-top:.5rem;font-weight:650}
.footer{border-top:1px solid var(--line);padding:1.2rem 0;margin-top:1.4rem}
.guide{padding:clamp(2.5rem,8vw,5rem) 0;max-width:790px}
.guide h1{font-size:clamp(2.7rem,8vw,5rem);margin-bottom:1.5rem}
.guide h2{margin:2rem 0 .65rem}
.guide p+p{margin-top:.8rem}
.guide .lead{font-size:1.2rem}
.guide-cta{display:inline-block;margin-top:1rem;font-weight:700}
@media(max-width:720px){.intro,.workspace,.result{grid-template-columns:1fr}.intro{gap:1rem}.wrap{width:calc(100% - 30px)}.lesson{width:100%}.matrix-input{gap:.35rem}.top{min-height:66px}}