:root{--page-bg:#f3eedc;--panel:#fffcf6eb;--line:#254a4f24;--ink:#1d2730;--muted:#60717d;--accent:#1f7c88;--accent-strong:#1f7c888a;--chip:#1b758114;--danger:#b64040;--soft-shadow:#3a3a2d0d 0 10px 20px -18px, #3a3a2d0d 0 4px 10px -10px;--sans:"Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Segoe UI", sans-serif;--heading:"Avenir Next", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;--mono:"SFMono-Regular", "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;font:16px/1.6 var(--sans);letter-spacing:.01em;color:var(--ink);background:radial-gradient(circle at top left, #2389910f, transparent 28%), linear-gradient(180deg, #faf7ec, var(--page-bg));font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{width:100%;height:100%}body{min-width:320px;margin:0;overflow:hidden}h1,h2{font-family:var(--heading);color:var(--ink)}h1{letter-spacing:-.04em;margin:0;font-size:clamp(32px,4vw,54px);line-height:1.06}h2{margin:0;font-size:16px;line-height:1.2}p{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline-offset:3px;outline:2px solid #1f7c886b}code{font-family:var(--mono)}.page{box-sizing:border-box;flex-direction:column;gap:8px;height:100dvh;min-height:100dvh;padding:8px 12px 0;display:flex;overflow:clip}.hero-panel{grid-template-columns:minmax(0,1fr) minmax(320px,auto);align-items:start;gap:10px;display:grid}.hero-brand-slot{justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex}.hero-brand{flex:auto;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;display:grid}.hero-social-links{flex:none;align-items:center;gap:3px;display:inline-flex}.hero-social-link{color:#1e2731a8;border-radius:6px;justify-content:center;align-items:center;width:31px;height:31px;line-height:0;text-decoration:none;transition:color .14s;display:inline-flex}.hero-social-link:hover{color:#12181ffa}.hero-social-icon{width:27px;height:27px;display:block}.hero-social-icon-x{transform:translate(.1px)translateY(.1px)}.hero-social-icon-youtube{transform:translate(.25px)translateY(.15px)}.brand-logo{object-fit:contain;align-self:center;width:auto;height:44px;transform:translateY(1px)}.brand-copy{gap:3px;min-width:0;padding-top:2px;display:grid}.brand-title{flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;display:flex}.brand-title-ja{letter-spacing:-.065em;color:#1e2731;text-shadow:0 0;font-family:Hiragino Maru Gothic ProN,Avenir Next Rounded,Marker Felt,Trebuchet MS,Arial Rounded MT Bold,sans-serif;font-size:35px;font-weight:950;line-height:1}.brand-title-en{letter-spacing:-.055em;color:#1e2731;font-family:Avenir Next Rounded,Trebuchet MS,Marker Felt,Arial Rounded MT Bold,sans-serif;font-size:35px;font-weight:900;line-height:1}.title-word{font:inherit}.lead{max-width:54ch;color:var(--muted);font-size:11px;line-height:1.35}.hero-card,.panel-block,.blueprint-shell,.empty-board,.warning-strip,.top-drawer{border:1px solid var(--line);background:var(--panel);box-shadow:var(--soft-shadow);border-radius:6px}.hero-card{background:radial-gradient(circle at 100% 0,#f3a94724,#0000 35%),linear-gradient(145deg,#fffdf5f5,#ecf6f8f5);flex-direction:column;justify-content:flex-start;gap:4px;padding:8px 10px;display:flex}.site-hero-card{gap:6px}.site-nav-row{justify-content:flex-end;min-width:0;display:flex}.site-nav-cluster{align-items:center;gap:10px;min-width:0;display:flex}.site-nav{flex-wrap:wrap;gap:5px;max-width:100%;display:inline-flex}.site-view-toggle{background:#ffffff8a;border:1px solid #2639421a;border-radius:999px;gap:3px;padding:3px}.site-entry-nav{gap:0}.site-nav-divider{background:#26394229;width:1px;height:20px}.site-nav button{background:var(--chip);color:var(--ink);font:inherit;border:1px solid #0000;border-radius:999px;padding:4px 10px;font-size:12px}.site-view-toggle button{background:0 0;min-width:74px}.site-entry-nav button{background:#ffffffb8}.site-nav button.active,.site-nav button:hover{border-color:var(--accent-strong);background:#22839129}.hero-action-row{flex-wrap:wrap;gap:5px;min-width:0;display:flex}.hero-action-row-right{justify-content:flex-end;align-items:center;min-width:0}.hero-status{text-align:right;justify-items:end;gap:2px;min-width:0;display:grid}.meta-input{gap:2px;min-width:160px;display:grid}.meta-input span{color:var(--muted);text-align:right;font-size:10px}.meta-input input{height:28px;color:var(--ink);font:inherit;background:#ffffffeb;border:1px solid #26394224;border-radius:999px;padding:4px 8px;font-size:12px}.dialog-meta-input{min-width:0}.dialog-meta-input span{text-align:left}.png-mode-options{grid-template-columns:1fr;gap:6px;display:grid}.png-mode-options button{color:var(--ink);font:inherit;text-align:left;background:#fffcf6f5;border:1px solid #26394224;border-radius:999px;padding:6px 10px;font-size:12px}.png-mode-options button.active{border-color:var(--accent-strong);background:#22839124}.action-divider{background:#26394229;width:1px;height:18px;margin:0 2px}.project-action-button{min-width:0}.project-action-icon{object-fit:contain;width:16px;height:16px;display:none}.workspace{flex-direction:column;flex:auto;gap:6px;min-height:0;display:flex;overflow:hidden}.workspace-single{min-width:0}.top-drawer{z-index:2;background:linear-gradient(#fffbf2f2,#f7f8f4f2),radial-gradient(circle at 100% 0,#22839114,#0000 35%);padding:6px 8px;position:relative}.top-drawer-toggles{flex-wrap:wrap;gap:5px;display:flex}.top-drawer-toggles button,.segmented button,.primary-button,.secondary-button,.upload-button,.rotation-button,.rows-control-button{font:inherit;border:1px solid #0000;border-radius:999px}.top-drawer-toggles button,.segmented button,.secondary-button,.rotation-button,.rows-control-button{background:var(--chip);color:var(--ink);padding:4px 9px;font-size:12px}.top-drawer-toggles button.active,.top-drawer-toggles button:hover:not(:disabled),.segmented button.active,.segmented button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.rotation-button:hover,.rows-control-button:hover:not(:disabled){border-color:var(--accent-strong)}.top-drawer-toggles button.active,.segmented button.active{background:#22839129}.top-drawer-toggles button:disabled,.segmented button:disabled,.secondary-button:disabled,.rows-control-button:disabled{opacity:.42;cursor:not-allowed}.top-drawer-panels{opacity:0;height:0;margin-top:0;transition:none;display:block;overflow:hidden;transform:none}.top-drawer-panels.open{opacity:1;height:76px;margin-top:6px;transform:none}.drawer-panel{width:100%;min-width:0;height:100%}.panel-block{padding:8px 10px}.panel-block.emphasis{background:linear-gradient(#fff3e1f2,#fffaf4f2)}.compact-panel h2{margin-bottom:5px;font-size:13px}.summary-heading-row{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:8px;display:flex}.summary-delete-button{white-space:nowrap;flex:none;min-width:fit-content;max-width:100%;padding-inline:9px;font-size:10px}.segmented{gap:5px;display:flex}.segmented.wrap{flex-wrap:wrap}.primary-button,.upload-button{color:#f7fbfb;background:linear-gradient(#21707c,#164e59);justify-content:center;align-items:center;padding:6px 11px;font-size:12px;font-weight:700;display:inline-flex}.upload-button{cursor:pointer}.upload-button input,.hidden-input{display:none}.helper-text,.compact-text{color:var(--muted);font-size:11px}.error-text{color:var(--danger);font-size:12px;font-weight:700}.summary-inline{white-space:nowrap;scrollbar-gutter:stable;align-items:stretch;gap:6px;height:42px;margin:0;display:flex;overflow:auto hidden}.summary-inline div{background:#ffffff94;border:1px solid #26394214;flex:none;gap:2px;padding:3px 7px;display:grid}.summary-inline dt{color:var(--muted);font-size:10px}.summary-inline dd{word-break:break-word;margin:0;font-size:12px;font-weight:700}.summary-actions{margin-top:6px}.resource-inline-row{scrollbar-width:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;overscroll-behavior-x:contain;width:100%;max-width:100%;padding-bottom:4px;display:block;overflow:auto hidden}.resource-inline-row:hover{scrollbar-width:thin}.resource-inline-row::-webkit-scrollbar{height:12px}.resource-inline-row::-webkit-scrollbar-thumb{background:#26394257;border:2px solid #ffffffbf;border-radius:999px}.resource-inline-row::-webkit-scrollbar-track{background:#26394214;border-radius:999px}.resource-inline-track{white-space:nowrap;align-items:center;gap:10px;width:max-content;min-width:max-content;display:inline-flex}.resource-inline-group{white-space:nowrap;flex:none;align-items:center;gap:6px;min-width:max-content;display:flex}.resource-title{color:var(--muted);flex:none;font-size:11px;font-weight:700}.resource-inline-list{flex:none;align-items:center;gap:4px;min-width:max-content;display:flex}.resource-chip{background:#ffffff94;border:1px solid #26394214;flex:none;align-items:center;gap:3px;padding:3px 4px;display:flex}.resource-chip-total{background:#ffecf5c7;border-color:#ad4a7047}.resource-total-symbol{color:#b03a72;font-size:14px;font-weight:900}.resource-icon{object-fit:cover;border:1px solid #26394214;width:26px;height:26px}.resource-chip span{font-size:11px;font-weight:700}.canvas-panel{flex-direction:column;flex:auto;gap:4px;min-width:0;min-height:0;display:flex;overflow:hidden}.blueprint-shell{overscroll-behavior:contain;background:radial-gradient(circle at top,#22839114,#0000 40%),linear-gradient(#fcfaf1fa,#f7f8f4fa);flex-direction:column;flex:auto;min-height:0;padding:6px;display:flex;overflow:hidden}.blueprint-toolbar{color:var(--muted);align-items:center;margin-bottom:2px;font-size:11px;display:flex}.blueprint-stage{isolation:isolate;flex:auto;min-height:0;position:relative;overflow:hidden}.blueprint-viewport{z-index:1;overscroll-behavior:contain;touch-action:none;scrollbar-gutter:stable both-edges;border:1px solid #26394214;height:100%;position:relative;overflow:auto hidden}.blueprint-scroll-content{box-sizing:content-box;align-items:stretch;min-height:100%;display:inline-flex;position:relative}.canvas-fixed-tools{z-index:5;pointer-events:auto;flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:absolute;top:6px;right:6px}.canvas-orientation-panel,.canvas-start-side-panel,.canvas-layer-switch,.canvas-rows-control,.compact-button{box-shadow:var(--soft-shadow);background:#fffcf6f5;border:1px solid #2639421a}.canvas-orientation-panel,.canvas-start-side-panel,.canvas-layer-switch{padding:5px}.canvas-start-side-panel{flex-direction:column;gap:5px;min-width:88px;display:flex}.canvas-start-side-title{letter-spacing:.08em;text-align:center;color:#263942c7;font-size:9px;font-weight:800}.canvas-start-side-options{grid-template-columns:1fr 1fr;gap:4px;display:grid}.canvas-start-side-options button{background:var(--chip);min-width:0;color:var(--ink);border:1px solid #0000;border-radius:999px;padding:4px 0;font-size:10px;font-weight:700}.canvas-start-side-options button.active{border-color:var(--accent-strong);background:#22839129}.orientation-cross{grid-template-rows:24px 24px 24px;grid-template-columns:24px 24px 24px;place-items:center;gap:4px;display:grid}.orientation-spacer{width:24px;height:24px}.rotation-button{place-items:center;width:24px;height:24px;padding:0;display:grid}.rotation-button img{width:13px;height:13px;display:block;transform:translate(.5px,-.5px)}.orientation-diamond{background:#ffffffeb;border:1px solid #2639422e;place-items:center;width:24px;height:24px;display:grid;transform:rotate(45deg)}.orientation-diamond span{font-size:11px;font-weight:800;transform:rotate(-45deg)}.orientation-diamond.direction-north{color:#8d2f2c;background:#eb6a683d}.orientation-diamond.direction-south{color:#254f9f;background:#6696ee42}.canvas-layer-switch{flex-direction:column;gap:4px;display:flex}.canvas-layer-switch button{background:var(--chip);min-width:50px;color:var(--ink);border:1px solid #0000;border-radius:999px;padding:4px 8px;font-size:10px}.canvas-layer-switch button.active{border-color:var(--accent-strong);background:#22839129}.compact-button{padding:4px 8px;font-size:10px}.primary-button.compact-button{color:#f7fbfb;background:linear-gradient(#21707c,#164e59)}.secondary-button.compact-button{color:var(--ink);background:#fffcf6f5}.summary-delete-button.secondary-button.compact-button.danger-button{color:#b43b3b;background:#bc4a4a1a;border-width:1.8px;border-color:#bc4a4a75}.canvas-rows-control{z-index:4;align-items:center;gap:5px;padding:5px 6px;display:flex;position:absolute;bottom:6px;right:6px}.rows-control-button{width:22px;height:22px;padding:0;font-size:15px;line-height:1}.rows-control-value{text-align:center;min-width:38px;font-size:10px;font-weight:700}.blueprint-canvas{touch-action:none;cursor:grab;overscroll-behavior:contain;background:#f7f4e7eb;flex:none;width:auto;height:100%;display:block}.blueprint-canvas:active{cursor:grabbing}.rail-cell{fill:#fbf9f1fa;stroke:#26394257;stroke-width:1.2px}.rail-cell.rail-active{fill:#111;stroke:#fff;stroke-width:1.4px}.grid-cell{fill:#fffcf6ad;stroke:#26394224;stroke-width:1px}.grid-cell.grid-cell-rail{fill:#ffffffe6;stroke:#2639423d}.rail-index{text-anchor:middle;dominant-baseline:middle;fill:#23333f;font-size:27px;font-weight:800}.rail-index.rail-index-active{fill:#fff}.layer-indicator{fill:#1b7581}.layer-indicator-text{text-anchor:middle;dominant-baseline:middle;fill:#f8fcfd;font-size:11px;font-weight:700}.sensor-body{fill:#6d6d6d;stroke:#00000014;stroke-width:.8px}.sensor-accent{fill:#ff230f}.note-shape,.sensor-body,.sensor-accent,.grid-cell,.rail-cell,.layer-indicator{vector-effect:non-scaling-stroke}.note-label{text-anchor:middle;dominant-baseline:middle;font-weight:800}.alternatives-strip-scroll{white-space:nowrap;scrollbar-gutter:stable;align-items:center;max-width:100%;height:38px;padding-right:2px;display:block;overflow:auto hidden}.alternatives-strip-track{align-items:center;gap:0;width:max-content;min-width:100%;display:inline-flex}.alternative-row{background:0 0;border:0;flex:none;align-items:center;gap:4px;padding:2px 6px;display:flex}.alternative-row+.alternative-row{border-left:2px solid #26394257}.alternative-inline{align-items:center;gap:2px;display:flex}.alternative-arrow-icon{object-fit:contain;opacity:.78;width:12px;height:12px}.alternative-icon{flex:none;width:31px;height:31px}.empty-board{text-align:center;min-height:0;color:var(--muted);background:linear-gradient(135deg,#eff2ecf2,#fffbf2f2),radial-gradient(circle,#28727e14,#0000 60%);place-items:center;display:grid}.warning-strip{color:#6e5100;background:#fff2c2d9;padding:6px 8px;font-size:11px}.warning-strip p{margin:0}.site-footer{box-shadow:none;text-align:center;color:var(--muted);background:#f3eedceb;border-top:1px solid #26394229;border-radius:0;flex:none;margin-top:2px;padding:6px 0;font-size:11px;line-height:1.3}.compose-toolbar{grid-template-columns:minmax(220px,1.1fr) minmax(320px,1.5fr) minmax(220px,1fr);gap:6px;display:grid}.compose-panel-card{gap:8px;min-width:0;display:grid}.compose-panel-header{gap:2px;display:grid}.compose-settings-card{align-content:start}.compose-field-grid{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(96px,.7fr));gap:8px;display:grid}.compose-field{gap:4px;display:grid}.compose-field span{color:var(--muted);font-size:10px;font-weight:700}.compose-field input{min-width:0;height:30px;color:var(--ink);background:#ffffffeb;border:1px solid #26394224;border-radius:9px;padding:4px 8px}.compose-inline-stats{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.compose-inline-stats span{background:#ffffff94;border:1px solid #26394214;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}.compose-roll-panel{border:1px solid var(--line);min-height:0;box-shadow:var(--soft-shadow);background:radial-gradient(circle at top,#22839114,#0000 40%),linear-gradient(#fcfaf1fa,#f7f8f4fa);border-radius:6px;flex:auto;padding:6px;overflow:hidden}.compose-grid-viewport{scrollbar-gutter:stable both-edges;overscroll-behavior-x:contain;background:#fffcf6b8;border:1px solid #26394214;height:100%;min-height:0;overflow:auto hidden}.compose-grid-board{box-sizing:border-box;width:max-content;display:grid;position:relative}.compose-grid-corner,.compose-step-header,.compose-key-cell,.compose-cell{box-sizing:border-box;width:28px;height:28px}.compose-grid-corner{z-index:5;width:96px;color:var(--muted);background:linear-gradient(#fffcf6fa,#f5f6f1fa);border-bottom:1px solid #2639422e;border-right:1px solid #2639422e;place-items:center;font-size:10px;font-weight:800;display:grid;position:sticky;top:0;left:0}.compose-step-header{z-index:4;color:var(--muted);background:#fffcf6f5;border-bottom:1px solid #2639422e;border-right:1px solid #26394214;place-items:center;font-size:10px;font-weight:800;display:grid;position:sticky;top:0}.compose-step-header.bar-start,.compose-cell.bar-start{border-left:2px solid #21707c6b}.compose-step-header.beat-start,.compose-cell.beat-start{border-left:1px solid #26394229}.compose-step-header.start-step,.compose-cell.start-step{background-image:linear-gradient(#f4c44c38,#f4c44c1a)}.compose-step-header.active-step,.compose-cell.active-step{background-image:linear-gradient(#319dab2e,#319dab14)}.compose-key-cell{z-index:3;text-align:left;border-top:0;border-bottom:1px solid #2639421a;border-left:0;border-right:1px solid #2639422e;align-content:center;justify-items:start;gap:1px;width:96px;padding:4px 8px;display:grid;position:sticky;left:0}.compose-key-cell.white-key{color:var(--ink);background:linear-gradient(#fffdf8fa,#f4f5f0fa)}.compose-key-cell.black-key{color:#f7fbfb;background:linear-gradient(#3c464bfa,#262e32fa)}.compose-key-main{font-size:12px;font-weight:800;line-height:1}.compose-key-sub{opacity:.72;font-size:9px;line-height:1}.compose-cell{background:#ffffff8f;border:1px solid #26394214;border-top:0;border-left:0;place-items:center;padding:0;display:grid}.compose-cell.black-key-row{background:#242f3614}.compose-cell-dot{border-radius:6px;width:0;height:0;transition:width .12s,height .12s,background-color .12s}.compose-cell.has-note .compose-cell-dot{background:linear-gradient(#227e89,#175460);width:18px;height:18px;box-shadow:inset 0 0 0 1px #fff3}.compose-cell.is-selected .compose-cell-dot{background:linear-gradient(#eb8c42,#b75b1d);box-shadow:0 0 0 2px #ffffffd1,0 0 0 4px #eb8c4261}.compose-selection-overlay{z-index:2;pointer-events:none;background:#1f7c881a;border:2px solid #1f7c888f;position:absolute}.compose-roll-panel-large{gap:6px;display:grid}.compose-toolbox{justify-items:center;gap:4px;padding:0;display:grid}.compose-toolbox-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;display:flex}.compose-toolbox-play{align-items:center;gap:6px;display:flex}.compose-toolbox-center{max-width:100%}.compose-toolbox-stats{flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;display:flex}.compose-tool-button{min-width:0;color:var(--ink);font:inherit;background:#fffcf6f0;border:1px solid #26394224;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.compose-tool-button.active,.compose-tool-button:hover:not(:disabled),.compose-tool-button.primary{border-color:var(--accent-strong)}.compose-tool-button.primary,.compose-tool-button.active{background:#22839129}.compose-tool-button:disabled{opacity:.42;cursor:not-allowed}.compose-tool-indicator{color:var(--muted);background:#ffffffb8;border:1px solid #26394214;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}.compose-meta-strip{flex-wrap:wrap;align-items:end;gap:8px;display:flex}.compose-meta-strip-compact{justify-content:flex-start}.compose-status-strip{flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:18px;display:flex}.compose-toolbar-shell{gap:4px;display:grid}.compose-grid-corner,.compose-key-cell,.compose-cell,.compose-head-cell{width:auto;height:auto}.compose-head-corner{z-index:6;background:linear-gradient(#edf4f6fa,#dbe8ebfa);border-bottom:2px double #26394242;border-right:1px solid #2639422e;width:96px;position:sticky;top:0;left:0}.compose-head-cell{z-index:5;color:#194d56;background:#d0e2e6fa;border-top:0;border-bottom:2px double #183c4357;border-left:0;border-right:1px solid #183c4329;place-items:center;padding:0;font-size:10px;font-weight:900;display:grid;position:sticky;top:0}.compose-head-cell.bar-start{border-left:2px solid #155d6875}.compose-head-cell.beat-start{border-left:1px solid #183c4333}.compose-key-cell.octave-boundary-top,.compose-cell.octave-boundary-top{border-top:2px solid #16434b42}.compose-cell.drag-origin .compose-cell-dot{opacity:.16}.compose-cursor-column{z-index:1;pointer-events:none;background:#3ab1c12e;position:absolute;top:0;box-shadow:inset 2px 0 #1267756b,inset -2px 0 #1267756b}.compose-drag-preview-note{z-index:4;pointer-events:none;place-items:center;display:grid;position:absolute}.compose-drag-preview-note .compose-cell-dot{background:linear-gradient(#eb8c42,#b75b1d);width:18px;height:18px;box-shadow:0 0 0 2px #ffffffd1,0 0 0 4px #eb8c4247}.compose-drag-preview-note.invalid .compose-cell-dot{background:linear-gradient(#b97c79,#924641);box-shadow:0 0 0 2px #ffffffc2,0 0 0 4px #b97c7938}.dialog-backdrop{z-index:20;background:#161d243d;place-items:center;display:grid;position:fixed;inset:0}.dialog-card{width:min(420px,100vw - 32px);box-shadow:var(--soft-shadow);background:#fffcf6fa;border:1px solid #26394224;gap:8px;padding:14px;display:grid}.dialog-actions{grid-template-columns:1fr;gap:6px;display:grid}.dialog-actions button{white-space:normal;text-align:center;width:100%;min-width:0;min-height:46px;padding:11px 12px;font-size:14px;line-height:1.3}.dialog-actions .primary-button.compact-button{color:#f7fbfb;background:linear-gradient(#21707c,#164e59)}.dialog-actions .secondary-button.compact-button{color:var(--ink);background:#fffcf6f5}@media (width<=1180px){.brand-title-ja{font-size:30px;font-weight:900}.brand-title-en{font-size:31px}}@media (width<=960px){.page{padding:8px 8px 10px}.hero-panel{grid-template-columns:1fr}.hero-brand{gap:6px}.hero-brand-slot{gap:10px}.brand-logo{height:36px}.hero-card{padding:7px 9px}.site-nav-row,.hero-action-row-right,.hero-status{text-align:left;justify-content:flex-start;justify-items:start}.site-nav-cluster{flex-wrap:wrap;gap:6px;width:100%}.site-nav{width:100%}.site-view-toggle{width:fit-content;max-width:100%}.site-entry-nav{width:auto}.hero-action-row-right{width:100%}.compose-meta-strip{justify-content:center}.brand-title-ja{font-size:26px;font-weight:950}.brand-title-en{letter-spacing:-.04em;font-size:26px}}@media (width<=640px){.hero-panel{gap:8px}.hero-brand{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px}.hero-brand-slot{align-items:center;gap:8px}.brand-logo{height:34px;transform:translateY(.5px)}.brand-copy{padding-top:0}.brand-title-ja,.brand-title-en{font-size:23px;line-height:1.04}.site-nav-cluster{align-items:center}.hero-action-row{width:100%}.hero-action-row>*,.site-view-toggle,.site-entry-nav,.site-entry-nav button{max-width:100%}.site-nav-divider{align-self:center;height:20px;min-height:20px;display:block;transform:translateY(.5px)}.hero-action-row-right{gap:4px}.hero-social-links{gap:2px}.hero-social-link{width:28px;height:28px}.hero-social-icon{width:23px;height:23px}.project-action-midi{display:none}.project-action-load,.project-action-save{border-radius:999px;place-items:center;width:34px;min-width:34px;height:34px;padding:0;line-height:0;display:inline-grid}.project-action-load .project-action-label,.project-action-save .project-action-label{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.project-action-load .project-action-icon,.project-action-save .project-action-icon{width:17px;height:17px;display:block}.project-action-load .project-action-icon{transform:translate(.4px)translateY(-.35px)}.project-action-save .project-action-icon{transform:translate(.35px)translateY(.1px)}}.blueprint-page .top-drawer-controls{gap:6px;display:grid}.blueprint-page .top-drawer-panels{opacity:1;height:auto;min-height:0;margin-top:2px;display:block;overflow:visible}.blueprint-page .drawer-panel{min-height:0}.blueprint-page .blueprint-start-reference{gap:4px;margin-top:0;display:grid}.blueprint-page .blueprint-start-reference-label{color:var(--muted);font-size:10px;font-weight:700}.compose-page{flex-direction:column;gap:2px;min-height:0;display:flex}.compose-page .compose-roll-panel{flex-direction:column;justify-content:flex-start;align-items:stretch;padding:5px 6px 6px;display:flex}.compose-page .compose-roll-panel-large{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;min-height:0;display:flex}.compose-page .compose-roll-panel,.compose-page .compose-topbar,.compose-page .compose-toolbox,.compose-page .compose-toolbox-row,.compose-page .compose-toolbox-stats,.compose-page .compose-grid-viewport,.compose-page .compose-grid-board,.compose-page .compose-grid-corner,.compose-page .compose-head-cell,.compose-page .compose-key-cell,.compose-page .compose-cell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.compose-page .compose-grid-viewport{touch-action:pan-x pan-y}.compose-page.compose-touch-selecting .compose-grid-viewport,.compose-page.compose-touch-selecting .compose-grid-board,.compose-page.compose-touch-selecting .compose-cell{touch-action:none}.compose-page input,.compose-page textarea,.compose-page select,.compose-page [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}.compose-page .compose-topbar{flex:none;grid-template-columns:minmax(300px,auto) minmax(320px,1fr) minmax(220px,auto);align-items:end;gap:6px;min-height:0;display:grid}.compose-page .compose-topbar-left,.compose-page .compose-topbar-center,.compose-page .compose-topbar-right{min-width:0;min-height:0}.compose-page .compose-topbar-left{justify-self:start}.compose-page .compose-topbar-center{justify-self:center;width:100%}.compose-page .compose-topbar-right{justify-self:end}.compose-page .compose-meta-strip{flex-wrap:wrap;align-items:end;gap:5px;min-width:0;min-height:0;display:flex}.compose-page .compose-field{align-content:end;gap:1px;min-width:0;min-height:0}.compose-page .compose-field span{font-size:9px;line-height:1}.compose-page .compose-field input{height:32px;line-height:1.1}.compose-page .compose-field.compose-field-small input{width:78px}.compose-page .compose-toolbox-label-mode{place-self:end start;width:fit-content;max-width:100%}.compose-page .compose-note-mode-fixed{color:#1e2731cc;background:#ffffffb8;border:1px solid #2639421a;border-radius:999px;justify-content:center;align-items:center;min-height:28px;padding:0 10px;font-size:10px;font-weight:700;line-height:1;display:inline-flex}.compose-page .compose-grid-board{--compose-cell-size:28px;--compose-keyboard-width:96px}.compose-page .compose-segmented-toggle{background:#ffffff8a;border:1px solid #2639421a;border-radius:999px;align-items:center;gap:0;padding:2px;display:inline-flex}.compose-page .compose-toolbox{justify-content:center;align-items:end;width:100%;min-width:0;min-height:0;display:flex}.compose-page .compose-toolbox-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:0;display:flex}.compose-page .compose-toolbox-play{gap:4px}.compose-page .compose-toolbox-group{gap:4px;min-height:0}.compose-page .compose-toolbox-edit-group{margin-left:8px}.compose-page .compose-toolbox-clipboard-group{margin-left:12px}.compose-page .compose-toolbox-stats{flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:4px;min-height:0;display:flex}.compose-page .compose-grid-corner,.compose-page .compose-key-cell,.compose-page .compose-head-corner{width:var(--compose-keyboard-width)}.compose-page .compose-key-cell{padding:4px 6px}.compose-page .compose-key-main{font-size:clamp(9px, calc(var(--compose-cell-size) * .44), 12px)}.compose-page .compose-head-cell{font-size:clamp(8px, calc(var(--compose-cell-size) * .38), 10px)}.compose-page .compose-tool-button{justify-content:center;align-items:center;gap:6px;min-height:32px;line-height:1;display:inline-flex}.compose-page .compose-tool-indicator{justify-content:center;align-items:center;min-height:32px;line-height:1;display:inline-flex}.compose-page .compose-tool-button-toggle{color:#1e2731b8;background:0 0;border-color:#0000;border-radius:999px}.compose-page .compose-segmented-toggle .compose-tool-button-toggle.active{color:#123f48;background:linear-gradient(#22839152,#22839133);border-color:#1e6f7c9e;box-shadow:inset 0 0 0 1px #ffffffc7,0 0 0 1px #22839114}.compose-page .compose-segmented-toggle .compose-tool-button-toggle:hover:not(.active){color:#1e2731e6;background:#26394212}.compose-page .compose-toolbox-edit-group .compose-tool-button-toggle.active{color:#123e47;background:linear-gradient(#22839147,#1a66712e)}.compose-page .compose-tool-button-play{color:#9f4e12;background:linear-gradient(#ffc97bd6,#ec8f3275);border-color:#d67718c2;box-shadow:inset 0 1px #fff8ebe6,0 1px 2px #d6771824}.compose-page .compose-tool-button-return{background:#fffcf6fa}.compose-page .compose-tool-button-danger{color:#a42f2f;background:#ffebebfa;border-color:#aa37377a}.compose-page .compose-tool-button-danger:hover:not(:disabled){background:#ffe4e4;border-color:#aa37378f}.compose-page .compose-tool-button-info{color:#1d6794;background:#e7f3ffe6;border-color:#3878b157}.compose-page .compose-toolbox-edit-group .compose-tool-icon{opacity:.78}.compose-page .compose-toolbox-edit-group .compose-tool-button-toggle.active .compose-tool-icon{opacity:1}.compose-page .compose-tool-button-with-icon{padding-inline:10px 12px}.compose-page .compose-tool-button-icon-only{width:34px;padding:0}.compose-page .compose-tool-icon{object-fit:contain;width:16px;height:16px;display:block;transform:translateY(.5px)}.compose-page .compose-tool-button-play .compose-tool-icon{filter:invert(40%)sepia(82%)saturate(1234%)hue-rotate(356deg)brightness(93%)contrast(92%);transform:translate(1.2px,.2px)}.compose-page .compose-tool-button-danger .compose-tool-icon{filter:invert(19%)sepia(69%)saturate(2256%)hue-rotate(341deg)brightness(92%)contrast(93%);transform:translate(.65px,.1px)}.compose-page .compose-tool-icon-delete{width:14px;height:14px}.compose-page .compose-tool-symbol{width:15px;height:15px}.compose-page .compose-tool-button-help{color:#1d6794;background:#e7f3ffe6;border-color:#3878b157;padding-inline:12px;font-size:11px;font-weight:600}.compose-page .compose-cell-dot{border-radius:0}.compose-page .compose-cell.has-note .compose-cell-dot,.compose-page .compose-cell.is-selected .compose-cell-dot,.compose-page .compose-drag-preview-note .compose-cell-dot,.compose-page .compose-drag-preview-note.invalid .compose-cell-dot{width:clamp(11px, calc(var(--compose-cell-size) - 6px), 18px);height:clamp(11px, calc(var(--compose-cell-size) - 6px), 18px)}.compose-page .compose-tool-button-help:hover{background:#deeefdfa;border-color:#3878b170}.compose-page .compose-tool-button-touch-feedback{animation:.32s ease-out compose-touch-select-toggle-pulse}.compose-page .compose-tool-indicator-soft{color:#1e2731b8;background:0 0;border:0;align-self:flex-end;min-height:auto;padding:0 1px;font-size:11px;font-weight:500}.compose-page .compose-feedback-strip{flex:none;min-height:0;padding-left:1px}.compose-page .compose-feedback-strip .error-text{font-size:11px}.compose-help-dialog{box-sizing:border-box;overscroll-behavior:contain;flex-direction:column;gap:8px;width:min(352px,100vw - 24px);max-width:calc(100vw - 24px);max-height:min(74dvh,100dvh - 32px);display:flex;overflow:hidden}.compose-help-dialog-body{overscroll-behavior:contain;gap:8px;min-height:0;padding-right:2px;display:grid;overflow-y:auto}.compose-help-dialog .dialog-guide-section{gap:5px;min-width:0;display:grid}.compose-help-dialog .dialog-guide-section h3,.compose-help-dialog .dialog-guide-section p,.compose-help-dialog h2{margin:0}.compose-help-dialog .compact-text{font-size:11px;line-height:1.5}.compose-guide-line{align-items:flex-start;gap:8px;min-width:0;display:flex}.compose-guide-line-with-icon{grid-template-columns:14px minmax(0,1fr);align-items:start;gap:8px;display:grid}.compose-guide-line span{min-width:0}.compose-guide-inline-icon{object-fit:contain;flex:none;width:14px;height:14px;margin-top:1px}.compose-page .compose-touch-select-pulse{z-index:6;pointer-events:none;background:#5495e429;border:2px solid #3f7ec89e;animation:.28s ease-out compose-touch-pulse;position:absolute;box-shadow:inset 0 0 0 1px #ffffff94}@keyframes compose-touch-pulse{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.04)}to{opacity:0;transform:scale(1.2)}}@keyframes compose-touch-select-toggle-pulse{0%{box-shadow:0 0 #3f7ec800}35%{box-shadow:0 0 0 2px #3f7ec847,0 0 0 6px #3f7ec81f}to{box-shadow:0 0 #3f7ec800}}.compose-page .compose-grid-viewport{flex:auto;align-self:stretch;height:auto;min-height:0;margin-bottom:0}@media (width<=1100px){.compose-page .compose-topbar{grid-template-columns:1fr;justify-items:stretch;gap:4px}.compose-page .compose-topbar-left,.compose-page .compose-topbar-center,.compose-page .compose-topbar-right{justify-self:stretch}.compose-page .compose-topbar-center .compose-toolbox,.compose-page .compose-toolbox-row,.compose-page .compose-toolbox-stats{justify-content:flex-start}.compose-page .compose-topbar-right .compose-toolbox-stats{justify-content:flex-end}.compose-page .compose-toolbox-edit-group,.compose-page .compose-toolbox-clipboard-group{margin-left:0}}@media (width<=720px){.compose-page .compose-roll-panel{padding-inline:5px}.compose-page .compose-topbar{gap:7px}.compose-page .compose-meta-strip{align-items:stretch;gap:4px}.compose-page .compose-field{flex:180px}.compose-page .compose-field.compose-field-small{flex:0 0 60px}.compose-page .compose-toolbox-label-mode{align-self:stretch}.compose-page .compose-toolbox,.compose-page .compose-toolbox-row,.compose-page .compose-toolbox-stats{justify-content:flex-start}.compose-page .compose-toolbox-row{gap:4px}.compose-page .compose-toolbox-play,.compose-page .compose-toolbox-group,.compose-page .compose-segmented-toggle{max-width:100%}.compose-page .compose-topbar-right{justify-self:stretch}.compose-page .compose-topbar-right .compose-toolbox-stats{justify-content:flex-end}}@media (width<=560px){.compose-page .compose-topbar{gap:5px}.compose-page .compose-meta-strip{grid-template-columns:minmax(0,1fr) 40px auto;align-items:end;gap:3px;display:grid}.compose-page .compose-meta-strip.compose-meta-strip-no-note-mode{grid-template-columns:minmax(0,1fr) 40px}.compose-page .compose-field span{font-size:8px}.compose-page .compose-field input{height:29px;padding-inline:7px;font-size:12px}.compose-page .compose-field.compose-field-small input{text-align:center;width:40px;padding-inline:0}.compose-page .compose-toolbox-label-mode{align-self:end}.compose-page .compose-note-mode-fixed,.compose-page .compose-toolbox-label-mode .compose-tool-button{min-height:28px;padding-inline:4px;font-size:7px}.compose-page .compose-toolbox-row{flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:3px}.compose-page .compose-toolbox-play,.compose-page .compose-toolbox-edit-group,.compose-page .compose-toolbox-clipboard-group{flex-wrap:nowrap;gap:2px;width:auto;max-width:none}.compose-page .compose-toolbox-edit-group{margin-left:1px}.compose-page .compose-toolbox-clipboard-group{margin-left:3px}.compose-page .compose-toolbox-play .compose-tool-button,.compose-page .compose-toolbox-edit-group .compose-tool-button,.compose-page .compose-toolbox-clipboard-group .compose-tool-button{flex:none}.compose-page .compose-tool-button{gap:2px;min-height:29px;padding-inline:6px;font-size:10px}.compose-page .compose-tool-button-with-icon{padding-inline:6px}.compose-page .compose-tool-button-icon-only{width:30px}.compose-page .compose-tool-icon{width:15px;height:15px}.compose-page .compose-tool-button-help{color:#1d6794;background:#e2f1fff5;border-color:#22839180;border-radius:999px;width:30px;padding:0;font-size:15px;font-weight:700}.compose-page .compose-topbar-right .compose-toolbox-stats{justify-content:flex-end;gap:2px 5px}.compose-page .compose-toolbox-stats .compose-tool-button{min-width:0;padding-inline:8px}.compose-page .compose-tool-indicator-soft{font-size:9px}.compose-page .compose-toolbox-edit-group .compose-tool-button span{display:none}.compose-page .compose-toolbox-edit-group .compose-tool-button-with-icon{width:30px;padding-inline:0}.compose-page .compose-toolbox-edit-group .compose-tool-icon{width:16px;height:16px}.compose-page .compose-toolbox-clipboard-group>.compose-tool-button:not(.compose-tool-button-icon-only){padding-inline:8px}.compose-help-dialog{gap:7px;width:min(320px,100vw - 24px);max-width:calc(100vw - 24px);max-height:min(56dvh,100dvh - 124px);padding:12px}.compose-help-dialog h2{font-size:15px}.compose-help-dialog h3{font-size:12px}.compose-help-dialog .compact-text{font-size:10px;line-height:1.45}.compose-guide-line{gap:6px}.compose-guide-line-with-icon{grid-template-columns:12px minmax(0,1fr);gap:6px}.compose-guide-inline-icon{width:12px;height:12px;margin-top:2px}.compose-page .compose-cell.has-note,.compose-page .compose-cell.is-selected{touch-action:none}.compose-page .compose-touch-select-pulse{background:#5495e438;border-color:#3f7ec8c7;box-shadow:inset 0 0 0 1px #ffffffc2,0 0 0 3px #5495e424}}@media (width<=390px){.compose-page .compose-meta-strip{grid-template-columns:minmax(0,1fr) 36px auto}.compose-page .compose-meta-strip.compose-meta-strip-no-note-mode{grid-template-columns:minmax(0,1fr) 36px}.compose-page .compose-key-cell{padding-inline:3px}.compose-page .compose-key-main{font-size:9px}.compose-page .compose-field.compose-field-small input{width:36px;font-size:11px}.compose-page .compose-note-mode-fixed,.compose-page .compose-toolbox-label-mode .compose-tool-button{min-height:27px;padding-inline:3px;font-size:7px}.compose-page .compose-tool-button{padding-inline:5px;font-size:9px}.compose-page .compose-toolbox-stats .compose-tool-button,.compose-page .compose-toolbox-clipboard-group>.compose-tool-button:not(.compose-tool-button-icon-only){padding-inline:7px}.compose-help-dialog{width:min(308px,100vw - 20px);max-width:calc(100vw - 20px);max-height:min(54dvh,100dvh - 132px)}.compose-help-dialog-body{gap:7px}}@media (width<=360px){.compose-page .compose-toolbox-row{flex-wrap:wrap}.compose-page .compose-toolbox-clipboard-group{margin-left:0}}.library-page{min-height:0;padding-right:2px;overflow-y:auto}.library-panel{gap:10px;display:grid}.library-heading h2{margin:0;font-size:16px}.library-grid{grid-template-columns:minmax(0,1fr);gap:10px;display:grid}.library-card{background:#fffcf6f0;border:1px solid #2639421a;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:12px;display:grid}.library-card-copy{gap:6px;min-width:0;display:grid}.library-card-copy h3{margin:0;font-size:15px}.library-card-copy p{color:var(--muted);margin:0;font-size:12px;line-height:1.45}.library-meta{flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.library-meta-group{align-items:baseline;gap:3px;display:inline-flex}.library-meta-group strong{color:#263942b8;font-size:10px}.library-meta-separator{color:#26394257;flex:none}.library-stats{color:var(--muted);flex-wrap:wrap;gap:6px 12px;font-size:11px;line-height:1.4;display:flex}.library-stat{white-space:nowrap;background:#ffffffc2;border-radius:999px;align-items:center;padding:2px 8px;display:inline-flex}.library-stat-rail{color:#23566a}.library-stat-note{color:#5b516e}.library-stat-bpm{color:#9a5c08;background:#ffe5b8b3;font-weight:800}.library-use-button{white-space:nowrap;justify-self:end}@media (width<=720px){.library-card{grid-template-columns:minmax(0,1fr)}.library-use-button{justify-self:stretch;width:100%}}