:root{--content-max-width:1440px;--content-padding-x:clamp(16px,2.2vw,28px);--max-width:var(--content-max-width);--border-radius:12px;--font-mono:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}html[data-theme=light]{--color-bg:#f7f8fa;--color-bg-soft:#eef1f6;--color-text:#0f172a;--color-text-muted:#475569;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-border:#e2e8f0;--btn-primary-bg:#2563eb;--btn-primary-fg:#fff;--btn-primary-border:#2563eb;--btn-primary-hover-bg:#1d4ed8;--btn-primary-hover-fg:#fff;--btn-primary-hover-border:#1d4ed8;--btn-secondary-bg:#fff;--btn-secondary-fg:#2563eb;--btn-secondary-border:#2563eb;--btn-secondary-hover-bg:#1d4ed8;--btn-secondary-hover-fg:#fff;--btn-secondary-hover-border:#1d4ed8;--btn-ghost-fg:#0f172a;--btn-ghost-border:transparent;--btn-ghost-hover-bg:#eef1f6;--color-border-subtle:rgba(0,0,0,.12)}html[data-theme=dark]{--color-bg:#0b1221;--color-bg-soft:#111a2e;--color-text:#e2e8f0;--color-text-muted:#cbd5e1;--color-primary:#60a5fa;--color-primary-hover:#93c5fd;--color-border:#1e293b;--btn-primary-bg:#60a5fa;--btn-primary-fg:#0b1221;--btn-primary-border:#60a5fa;--btn-primary-hover-bg:#93c5fd;--btn-primary-hover-fg:#0b1221;--btn-primary-hover-border:#93c5fd;--btn-secondary-bg:transparent;--btn-secondary-fg:#93c5fd;--btn-secondary-border:#60a5fa;--btn-secondary-hover-bg:#93c5fd;--btn-secondary-hover-fg:#0b1221;--btn-secondary-hover-border:#93c5fd;--btn-ghost-fg:#e2e8f0;--btn-ghost-border:transparent;--btn-ghost-hover-bg:#111a2e;--color-border-subtle:rgba(148,163,184,.35)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow-x:hidden}ol,ul{list-style:none}a{color:inherit;text-decoration:none}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app-layout{max-width:100vw;width:100%;overflow-x:hidden}.app-layout,.content{display:flex;min-height:100vh}.content{flex-direction:column;flex:1 1;max-width:100%;min-width:0}.main-content{flex:1 1;padding:1.5rem;overflow-x:auto;min-width:0}.page-frame{width:100%;max-width:1240px;margin:0 auto;padding:24px;background:#fff;border:2px solid rgba(0,0,0,.12);border-radius:28px;box-shadow:0 18px 42px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:24px}.page-frame-body{width:100%}.volume-button{width:100%;padding:28px 24px;font-size:clamp(20px,2.4vw,24px);font-weight:700;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.12);color:#404040;box-shadow:0 12px 28px rgba(0,0,0,.12),inset 0 2px 0 hsla(0,0%,100%,.7);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer}.volume-button:hover:not(:disabled){transform:translateY(-1px);background:#f6f7f9;box-shadow:0 18px 38px rgba(0,0,0,.14),inset 0 2px 0 hsla(0,0%,100%,.8);color:#404040}.volume-button:active:not(:disabled){transform:translateY(1px);color:#404040}@media (max-width:820px){.main-content{padding:1.25rem}.page-frame{padding:20px;border-radius:22px}}@media (max-width:720px){.main-content{padding:12px;overflow:visible}.page-frame{max-width:100%;margin:0;padding:12px;border:none;border-radius:0;box-shadow:none;background:transparent}}@media (max-width:720px) and (orientation:portrait){body,html{overflow-x:clip}.app-layout{overflow:visible}.page-frame{gap:12px}}@media (max-width:920px) and (orientation:landscape){.app-content-with-tabs{padding-left:calc(82px + env(safe-area-inset-left))}.main-content{overflow:visible}.page-frame{display:block}.page-frame-body{min-width:0}}