:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; color: #18302c; background: #e9eee9; }
    .shell { max-width: 1100px; margin: 0 auto; padding: 48px 24px 70px; }
    .eyebrow { margin: 0 0 12px; color: #267565; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    h1 { margin: 0; font-size: clamp(36px, 6vw, 68px); letter-spacing: -.055em; line-height: 1.03; }
    .intro { margin: 18px 0 32px; max-width: 570px; color: #5e706c; font-size: 16px; line-height: 1.55; }
    .panel { padding: clamp(22px, 4vw, 36px); background: #fff; border: 1px solid #d8e2dc; border-radius: 24px; box-shadow: 0 20px 55px #173c2b0d; }
    label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 750; }
    .controls { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
    input { min-width: 250px; flex: 1 1 270px; padding: 15px 18px; border: 2px solid #d8e2dc; border-radius: 12px; outline: none; color: #17302c; background: #fff; font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; transition: border-color .15s, box-shadow .15s; }
    input:focus { border-color: #238773; box-shadow: 0 0 0 4px #23877320; }
    button { padding: 14px 20px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; transition: transform .15s, background .15s; }
    button:hover { transform: translateY(-2px); }
    button:focus-visible { outline: 3px solid #d5a441; outline-offset: 3px; }
    .primary { background: #187863; color: #fff; }
    .primary:hover { background: #116b58; }
    .secondary { background: #edf4ef; color: #1a6859; }
    .secondary:hover { background: #e0eee5; }
    .hint { margin: 12px 0 0; color: #758681; font-size: 13px; }
    .error { min-height: 22px; margin: 8px 0 0; color: #a23f38; font-size: 13px; font-weight: 650; }
    .work-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
    .work-header h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
    .badge { padding: 7px 11px; border-radius: 99px; background: #edf4ef; color: #287260; font-size: 12px; font-weight: 750; white-space: nowrap; }
    .work-frame { overflow-x: auto; border: 1px solid #dfe7df; border-radius: 17px; background: #fbfcf8; padding: 24px 28px; }
    #paper { border-collapse: collapse; table-layout: fixed; width: max-content; margin: 0; }
    #paper td { width: 39px; min-width: 39px; height: 53px; padding: 0; text-align: center; vertical-align: middle; color: #213e37; font-size: 31px; font-weight: 650; }
    #paper td.bar { border-bottom: 2.5px solid #234e43; }
    #paper td.accent { color: #bc7f20; }
    #paper td.answer { color: #16806b; }
    #paper td.muted { color: #c58d39; font-size: 22px; font-weight: 600; }
    #paper math { font-family: "Cambria Math", "STIX Two Math", serif; font-size: inherit; }
    .step-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #dfe9e2; color: #50675d; font-size: 15px; line-height: 1.5; }
    @media (max-width: 650px) { .shell { padding: 30px 16px 48px; } .panel { border-radius: 18px; } .controls button { flex: 1 1 100%; } .intro { margin-bottom: 24px; } }