@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap";:root{color:#142033;font-synthesis:none;background:#eef1ed;font-family:Zen Kaku Gothic New,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,select{font:inherit}button{cursor:pointer}a{color:#1c5a78}.trumpet-page{color:#17322c;background:#f7f8f4;width:min(100%,920px);min-height:100svh;margin:auto;padding:0 26px 56px;box-shadow:0 0 40px #16223514}.trumpet-header{padding:24px 8px 20px}.trumpet-back{color:#276650;background:0 0;border:0;padding:4px 0 18px;font-size:.85rem;text-decoration:underline}.trumpet-header-row{align-items:center;gap:16px;display:flex}.trumpet-icon{color:#fff;background:#0e503d;border-radius:16px;place-items:center;width:58px;height:58px;font-size:1.8rem;display:grid}.trumpet-kicker{color:#6b907e;letter-spacing:.16em;margin:0;font-size:.7rem;font-weight:700}.trumpet-header h1{margin:2px 0;font-family:Noto Serif JP,serif;font-size:clamp(1.3rem,4.8vw,2rem)}.trumpet-intro{color:#5d7067;margin:16px 0 0;line-height:1.6}.trumpet-page section{background:#fff;border:1px solid #dce6dc;border-radius:17px;margin:16px 0;padding:23px;box-shadow:0 5px 18px #1c4b3010}.trumpet-section-heading{align-items:center;gap:10px;margin-bottom:14px;display:flex}.trumpet-section-heading span{color:#9b6c38;font-size:.8rem;font-weight:700}.trumpet-section-heading h2{margin:0;font-family:Noto Serif JP,serif;font-size:1.15rem}.trumpet-key-panel label{color:#5d7067;margin:0 0 7px;font-size:.78rem;display:block}.trumpet-key-panel select{color:#17322c;background:#fbfdf9;border:1px solid #aac4b4;border-radius:10px;width:100%;min-height:48px;padding:9px 12px}.trumpet-key-panel p,.trumpet-controls>p{color:#718076;margin:10px 0 0;font-size:.78rem}.trumpet-sequence-body{flex-wrap:wrap;align-content:start;align-items:center;gap:8px;min-height:70px;max-height:210px;padding:3px;display:flex;overflow:auto}.trumpet-placeholder{color:#84948a;font-size:.86rem}.trumpet-result-chip{background:#eaf3ec;border:1px solid #cae0ce;border-radius:10px;gap:2px;padding:8px 10px;display:grid}.trumpet-result-chip span{color:#50775c;font-size:.72rem}.trumpet-result-chip strong{white-space:nowrap;font-size:.8rem}.trumpet-result-chip.is-unsupported{color:#9a4d24;background:#fff3eb;border-color:#e7c6ad}.trumpet-marker{color:#a46e37;padding:0 3px;font-size:1.3rem}.trumpet-marker.is-line-break{flex-basis:100%;height:15px;font-size:.8rem;line-height:1}.trumpet-action-row{gap:8px;margin-top:15px;display:flex}.trumpet-action-row button{color:#476a54;background:#fff;border:1px solid #d3dfd5;border-radius:9px;padding:9px 13px}.trumpet-action-row button:disabled,.trumpet-control-row button:disabled,.trumpet-copy:disabled{opacity:.4;cursor:not-allowed}.trumpet-control-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:16px 0;display:grid}.trumpet-control-row button{color:#1f6340;background:#eef7ed;border:1px solid #a9c9b3;border-radius:11px;place-items:center;min-height:54px;font-size:1.15rem;font-weight:700;display:grid}.trumpet-control-row small{font-size:.62rem;font-weight:400}.trumpet-note-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;display:grid}.trumpet-note-button{color:#193d31;background:#fff;border:1px solid #d5e1d8;border-radius:12px;justify-items:center;min-height:121px;padding:3px 2px 9px;display:grid}.trumpet-note-button:active{background:#e4f3e7;border-color:#39805c;transform:scale(.98)}.trumpet-note-button strong{font-size:.85rem}.trumpet-staff{width:min(100%,84px);height:90px;overflow:visible}.trumpet-staff line{stroke:#71857b;stroke-width:1px}.trumpet-staff .ledger{stroke:#566b61}.trumpet-staff .note-head{fill:#173f2d}.trumpet-staff .note-stem{stroke:#173f2d;stroke-width:1.5px}.trumpet-hint{line-height:1.6;color:#728078!important;font-size:.74rem!important}.trumpet-export textarea{resize:vertical;color:#17322c;background:#fcfefb;border:1px solid #c5d7c7;border-radius:10px;width:100%;padding:12px;line-height:1.6}.trumpet-copy{color:#fff;background:#125a43;border:0;border-radius:11px;width:100%;min-height:50px;margin-top:12px;font-weight:700}.trumpet-message{color:#276650;font-size:.82rem}@media (width<=600px){.trumpet-page{padding:0 12px 36px}.trumpet-header{padding:20px 8px 12px}.trumpet-page section{margin:12px 0;padding:17px 13px}.trumpet-note-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.trumpet-control-row{gap:5px}.trumpet-control-row button{min-height:56px;padding:2px;font-size:1rem}.trumpet-control-row small{font-size:.57rem}.trumpet-note-button{min-height:118px}.trumpet-sequence{z-index:2;position:sticky;top:6px;box-shadow:0 7px 24px #133c2720!important}.trumpet-sequence-body{max-height:110px}}.trumpet-staff .staff-accidental{fill:#173f2d;stroke:none;font-family:serif;font-size:22px}.trumpet-sequence-body{align-items:flex-start;gap:10px;max-height:360px}.trumpet-result-chip{align-self:flex-start;justify-items:center;gap:3px;min-width:116px;padding:8px}.trumpet-result-chip .trumpet-staff{width:80px;height:72px}.trumpet-result-chip .trumpet-result-label{color:#214c37;font-size:.82rem;font-weight:700}.trumpet-fingering-grid{align-items:start;gap:5px;margin-top:4px;display:flex}.trumpet-piston-labels,.trumpet-fingering-column{grid-template-rows:15px repeat(3,24px);place-items:center;display:grid}.trumpet-piston-labels{color:#6b7f70;font-size:.65rem}.trumpet-fingering-column{min-width:24px;font-size:1.12rem;font-weight:700;line-height:1}.trumpet-fingering-column+.trumpet-fingering-column{border-left:1px dotted #a7c0ae;padding-left:5px}.trumpet-fingering-column small,.trumpet-piston-labels small{white-space:nowrap;font-size:.58rem;font-weight:600}.trumpet-fingering-column span{color:#173f2d!important;font-size:1.12rem!important}.trumpet-unsupported-label{text-align:center;white-space:normal!important;font-size:.72rem!important}.trumpet-sequence-hint{color:#64786b;margin:9px 2px 0;font-size:.72rem;line-height:1.5}@media (width<=600px){.trumpet-sequence-body{max-height:min(38svh,300px)}.trumpet-result-chip{min-width:108px}.trumpet-fingering-grid{gap:3px}}.trumpet-sequence-body{scrollbar-width:thin;overscroll-behavior-inline:contain;flex-wrap:nowrap;align-items:center;gap:6px;height:84px;min-height:84px;max-height:none;overflow:auto hidden}.trumpet-select-note,.trumpet-select-marker{color:#6b604b;touch-action:pan-x;background:#f9fcf8;border:1px solid #d2dfd4;border-radius:9px;flex:none;place-items:center;height:78px;padding:2px;display:grid}.trumpet-select-note{width:68px}.trumpet-select-note .trumpet-staff{width:62px;height:68px}.trumpet-select-marker{width:40px;font-size:1.25rem}.trumpet-select-note.is-selected,.trumpet-select-marker.is-selected{background:#e0f2e6;border:2px solid #1b7553;box-shadow:inset 0 0 0 2px #fff}.trumpet-select-note:focus-visible,.trumpet-select-marker:focus-visible{outline-offset:2px;outline:3px solid #e7a848}.trumpet-export-preview{flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:10px;min-height:70px;padding:3px;display:flex}.trumpet-export-preview .trumpet-marker.is-line-break{flex-basis:100%}.trumpet-image-actions{flex-wrap:wrap;gap:9px;margin-top:9px;display:flex}.trumpet-image-actions button{color:#185a3c;background:#edf7ef;border:1px solid #9bc3ac;border-radius:10px;flex:145px;min-height:48px;font-weight:700}.trumpet-image-actions button:disabled{opacity:.45;cursor:not-allowed}.trumpet-image-note{color:#75857a;margin:9px 0;font-size:.77rem}.trumpet-export textarea{margin-top:12px}@media (width<=600px){.trumpet-sequence{padding:10px!important}.trumpet-sequence .trumpet-section-heading{margin-bottom:6px}.trumpet-sequence-body{height:66px;min-height:66px;max-height:none}.trumpet-select-note,.trumpet-select-marker{height:60px}.trumpet-select-note .trumpet-staff{width:60px;height:55px}.trumpet-action-row{margin-top:6px}.trumpet-action-row button{padding:6px 11px}}.piano-page{color:#17322c;background:#f4f5f1;flex-direction:column;width:min(100%,620px);height:100dvh;min-height:530px;margin:auto;padding:14px 16px 16px;display:flex;overflow-y:auto;box-shadow:0 0 40px #16223514}.piano-page,.piano-page *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.piano-header{flex:none;padding:0 4px 8px}.piano-back{color:#276650;background:0 0;border:0;padding:2px 0 8px;font-size:.8rem;text-decoration:underline}.piano-kicker{color:#718d7d;letter-spacing:.16em;margin:0;font-size:.64rem;font-weight:700}.piano-header h1{margin:1px 0 3px;font-family:Noto Serif JP,serif;font-size:clamp(1.35rem,4vw,1.8rem)}.piano-header>p:last-child{color:#62746a;margin:0;font-size:.75rem;line-height:1.35}.piano-page section{background:#fff;border:1px solid #dce6dc;border-radius:13px;margin:5px 0;padding:10px;box-shadow:0 5px 18px #1c4b3010}.piano-page h2{margin:0;font-family:Noto Serif JP,serif;font-size:.95rem}.piano-controls{flex:none;justify-content:space-between;align-items:center;gap:8px;display:flex}.piano-controls p{color:#718076;margin:2px 0 0;font-size:.68rem;line-height:1.25}.piano-transpose-buttons{flex:none;align-items:center;gap:5px;display:flex}.piano-transpose-buttons button{color:#185139;background:#eaf5ed;border:1px solid #abc8b6;border-radius:9px;min-width:40px;min-height:40px;font-size:1rem;font-weight:700}.piano-transpose-buttons button:disabled{opacity:.42;cursor:not-allowed}.piano-transpose-buttons strong{text-align:center;min-width:55px;font-size:.7rem}.piano-transpose-buttons .piano-reset{background:#fff;min-width:57px;font-size:.7rem}.piano-instrument{flex-direction:column;flex:1;min-height:0;display:flex}.piano-instrument-heading{flex:none;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:7px;display:flex}.piano-instrument-heading span{color:#6d8074;text-align:right;font-size:.68rem}.piano-keyboard-rows{flex-direction:column;flex:1;gap:5px;min-height:0;display:flex;overflow:hidden}.piano-keyboard{background:#858e86;border:1px solid #aebfb1;border-radius:6px;flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.piano-key{box-sizing:border-box;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding:0 1px 5px;display:flex;position:absolute;top:0}.piano-key.is-white{z-index:1;color:#214938;background:linear-gradient(#fff,#f1f4ed);border:1px solid #aab7ac;width:14.2857%;height:100%}.piano-key.is-black{z-index:2;color:#b8e6db;background:linear-gradient(#273137,#10191e);border:1px solid #0c1718;width:11.4%;height:71%;box-shadow:0 3px 5px #0004}.piano-key:active{filter:brightness(.82)}.piano-key:focus-visible{outline-offset:-4px;outline:3px solid #edbd61}.piano-key-content{pointer-events:none;justify-items:center;gap:2px;width:100%;display:grid}.piano-key-names{white-space:nowrap;font-size:.75rem;font-weight:700;line-height:1.1}.piano-key.is-black .piano-key-names{font-size:.66rem}.piano-fingerings{justify-content:center;align-items:flex-start;gap:0;min-height:47px;display:flex}.piano-fingering{grid-template-rows:8px repeat(3,13px);place-items:center;min-width:11px;font-size:.72rem;font-weight:700;line-height:1;display:grid}.piano-fingering small{font-size:.43rem;font-weight:500}.piano-key.is-black .piano-fingering{min-width:10px;font-size:.63rem}.piano-help{color:#6c7d71;flex:none;margin:7px 0 0;font-size:.66rem;line-height:1.3}.piano-notice{color:#9a4d24;flex:none;margin:6px 0 0;font-size:.72rem}@media (width<=600px){.piano-page{padding:7px 7px max(7px,env(safe-area-inset-bottom))}.piano-header{padding:0 3px 3px}.piano-back{padding:0 0 5px}.piano-kicker,.piano-header>p:last-child,.piano-controls p{display:none}.piano-header h1{margin:0;font-size:1.3rem}.piano-page section{border-radius:9px;margin:3px 0;padding:6px}.piano-controls h2{font-size:.78rem}.piano-transpose-buttons button{min-width:35px;min-height:38px}.piano-transpose-buttons strong{min-width:45px;font-size:.65rem}.piano-transpose-buttons .piano-reset{min-width:48px;font-size:.65rem}.piano-instrument-heading{margin-bottom:5px}.piano-instrument-heading span{font-size:.62rem}.piano-help{margin-top:4px;font-size:.6rem}}@media (height<=650px){.piano-page{min-height:500px}.piano-header{padding-bottom:2px}.piano-back{padding-bottom:3px}.piano-page section{margin:2px 0}.piano-help{font-size:.58rem}}.hub-shell{background:#fbfaf6;width:min(100%,920px);min-height:100svh;margin:auto;box-shadow:0 0 40px #16223514}.hub-header{border-bottom:1px solid #e6e8e2;justify-content:space-between;align-items:center;padding:24px 30px;display:flex}.hub-content{padding:64px 52px}.hub-content h1{margin:0;font-family:Noto Serif JP,serif;font-size:clamp(1.8rem,5vw,2.5rem)}.hub-lede{color:#64717b;margin:11px 0 30px}.service-list{gap:15px;display:grid}.service-card{text-align:left;color:#18344e;background:#fff;border:1px solid #dce4df;border-radius:15px;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;width:100%;padding:25px;display:grid;box-shadow:0 7px 25px #173a5e0c}.service-card:hover{border-color:#7b9aaa;transform:translateY(-1px)}.service-mark{color:#fff;background:#173a5e;border-radius:13px;place-items:center;width:56px;height:56px;font-family:Noto Serif JP,serif;font-size:1.45rem;display:grid}.trumpet-service-mark{background:#14533d}.service-copy small{color:#a35432;letter-spacing:.12em;font-size:.65rem;font-weight:700;display:block}.service-copy strong{margin:3px 0;font-family:Noto Serif JP,serif;font-size:1.25rem;display:block}.service-copy em{color:#68747d;font-size:.8rem;font-style:normal;display:block}.service-status{text-align:right;color:#75818a;font-size:.7rem;display:grid}.service-status b{color:#b25430;font-size:1.2rem}.service-status span{color:#173a5e;margin-top:4px;font-size:1rem}.account{color:#75818a;align-items:center;gap:10px;font-size:.7rem;display:flex}.account button,.back-link{color:#536f83;background:0 0;border:0;padding:0;font-size:.7rem;text-decoration:underline}.back-link{margin-bottom:3px;display:block}.error-note{color:#a24636!important}@media (width<=480px){.hub-header{padding:19px}.hub-content{padding:46px 20px}.account span{display:none}.service-card{grid-template-columns:auto 1fr;gap:13px;padding:18px}.service-status{text-align:left;grid-column:2}.service-copy em{line-height:1.5}}.hub-header .brand{align-items:center;gap:11px;min-width:0;display:flex}.hub-header .brand .seal{color:#fff;background:#173a5e;border-radius:10px;flex:none;place-items:center;width:38px;height:38px;font-family:Noto Serif JP,serif;font-size:1.25rem;display:grid}.hub-header .brand strong,.hub-header .brand small{display:block}.hub-header .brand strong{color:#18344e;overflow-wrap:anywhere;font-size:.95rem;line-height:1.2}.hub-header .brand small{color:#75818a;margin-top:3px;font-size:.69rem;line-height:1.4}.hub-header .account{flex:none;margin-left:12px}@media (width<=480px){.hub-header .brand{gap:8px}.hub-header .brand .seal{width:34px;height:34px}.hub-header .brand strong{font-size:.78rem}.hub-header .brand small{font-size:.63rem}}