:root{--bg: #eef2f4;--panel: #fdfdfb;--text: #1c232b;--muted: #6a7783;--grid: #d7dde4;--axis: #1e1f22;--accent: #1f7a8c;--accent-strong: #115a66;--accent-soft: #d6edf1;--border: #e2e6ea;--shadow: 0 10px 30px rgba(25, 30, 35, .12);--shadow-soft: 0 6px 18px rgba(25, 30, 35, .08);--radius: 12px;--font: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:var(--font);color:var(--text);background:var(--bg)}.app{min-height:100vh;background:radial-gradient(circle at top left,#ffffff 0%,var(--bg) 45%,#e7edf1 100%);transition:opacity .15s ease}.app.is-loading{opacity:0;visibility:hidden}.app-shell{height:100vh;display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden}.topbar{border-bottom:1px solid var(--border);background:var(--panel)!important;box-shadow:var(--shadow-soft)}.topbar-inner{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center}.topbar-title{font-weight:700!important;font-size:16px!important;letter-spacing:.2px;color:inherit;text-decoration:none;display:inline-flex;align-items:center}.topbar-title:hover{color:var(--accent)}.topbar-title img{height:28px;width:auto;display:block}.topbar-actions{display:flex;align-items:center;gap:10px}.mobile-actions{display:grid;gap:8px;padding:10px;border-radius:12px;background:#f6f8fa;border:1px solid var(--border)}.mobile-actions-title{font-size:12px;color:var(--muted);font-weight:600}.mobile-actions-buttons{display:grid;gap:8px}.icon-button{width:36px;height:36px;border-radius:10px!important;border:1px solid var(--border)!important;background:#fff!important;box-shadow:0 1px #0000000a}.primary-button{border-radius:999px!important;background:var(--accent)!important;text-transform:none!important;font-weight:600!important;box-shadow:0 6px 16px #1f7a8c40}.ghost-button{border-radius:10px!important;text-transform:none!important;background:#f2f5f7!important;border:1px solid var(--border)!important}.main-grid{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:0}.side-panel{height:100%;background:transparent;width:280px;border-right:1px solid var(--border);overflow:hidden}.main-grid.is-collapsed{grid-template-columns:0 minmax(0,1fr)}.main-grid.is-collapsed .side-panel{width:0;border-right:none;padding:0}.expression-list{padding:14px;display:grid;gap:12px;min-width:0}.expression-row{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;min-width:0}.expr-color{width:18px;height:28px;border-radius:6px;box-shadow:inset 0 0 0 1px #0000001f;position:relative;cursor:pointer}.expr-color .color-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.remove-button{border:1px solid var(--border)!important;background:#fff!important;width:28px;height:28px}.expr-actions{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.constants{margin-top:10px;display:grid;gap:8px}.constants-title{font-size:12px!important;font-weight:600!important;color:var(--muted)!important}.constant-row{display:grid;grid-template-columns:22px 1fr 64px;gap:8px;align-items:center}.constant-label{font-weight:600;font-size:12px}.const-range{width:100%}.const-number{width:64px;border:1px solid var(--border);border-radius:8px;padding:4px 6px;font-size:12px}.const-meta{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:6px}.const-mini{border:1px solid var(--border);border-radius:8px;padding:4px 6px;font-size:11px}.const-apply{border:1px solid var(--border);border-radius:8px;background:#fff;font-size:11px;padding:4px 6px}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.expr-hint{color:var(--muted)}.input-wrap{display:flex;align-items:center;gap:8px;flex:1;width:100%;min-width:0;font-weight:600;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:#f6f8fa;position:relative}.input-wrap.has-error{border-color:#e11d48;background:#fff5f6}.input-wrap.has-error span{color:#e11d48;display:inline-flex;align-items:center;gap:4px}.input-wrap.has-error span:after{content:""}.input-wrap.has-error input{border-color:#e11d48}.input-wrap span{white-space:nowrap}.input-wrap input{flex:1;min-width:0;width:100%;font-size:16px;padding:8px 10px;border-radius:10px;border:1px solid #d7dee6;background:#fff;color:var(--text)}.graph-stage{position:relative;background:#fff;border-left:1px solid var(--border);box-shadow:inset 0 1px #fff9;display:flex;min-height:0}.canvas-wrap{position:relative;width:100%;height:100%;overflow:hidden}#graph{width:100%;height:100%;display:block;touch-action:none}.hint{position:absolute;left:12px;bottom:12px;color:var(--muted);font-size:12px;background:#fffc;padding:4px 8px;border-radius:8px;border:1px solid rgba(0,0,0,.04)}.keyboard-dock{background:#f6f8fa;border-top:1px solid var(--border);padding:10px 16px 14px;box-shadow:var(--shadow-soft)}.keyboard-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--muted);justify-content:center}.keyboard-header .icon-button{margin-left:auto}.keyboard-title{font-size:13px;font-weight:600}.keyboard-tabs{display:none!important;background:#e9eef2;border-radius:999px;min-height:30px!important}.keyboard-tabs .MuiTab-root{min-height:30px!important;text-transform:none!important;font-size:12px!important;padding:6px 12px!important}.keyboard-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.keyboard-section-title{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}.keyboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:420px;margin:0 auto}.keyboard-grid-num{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:420px!important}.key{border-radius:12px;border:1px solid var(--border);background:#fff;padding:8px 0;font-weight:600;font-size:14px;min-width:0;cursor:pointer;box-shadow:0 1px #0000000a}.key-accent{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong)}.key-wide{grid-column:span 2}.credit-link{font-size:12px;text-align:right;color:var(--muted);padding:6px 10px 10px;text-decoration:none}@media (max-width: 900px){.main-grid{grid-template-columns:220px minmax(0,1fr)}.side-panel{width:220px}}.keyboard-dock.is-tabbed .keyboard-tabs{display:inline-flex!important}.keyboard-dock.is-tabbed .keyboard-sections{grid-template-columns:1fr}.keyboard-dock.is-tabbed .keyboard-section{display:none}.keyboard-dock.is-tabbed .keyboard-section.is-active{display:block}.keyboard-dock.is-tabbed .keyboard-section-title{display:none}@media (max-width: 720px){.topbar-inner{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.topbar-actions{grid-column:1 / -1;justify-content:flex-end;flex-wrap:wrap}.keyboard-title{display:none}.keyboard-grid{max-width:420px;grid-template-columns:repeat(4,minmax(0,1fr))}.keyboard-grid-num{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:420px!important}}@media (max-width: 530px){.keyboard-dock{padding:8px 10px 10px}.keyboard-grid{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}.keyboard-grid-num{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:420px!important}.key{padding:6px 0;font-size:12px}}