:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f1e8;--panel:#ffffffe0;--panel-border:#2f1f0f1f;--text:#1f1a14;--muted:#6a5e52;--primary:#1f4e79;--primary-strong:#173a5a;--success:#0d6b3d;--error:#8f2a1a;--shadow:0 24px 68px #33210b24;--radius:24px}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--text);background:radial-gradient(circle at top left, #d6a9543d, transparent 34%), radial-gradient(circle at right top, #1f4e7929, transparent 28%), linear-gradient(180deg, #fbf7f1 0%, var(--bg) 100%);margin:0;font-family:Trebuchet MS,Gill Sans,Segoe UI,sans-serif}body:before{content:"";pointer-events:none;background-image:linear-gradient(#1f1a1408 1px,#0000 1px),linear-gradient(90deg,#1f1a1408 1px,#0000 1px);background-size:42px 42px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#00000059,#0000 70%);mask-image:linear-gradient(#00000059,#0000 70%)}#app{width:100%}.shell{gap:18px;width:min(900px,100% - 32px);margin:0 auto;padding:40px 0 56px;display:grid}.hero{text-align:center;padding:8px 4px 6px}.eyebrow,.panel-kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0 0 6px;font-size:.75rem;font-weight:700}h1,h2,p{margin:0}h1{letter-spacing:-.04em;font-family:Georgia,Times New Roman,serif;font-size:clamp(2.8rem,7vw,4.8rem);line-height:.95}.lead{max-width:60ch;color:var(--muted);margin-top:14px;margin-left:auto;margin-right:auto;font-size:1.05rem;line-height:1.6}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:22px}.panel-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}h2{font-size:1.3rem;line-height:1.2}.challenge-panel{background:linear-gradient(135deg, #fffffff0, #fff7e4d1), var(--panel)}.instructions{color:var(--text);gap:10px;margin:0;padding-left:1.2rem;line-height:1.55;display:grid}.digit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.digit-box{background:linear-gradient(#fffdf9 0%,#f1e6d3 100%);border:1px solid #1f1a141f;border-radius:20px;place-items:center;min-height:92px;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;display:grid;box-shadow:inset 0 1px #ffffffd9}.formula-form{gap:12px;display:grid}.formula-label{font-weight:700}.hint{color:var(--muted);margin-top:-2px;font-size:.95rem;line-height:1.45}#formula-input{width:100%;min-height:54px;font:inherit;color:var(--text);background:#fffffff2;border:1px solid #1f1a1433;border-radius:16px;outline:none;padding:0 16px;font-size:1.05rem;transition:border-color .12s,box-shadow .12s}#formula-input:focus{border-color:#1f4e7973;box-shadow:0 0 0 4px #1f4e791f}.button-row{flex-wrap:wrap;gap:10px;display:flex}button{font:inherit;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;font-weight:700;transition:transform .12s,box-shadow .12s,background-color .12s;display:inline-flex}button:hover{transform:translateY(-1px)}button:focus-visible{outline-offset:2px;outline:3px solid #1f4e7947}.primary-button,.ghost-button{min-height:46px;padding:0 18px}.primary-button{color:#fff;background:linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%);box-shadow:0 12px 24px #1f4e7933}.ghost-button{color:var(--primary-strong);background:#1f4e7914}.result{background:#ffffffb8;border:1px solid #1f1a1414;border-radius:16px;align-items:center;min-height:3rem;padding:14px 16px;font-weight:600;line-height:1.5;display:grid}.result--idle{color:var(--muted)}.result--success{color:var(--success);background:#edfbf3eb;border-color:#0d6b3d2e}.result--error{color:var(--error);background:#fff2eff2;border-color:#8f2a1a2e}.steps{gap:10px;margin:0;padding-left:1.25rem;display:grid}.steps li{line-height:1.55}.steps-empty{color:var(--muted);padding-left:0;list-style:none}@media (width<=640px){.shell{gap:14px;width:min(100% - 20px,900px);padding-top:18px;padding-bottom:28px}.panel{padding:18px}.panel-header{flex-direction:column}.hero{text-align:left}.lead{margin-left:0;margin-right:0}.digit-grid{gap:10px}.digit-box{min-height:76px}.button-row{width:100%}.primary-button,.ghost-button{justify-content:center;width:100%}}