:root{--mtl-paper:#fbfbf9;--mtl-paper-dim:#f3f3ef;--mtl-ink:#1a1a1a;--mtl-ink-2:#4a4a48;--mtl-ink-3:#8b8b87;--mtl-line:#dcdcd6;--mtl-line-soft:#eaeae5;--mtl-accent:#a93b2a;--mtl-accent-deep:#8a2f21;--mtl-success:#3d6b45;--mtl-font-sans:"Montserrat", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;--mtl-font-serif:"Bodoni Moda", "Shippori Mincho", "Hiragino Mincho ProN", serif;--mtl-font-mono:"IBM Plex Mono", ui-monospace, monospace;--mtl-text-pp:.75rem;--mtl-text-p:.875rem;--mtl-text-mp:1rem;--mtl-text-mf:1.25rem;--mtl-text-f:1.5625rem;--mtl-text-ff:2rem;--mtl-text-fff:2.5rem;--mtl-text-tutti:3.25rem;--mtl-leading-body:1.8;--mtl-leading-heading:1.3;--mtl-leading-hero:1.15;--mtl-tracking-jp:.02em;--mtl-tracking-caps:.08em;--mtl-space-half:4px;--mtl-space-1:8px;--mtl-space-2:16px;--mtl-space-3:24px;--mtl-space-4:32px;--mtl-space-6:48px;--mtl-space-8:64px;--mtl-space-12:96px;--mtl-space-16:128px;--mtl-measure:72ch;--mtl-container:1120px;--mtl-radius:2px;--mtl-shadow:0 1px 2px #1a1a1a0d;--mtl-dur-s:.16s;--mtl-dur-m:.24s;--mtl-ease:cubic-bezier(.2, 0, 0, 1)}html{background:var(--mtl-paper);color:var(--mtl-ink);font-family:var(--mtl-font-sans);font-size:100%;line-height:var(--mtl-leading-body)}body{min-height:100vh;font-size:var(--mtl-text-mp);-webkit-font-smoothing:antialiased;flex-direction:column;display:flex}::selection{background:var(--mtl-ink);color:var(--mtl-paper)}img{max-width:100%;display:block}a{color:inherit}.mtl-rule{background:var(--mtl-line);height:1px;margin:var(--mtl-space-8) 0;border:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.locale-menu{position:relative}.locale-menu summary{align-items:center;gap:var(--mtl-space-1);padding:var(--mtl-space-half) var(--mtl-space-1);border-radius:var(--mtl-radius);color:var(--mtl-ink-2);font-size:var(--mtl-text-p);cursor:pointer;border:1px solid #0000;font-weight:500;list-style:none;display:flex}.locale-menu summary::-webkit-details-marker{display:none}.locale-menu summary:after{content:"";border-bottom:1px solid;border-right:1px solid;width:6px;height:6px;transform:rotate(45deg)translateY(-2px)}.locale-menu summary:hover,.locale-menu summary:focus-visible{border-color:var(--mtl-line);color:var(--mtl-ink);outline:2px solid var(--mtl-accent);outline-offset:2px}.locale-menu[open] summary:after{transform:rotate(225deg)translate(-2px,-1px)}.locale-menu__list{z-index:10;top:calc(100% + var(--mtl-space-1));width:min(360px, calc(100vw - var(--mtl-space-4)));max-height:min(70vh,680px);padding:var(--mtl-space-2);background:var(--mtl-paper);border:1px solid var(--mtl-line);box-shadow:var(--mtl-shadow);grid-template-columns:repeat(2,minmax(120px,1fr));display:grid;position:absolute;right:0;overflow-y:auto}[dir=rtl] .locale-menu__list{left:0;right:auto}.locale-menu__list--compact{grid-template-columns:1fr;width:160px}.locale-menu__link{padding:var(--mtl-space-1);color:var(--mtl-ink-2);font:inherit;font-size:var(--mtl-text-p);text-align:start;cursor:pointer;background:0 0;border:0;text-decoration:none}.locale-menu__link:hover,.locale-menu__link:focus-visible,.locale-menu__link.active,.locale-menu__link[aria-current=page]{color:var(--mtl-accent);text-underline-offset:3px;text-decoration:underline}.locale-menu__link:focus-visible{outline:2px solid var(--mtl-accent);outline-offset:-2px}.lang-content{display:none}.lang-content.active{display:block}span.lang-content.active{display:inline}li.lang-content.active{display:list-item}.page{width:min(100% - var(--mtl-space-6), var(--mtl-container));flex:1;margin-inline:auto}.page--narrow{max-width:720px}.page--article{max-width:760px}.overline{font-size:var(--mtl-text-pp);letter-spacing:.32em;text-transform:uppercase;color:var(--mtl-ink-3);font-weight:600}.site-footer{border-top:1px solid var(--mtl-line);margin-top:var(--mtl-space-8);padding:var(--mtl-space-4);text-align:center;font-size:var(--mtl-text-p);color:var(--mtl-ink-3)}.footer-links{justify-content:center;align-items:center;gap:var(--mtl-space-3);margin-top:var(--mtl-space-2);display:flex}.footer-sns{color:var(--mtl-ink-3);transition:color var(--mtl-dur-s) var(--mtl-ease);justify-content:center;align-items:center;display:inline-flex}.footer-sns:hover{color:var(--mtl-accent)}.hero{padding:clamp(var(--mtl-space-8), 12vh, 140px) 0 var(--mtl-space-6);text-align:center}.hero-toolbar{padding-top:var(--mtl-space-4);justify-content:center;display:flex}.app-icon{border-radius:var(--mtl-radius);width:112px;height:112px;margin:var(--mtl-space-6) auto var(--mtl-space-4);object-fit:cover}.hero-title{font-family:var(--mtl-font-sans);font-weight:600;font-size:clamp(var(--mtl-text-ff), 6vw, var(--mtl-text-tutti));line-height:var(--mtl-leading-hero);letter-spacing:.02em;margin-bottom:var(--mtl-space-2)}.hero-title-ja{vertical-align:middle;font-size:.75em;font-weight:700}.hero-subtitle{font-family:var(--mtl-font-sans);font-size:var(--mtl-text-mf);color:var(--mtl-ink-2);letter-spacing:.02em;max-width:44ch;margin-inline:auto}.programme{padding:var(--mtl-space-4) 0 var(--mtl-space-8)}.programme-label{font-size:var(--mtl-text-pp);letter-spacing:.32em;text-transform:uppercase;color:var(--mtl-ink-3);margin-bottom:var(--mtl-space-3);font-weight:600}.programme-list{border-top:1px solid var(--mtl-line);list-style:none}.row{align-items:baseline;gap:var(--mtl-space-3);padding:var(--mtl-space-3) var(--mtl-space-1);border-bottom:1px solid var(--mtl-line);transition:background-color var(--mtl-dur-s) var(--mtl-ease), padding-left var(--mtl-dur-m) var(--mtl-ease);text-decoration:none;display:flex}a.row:hover,a.row:focus-visible{background:var(--mtl-paper-dim);padding-left:var(--mtl-space-2)}.row-no{font-family:var(--mtl-font-serif);font-size:var(--mtl-text-p);color:var(--mtl-ink-3);min-width:2ch}.row-body{flex-direction:column;flex:1;gap:2px;display:flex}.row-title{font-weight:600;font-size:var(--mtl-text-mf);letter-spacing:.02em;transition:color var(--mtl-dur-s) var(--mtl-ease)}a.row:hover .row-title{color:var(--mtl-accent)}.row-desc{font-size:var(--mtl-text-p);color:var(--mtl-ink-2)}.row-arrow{color:var(--mtl-ink-3);opacity:0;transition:opacity var(--mtl-dur-s) var(--mtl-ease), transform var(--mtl-dur-m) var(--mtl-ease);transform:translate(-6px)}a.row:hover .row-arrow{opacity:1;color:var(--mtl-accent);transform:translate(0)}@media (width<=560px){.row{gap:var(--mtl-space-2)}.row-arrow{display:none}}.article-header{padding:var(--mtl-space-8) 0 var(--mtl-space-4);text-align:center;border-bottom:1px solid var(--mtl-line);margin-bottom:var(--mtl-space-6)}.article-title{font-family:var(--mtl-font-sans);font-weight:600;font-size:var(--mtl-text-fff);line-height:var(--mtl-leading-heading);margin-bottom:var(--mtl-space-2)}.article-desc{color:var(--mtl-ink-2);font-size:var(--mtl-text-mf);max-width:56ch;margin:0 auto var(--mtl-space-4)}.manual-content{padding-bottom:var(--mtl-space-6)}.manual-section{padding:var(--mtl-space-6) 0;border-bottom:1px solid var(--mtl-line)}.manual-section:first-child{padding-top:0}.manual-section:last-child{border-bottom:none}.section-title{align-items:baseline;gap:var(--mtl-space-2);font-family:var(--mtl-font-sans);font-size:var(--mtl-text-f);margin-bottom:var(--mtl-space-4);font-weight:600;display:flex}.section-title .step-number{font-family:var(--mtl-font-mono);font-size:var(--mtl-text-p);color:var(--mtl-accent);border:1px solid var(--mtl-line);border-radius:var(--mtl-radius);text-align:center;min-width:2.4em;padding:2px 8px}.feature-item{margin-bottom:var(--mtl-space-3)}.feature-item:last-child{margin-bottom:0}.feature-title{font-size:var(--mtl-text-mp);color:var(--mtl-ink);margin-bottom:var(--mtl-space-1);font-weight:600}.feature-desc{font-size:var(--mtl-text-mp);color:var(--mtl-ink-2);max-width:var(--mtl-measure)}.nested-list{margin-top:var(--mtl-space-2);margin-bottom:var(--mtl-space-2);border-left:1px solid var(--mtl-line);padding-left:var(--mtl-space-2);list-style:none}.nested-list li{margin-bottom:var(--mtl-space-1);font-size:var(--mtl-text-mp);color:var(--mtl-ink-2)}.nested-list li strong{color:var(--mtl-ink);font-weight:600}.feature-desc code{font-family:var(--mtl-font-mono);background:var(--mtl-paper-dim);border:1px solid var(--mtl-line);border-radius:var(--mtl-radius);padding:1px 5px;font-size:.9em}.grid-list{margin-top:var(--mtl-space-2);margin-bottom:var(--mtl-space-2);border:1px solid var(--mtl-line);background:var(--mtl-line);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;display:grid}.grid-item{background:var(--mtl-paper);padding:var(--mtl-space-1) var(--mtl-space-2);font-size:var(--mtl-text-p);color:var(--mtl-ink);text-align:center;font-weight:500}.back-link{margin-top:var(--mtl-space-4);color:var(--mtl-ink-2);text-underline-offset:3px;font-size:var(--mtl-text-p);text-align:center;transition:color var(--mtl-dur-s) var(--mtl-ease);text-decoration:underline;display:block}.back-link:hover,.back-link:focus-visible{color:var(--mtl-accent)}@media (width<=600px){.article-title{font-size:var(--mtl-text-ff)}.section-title{font-size:var(--mtl-text-mf)}}.policy-content{padding-bottom:var(--mtl-space-6);display:none}.policy-content.active{display:block}.policy-content h2{font-family:var(--mtl-font-sans);font-weight:600;font-size:var(--mtl-text-f);color:var(--mtl-ink);margin-top:var(--mtl-space-6);margin-bottom:var(--mtl-space-2);padding-bottom:var(--mtl-space-1);border-bottom:1px solid var(--mtl-line)}.policy-content h2:first-child{margin-top:0}.policy-content h3{font-size:var(--mtl-text-mf);color:var(--mtl-ink);margin-top:var(--mtl-space-3);margin-bottom:var(--mtl-space-1);font-weight:600}.policy-content p{margin-bottom:var(--mtl-space-2);color:var(--mtl-ink-2);max-width:var(--mtl-measure)}.policy-content a{color:var(--mtl-ink);text-underline-offset:3px;transition:color var(--mtl-dur-s) var(--mtl-ease);text-decoration:underline}.policy-content a:hover,.policy-content a:focus-visible{color:var(--mtl-accent)}.effective-date{margin-top:var(--mtl-space-4);font-size:var(--mtl-text-p);color:var(--mtl-ink-3);text-align:center}.contact-box{border:1px solid var(--mtl-line);border-radius:var(--mtl-radius);padding:var(--mtl-space-4);margin-top:var(--mtl-space-6);text-align:center}.contact-box h3{margin-top:0;margin-bottom:var(--mtl-space-1)}.contact-box p{margin-bottom:0}.btn{font-family:var(--mtl-font-sans);font-size:var(--mtl-text-p);letter-spacing:.02em;border-radius:var(--mtl-radius);padding:var(--mtl-space-2) var(--mtl-space-4);cursor:pointer;border:1px solid var(--mtl-ink);transition:background-color var(--mtl-dur-s) var(--mtl-ease), color var(--mtl-dur-s) var(--mtl-ease), border-color var(--mtl-dur-s) var(--mtl-ease), transform var(--mtl-dur-s) var(--mtl-ease);font-weight:600;text-decoration:none;display:inline-block}.btn-primary{background:var(--mtl-ink);color:var(--mtl-paper);margin-top:var(--mtl-space-2)}.btn-primary:hover,.btn-primary:focus-visible{background:var(--mtl-accent-deep);border-color:var(--mtl-accent-deep);color:var(--mtl-paper);text-decoration:none;transform:translateY(-1px)}.contact-form{padding-bottom:var(--mtl-space-6)}.form-group{margin-bottom:var(--mtl-space-3);text-align:left}label{font-size:var(--mtl-text-p);margin-bottom:var(--mtl-space-1);color:var(--mtl-ink);font-weight:600;display:block}input[type=text],input[type=email],textarea{width:100%;padding:var(--mtl-space-2);border:none;border-bottom:1px solid var(--mtl-line);font-size:var(--mtl-text-mp);color:var(--mtl-ink);transition:border-color var(--mtl-dur-s) var(--mtl-ease);background-color:#0000;border-radius:0;font-family:inherit}input[type=text]::placeholder,input[type=email]::placeholder,textarea::placeholder{color:var(--mtl-ink-3)}input[type=text]:focus,input[type=email]:focus,textarea:focus{outline:2px solid var(--mtl-accent);outline-offset:2px;border-color:var(--mtl-accent)}textarea{resize:vertical;min-height:120px}button[type=submit]{background-color:var(--mtl-ink);width:100%;color:var(--mtl-paper);padding:var(--mtl-space-2);border:1px solid var(--mtl-ink);border-radius:var(--mtl-radius);font-family:var(--mtl-font-sans);font-size:var(--mtl-text-mp);letter-spacing:.02em;cursor:pointer;transition:background-color var(--mtl-dur-s) var(--mtl-ease), transform var(--mtl-dur-s) var(--mtl-ease);margin-top:var(--mtl-space-1);font-weight:600}button[type=submit]:hover,button[type=submit]:focus-visible{background-color:var(--mtl-accent-deep);border-color:var(--mtl-accent-deep);transform:translateY(-1px)}.faq{text-align:left;margin-bottom:var(--mtl-space-6)}.faq-heading{font-family:var(--mtl-font-sans);font-size:var(--mtl-text-mf);font-weight:600;line-height:var(--mtl-leading-heading);margin-bottom:var(--mtl-space-3)}.faq-item{border-bottom:1px solid var(--mtl-line)}.faq-item summary{cursor:pointer;padding:var(--mtl-space-2) var(--mtl-space-1);font-size:var(--mtl-text-mp);color:var(--mtl-ink);padding-right:var(--mtl-space-4);transition:color var(--mtl-dur-s) var(--mtl-ease);font-weight:500;list-style:none;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";right:var(--mtl-space-1);color:var(--mtl-ink-3);font-family:var(--mtl-font-mono);transition:transform var(--mtl-dur-s) var(--mtl-ease);position:absolute;top:50%;transform:translateY(-50%)}.faq-item[open] summary:after{content:"−";color:var(--mtl-accent)}.faq-item summary:hover,.faq-item summary:focus-visible{color:var(--mtl-accent-deep)}.faq-body{padding:0 var(--mtl-space-1) var(--mtl-space-3)}.faq-body p{font-size:var(--mtl-text-p);color:var(--mtl-ink-2);line-height:var(--mtl-leading-body)}.faq-body a{color:var(--mtl-accent-deep);text-underline-offset:2px;text-decoration:underline}.hp-field{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.form-turnstile{justify-content:center;display:flex}.form-status{min-height:1.5em;margin-top:var(--mtl-space-2);font-size:var(--mtl-text-p);text-align:center;color:var(--mtl-ink-2)}.form-status.is-success{color:var(--mtl-success)}.form-status.is-error{color:var(--mtl-accent-deep)}.yt-container{border-radius:var(--mtl-radius);background-color:var(--mtl-bg-panel);width:100%;height:0;box-shadow:0 4px 12px var(--mtl-shadow);margin-bottom:2rem;padding-bottom:56.25%;position:relative;overflow:hidden}.yt-container iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.site-header{align-items:center;gap:var(--mtl-space-2) var(--mtl-space-3);padding:var(--mtl-space-3) var(--mtl-space-4);border-bottom:1px solid var(--mtl-line);flex-wrap:wrap;display:flex;position:relative}.site-header-brand{flex-wrap:wrap;flex:auto;align-items:center;gap:0 .5rem;min-width:0;display:flex}.home-link{color:var(--mtl-ink);align-items:center;gap:.25rem;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.home-link:hover{color:var(--mtl-accent)}.home-link svg{flex-shrink:0;transform:translateY(-.1em)}.brand-separator{color:var(--mtl-ink-4);-webkit-user-select:none;user-select:none;font-size:.9rem}.brand-link{font-weight:600;font-size:var(--mtl-text-p);color:var(--mtl-ink-2);text-decoration:none}.brand-link:hover{color:var(--mtl-accent)}.site-nav{align-items:center;gap:var(--mtl-space-3);display:flex}.nav-link{font-size:var(--mtl-text-p);color:var(--mtl-ink-2);white-space:nowrap;text-decoration:none}.nav-link:hover{color:var(--mtl-accent)}.header-lang-toggle{flex-shrink:0;align-items:center;display:flex}.site-header-end{align-items:center;gap:var(--mtl-space-2);flex-shrink:0;display:inline-flex}.nav-toggle-checkbox{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nav-toggle-btn{cursor:pointer;padding:var(--mtl-space-1);font-weight:inherit;color:var(--mtl-ink);-webkit-user-select:none;user-select:none;border-radius:var(--mtl-radius);flex-shrink:0;margin:0;display:none}.nav-toggle-btn:hover{background-color:var(--mtl-paper-dim)}.nav-toggle-checkbox:focus-visible~.site-header-end .nav-toggle-btn{outline:2px solid var(--mtl-accent);outline-offset:2px}.nav-toggle-btn .icon-menu{display:block}.nav-toggle-btn .icon-close{display:none}.site-header-menu{align-items:center;gap:var(--mtl-space-4);margin-left:auto;display:flex}@media (width<=767px){.site-header-brand{flex:auto;order:1}.site-header-end{order:2;margin-left:auto}.nav-toggle-btn{justify-content:center;align-items:center;width:32px;height:32px;margin:0;padding:0;line-height:0;display:inline-flex}.nav-toggle-btn svg{width:24px;height:24px;display:block}.site-header-menu{align-items:flex-start;gap:var(--mtl-space-4);width:100%;padding:var(--mtl-space-3) 0 var(--mtl-space-2);border-top:1px solid var(--mtl-line);flex-direction:column;flex-basis:100%;order:3;margin-left:0;display:none}.nav-toggle-checkbox:checked~.site-header-end .nav-toggle-btn .icon-menu{display:none}.nav-toggle-checkbox:checked~.site-header-end .nav-toggle-btn .icon-close{display:block}.nav-toggle-checkbox:checked~.site-header-menu{display:flex}.site-nav{align-items:flex-start;gap:var(--mtl-space-3);flex-direction:column;width:100%}}:root{--mtl-paper:#fbfbf9;--mtl-ink:#1a1a1a;--mtl-ink-2:#4a4a48;--mtl-line:#dcdcd6;--mtl-accent:#a93b2a;--mtl-font-sans:"Montserrat", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;--white-key-bg:#fff;--white-key-active:#eaeae5;--black-key-bg:linear-gradient(to bottom, #333, #1a1a1a);--black-key-active:linear-gradient(to bottom, #222, #0a0a0a)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--mtl-font-sans);background:var(--mtl-paper);color:var(--mtl-ink);overscroll-behavior-y:contain;flex-direction:column;min-height:100dvh;display:flex}.mtl-header{border-bottom:1px solid var(--mtl-line);background:var(--mtl-paper);touch-action:auto;padding:.5rem 1rem;font-size:.875rem}.mtl-header-inner{flex-wrap:wrap;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;display:flex}.mtl-brand,.mtl-product-name{color:var(--mtl-ink);font-weight:700;text-decoration:none}.mtl-product-name{font-weight:500}.mtl-separator{color:var(--mtl-line)}.mtl-nav{gap:1rem;margin-left:auto;display:flex}.mtl-nav a{color:var(--mtl-ink-2);font-size:.875rem;text-decoration:none}.mtl-footer{border-top:1px solid var(--mtl-line);background:var(--mtl-paper);text-align:center;touch-action:auto;margin-top:auto;padding:1.5rem 1rem}.mtl-footer-inner{flex-direction:column;align-items:center;gap:1rem;max-width:1200px;margin:0 auto;display:flex}.mtl-sns{gap:1.5rem;display:flex}.mtl-sns a{color:var(--mtl-ink-2);font-size:.875rem;text-decoration:none}.mtl-copyright{color:var(--mtl-ink-2);font-size:.75rem}.app-container{flex-direction:column;flex-grow:1;align-items:center;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem;display:flex}.app-container:fullscreen{background:var(--mtl-paper);justify-content:center;max-width:none;height:100dvh;padding:0}:is(.app-container:fullscreen .header,.app-container:fullscreen .description-box){display:none!important}.app-container:fullscreen .keyboard-section{border-radius:0;flex-grow:1}.app-container:-webkit-full-screen{background:var(--mtl-paper);justify-content:center;max-width:none;height:100dvh;padding:0}:-webkit-any(.app-container:-webkit-full-screen .header,.app-container:-webkit-full-screen .description-box){display:none!important}:is(.app-container:fullscreen .header,.app-container:fullscreen .description-box){display:none!important}.app-container:-webkit-full-screen .keyboard-section{border-radius:0;flex-grow:1}@media (display-mode:standalone){.site-header,.site-footer,.header,.description-box{display:none!important}.app-container{padding:0;padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0);justify-content:center;gap:0;max-width:none;height:100dvh}.keyboard-section{border-radius:0;flex-grow:1}}.header{text-align:center;touch-action:auto;flex-shrink:0}h1{color:var(--mtl-ink);letter-spacing:.02em;margin-bottom:.25rem;font-size:2.5rem;font-weight:700}.subtitle{color:var(--mtl-ink-2);font-size:1rem;font-weight:400}.description-box{text-align:justify;max-width:72ch;color:var(--mtl-ink);border:1px solid var(--mtl-line);touch-action:auto;background:#fff;border-radius:2px;padding:1.5rem;font-size:1rem;line-height:1.8}.top-bar{touch-action:auto;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:flex-end;gap:1.5rem;width:100%;display:flex}.controls{flex-wrap:wrap;gap:1rem;display:flex}.control-group{flex-direction:column;gap:.25rem;display:flex}.control-label{color:var(--mtl-ink-2);font-size:.75rem;font-weight:600}.mtl-select{font-family:var(--mtl-font-sans);border:1px solid var(--mtl-line);color:var(--mtl-ink);cursor:pointer;background-color:#fff;border-radius:2px;height:38px;padding:.4rem 1rem;font-size:.875rem}.mtl-select:focus{border-color:var(--mtl-ink);outline:none}.toggle-container{border:1px solid var(--mtl-line);background:#fff;border-radius:2px;align-items:center;gap:1rem;height:38px;padding:.4rem 1rem;display:flex}.toggle-label{color:var(--mtl-ink);font-size:.875rem;font-weight:500}.switch{width:48px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--mtl-line);border-radius:2px;transition:all .3s cubic-bezier(.2,0,0,1);position:absolute;inset:0}.slider:before{content:"";background:var(--mtl-ink);border-radius:1px;width:18px;height:18px;transition:all .3s cubic-bezier(.2,0,0,1);position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--mtl-line)}input:checked+.slider:before{background-color:var(--mtl-accent);transform:translate(24px)}.keyboard-section{background:#1a1a1a;border-radius:6px;flex-direction:column;width:100%;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 12px #0003}.rotate-message{display:none}.keyboard-toolbar{background:#252525;border-bottom:1px solid #111;align-items:center;padding:.5rem 1rem;display:flex}.toolbar-spacer{flex:1}.custom-scrollbar{flex:2;justify-content:center;align-items:center;margin:0 1rem;display:flex}.scroll-track{cursor:pointer;background:#1a1a1a;border-radius:8px;width:100%;max-width:400px;height:16px;position:relative}.scroll-thumb{cursor:grab;background:#444;border-radius:6px;width:20%;height:12px;position:absolute;top:2px;left:0}.scroll-thumb:active{cursor:grabbing;background:#666}.toolbar-actions{flex:1;justify-content:flex-end;display:flex}.icon-btn{color:#888;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.25rem;transition:color .2s,background .2s;display:flex}.icon-btn:hover{color:#fff;background:#ffffff1a}.keyboard-scroll-wrapper{-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;background:#000;width:100%;height:300px;overflow:auto hidden}.keyboard-scroll-wrapper::-webkit-scrollbar{display:none}.keyboard-container{touch-action:none;background:#000;min-width:3000px;height:100%;padding-bottom:24px;display:flex;position:relative}.key{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:absolute}.key.white{background:var(--white-key-bg);z-index:1;border-right:1px solid #ccc;border-bottom-right-radius:4px;border-bottom-left-radius:4px;flex:1;justify-content:center;align-items:flex-end;height:100%;display:flex;position:relative}.key.white:last-child{border-right:none}.key.white.active{background:var(--white-key-active)}.note-label{color:#888;pointer-events:none;background:#000;justify-content:center;align-items:center;width:100%;height:24px;font-size:.75rem;font-weight:500;display:flex;position:absolute;bottom:-24px}.key.black{background:var(--black-key-bg);z-index:2;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:60%;transition:left .4s cubic-bezier(.2,0,0,1);position:absolute;top:0;box-shadow:2px 4px 6px #00000080}.key.black.active{background:var(--black-key-active);box-shadow:1px 2px 3px #0009}.key.white.is-root .note-label{color:#fff;font-weight:700}.key.black.is-root:after{content:"";background-color:#fff;border-radius:50%;width:6px;height:6px;position:absolute;bottom:8px;left:50%;transform:translate(-50%);box-shadow:0 1px 2px #00000080}@media screen and (orientation:landscape) and (height<=600px){.site-header,.site-footer,.header,.description-box{display:none!important}.app-container{padding:0;padding-top:env(safe-area-inset-top,0);padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);padding-bottom:env(safe-area-inset-bottom,0);gap:0;height:100dvh}.keyboard-section{height:100%;box-shadow:none;border-radius:0;flex-direction:column;display:flex}.keyboard-scroll-wrapper{flex-grow:1;height:auto}.top-bar{background:var(--mtl-paper);border-bottom:1px solid var(--mtl-line);align-items:center;gap:1rem;padding:.25rem 1rem}.control-group{flex-direction:row;align-items:center;gap:.5rem}.control-label{display:none}}@media (orientation:portrait) and (width<=768px){.rotate-message{color:#fff;z-index:50;text-align:center;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-weight:500;display:flex;position:absolute;inset:0}.rotate-message svg{margin-bottom:.5rem;transition:transform 1s ease-in-out;animation:2s infinite rotatePhone;transform:rotate(90deg)}.keyboard-toolbar,.keyboard-scroll-wrapper{filter:blur(4px);pointer-events:none}}@keyframes rotatePhone{0%{transform:rotate(0)}50%{transform:rotate(90deg)}to{transform:rotate(90deg)}}.modal-overlay{z-index:1000;opacity:1;background:#0009;justify-content:center;align-items:center;padding:1rem;transition:opacity .2s;display:flex;position:fixed;inset:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--mtl-paper);width:100%;max-width:400px;color:var(--mtl-ink);border-radius:8px;padding:1.5rem;box-shadow:0 10px 25px #0003}.modal-content h2{margin-bottom:.75rem;font-size:1.15rem}.modal-content p{color:var(--mtl-ink-2);margin-bottom:1.25rem;font-size:.875rem;line-height:1.6}.install-guide{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.install-guide h3{color:var(--mtl-ink);margin-bottom:.25rem;font-size:.875rem}.install-guide ol{color:var(--mtl-ink-2);padding-left:1.25rem;font-size:.875rem;line-height:1.5}.install-guide svg{vertical-align:middle;margin:0 .1rem}.modal-actions{justify-content:flex-end;display:flex}.mtl-btn{background:var(--mtl-ink);color:var(--mtl-paper);cursor:pointer;border:none;border-radius:4px;padding:.5rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:600}
