:root{--color-page:#dce4ed;--color-page-deep:#c8d4e0;--color-surface:#f2f6fa;--color-surface-border:#b8c8d8;--color-text-muted:#6a7f94;--vf-stroke:#7a92a8;--vf-fill:#4d6478;--vf-ledger:#a8b8c8;--vf-canvas:#f2f6fa;--shadow-soft:0 8px 32px #4a64781f}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--color-text-muted);background:linear-gradient(165deg, var(--color-page) 0%, #e8eef5 45%, var(--color-page-deep) 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.vexflow-page{justify-content:center;align-items:center;min-height:100vh;padding:2rem 1.5rem;display:flex}.vexflow-card{border:1px solid var(--color-surface-border);background:var(--color-surface);width:min(100%,56rem);max-width:96vw;box-shadow:var(--shadow-soft);border-radius:16px;flex-direction:column;align-items:stretch;padding:1.75rem 2rem 2rem;display:flex}.vexflow-output{scrollbar-color:var(--color-surface-border) transparent;justify-content:center;width:100%;display:flex;overflow-x:auto}.vexflow-output svg{width:100%;height:auto;display:block}.vexflow-hint{text-align:center;letter-spacing:.02em;color:var(--color-text-muted);opacity:.85;margin:1.25rem 0 0;font-size:.8125rem}.vexflow-portrait-prompt{display:none}.vexflow-rotate-image{width:clamp(4.5rem,28vw,6.5rem);height:auto;display:block}@media (orientation:portrait) and (width<=31.25rem){.vexflow-page{min-height:100dvh;padding:1.5rem 1rem}.vexflow-card{flex:1;justify-content:center;min-height:min(100%,28rem)}.vexflow-output,.vexflow-hint-controls{display:none}.vexflow-portrait-prompt{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;padding:1rem .5rem .5rem;display:flex}.vexflow-hint-portrait{max-width:16rem;margin:0;font-size:.9375rem;line-height:1.45}}@media (orientation:landscape) and (height<=31.25rem){body{overflow:hidden}.vexflow-page{align-items:stretch;height:calc(100dvh - 2rem);min-height:calc(100dvh - 2rem);margin-top:2rem;padding:.5rem .75rem}.vexflow-card{width:100%;max-width:none;height:100%;box-shadow:none;background:0 0;border:none;border-radius:0}.vexflow-output{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:hidden}.vexflow-output svg{width:100%;max-width:100%;height:auto;max-height:100%;display:block}.vexflow-hint{flex-shrink:0;margin:.375rem 0 0;font-size:.75rem;line-height:1.3}.vexflow-portrait-prompt{display:none}}.app-settings{z-index:1000;flex-direction:column;justify-content:center;align-items:center;gap:.375rem;width:100%;min-height:2rem;display:flex;position:fixed;top:1rem;left:0}.app-settings-label{align-items:center;gap:.5rem;display:flex}.app-settings-input{color:#4d6478;background-color:#f8fbff;border:1px solid #ccc;border-radius:.25rem;width:4.5rem;padding:.5rem .625rem}.app-settings-select{color:#4d6478;background-color:#f8fbff;border:1px solid #ccc;border-radius:.25rem;padding:.5rem .625rem}.app-settings-button{cursor:pointer;background-color:#f0f0f0;border:1px solid #ccc;border-radius:.25rem;padding:.5rem 1rem}.app-settings-button:disabled{opacity:.45;cursor:not-allowed}.app-settings-error{color:#8f4d5b;margin:0;font-size:.75rem}@media (orientation:portrait) and (width<=31.25rem){body{overflow:hidden}.app-settings{display:none}}