:root{--header-bg: #0c0c0c;--header-text: #f2f2f2;--header-tagline-text: #a8a8a8;--footer-bg-top: #3a3a3a;--footer-bg-bottom: #2b2b2b;--footer-btn-bg: #4a4a4a;--footer-btn-bg-hover: #5c5c5c;--footer-btn-border: #202020;--footer-text: #e6e6e6}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}body{background:#f2f1ec;color:#2b2b28;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic,Segoe UI,sans-serif;line-height:1.6;display:flex;flex-direction:column;min-height:100vh}.site-header{width:100%;background:var(--header-bg);padding:10px 16px;text-align:center;box-shadow:inset 0 -1px #ffffff0f,0 2px 6px #0006}.site-header h1{margin:0 0 .4rem;font-size:1.8rem;letter-spacing:.03em;color:var(--header-text)}.site-header__subtitle{margin:0;font-size:.95rem;color:var(--header-tagline-text)}.screen-area{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:2rem 1rem;gap:.5rem}.lcd-row{display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:100%}.unsupported-notice{min-height:1.2em;font-family:monospace;font-size:.75rem;color:#8a6d1a;opacity:0;transition:opacity .15s ease-out}.unsupported-notice--visible{opacity:1}.mode-indicator{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.4rem .7rem;font-family:monospace;font-size:.7rem;font-weight:700;letter-spacing:.05em}.mode-indicator__item{display:flex;align-items:center;gap:.3em;color:#8f8d82}.mode-indicator__item:before{content:"";display:inline-block;width:.45em;height:.45em;border-radius:50%;background:currentColor;opacity:.5}.mode-indicator__item--active{color:#1f7a34}.mode-indicator__item--active:before{opacity:1}.mode-indicator__item--unimplemented{opacity:.4}@media (min-width: 480px){.lcd-row{flex-direction:row;align-items:center;gap:1rem}.mode-indicator{flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:.35rem}}#screen{display:block;image-rendering:pixelated;box-shadow:0 18px 40px #00000059,0 4px 14px #00000040;border-radius:2px}.control-bar{width:100%;padding:1rem 1rem 1.25rem;background:linear-gradient(to bottom,var(--footer-bg-top),var(--footer-bg-bottom));box-shadow:inset 0 1px #ffffff14,0 2px 6px #0006;display:flex;flex-direction:column;align-items:center;gap:.75rem}.control-bar__buttons{display:flex;flex-wrap:wrap;gap:.6rem;width:100%;max-width:480px}.control-bar__button{flex:1 1 30%;padding:.6rem .5rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.95rem;font-weight:700;letter-spacing:.05em;cursor:pointer;min-height:2.6rem}.control-bar__button:hover{background:var(--footer-btn-bg-hover)}.control-bar__button:active{background:var(--footer-btn-border)}.control-bar__button--wide{flex:1 1 100%}.control-bar__button--run{background:#2f6b3a}.control-bar__button--run:hover{background:#397e46}.control-bar__button--break{background:#7a3030}.control-bar__button--break:hover{background:#8f3a3a}.panel-switch-btn[aria-pressed=true]{background:var(--footer-btn-bg-hover);border-color:#8a8a8a}.editor-panel{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:.6rem}.editor-panel.hidden{display:none}.editor-panel__note{margin:0;width:100%;font-size:.78rem;line-height:1.5;color:#c7c6c0}.control-bar__button--load{background:var(--footer-btn-bg);width:100%}.control-bar__editor{width:100%;max-width:480px;box-sizing:border-box;padding:.6rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:#1c1c1c;color:#e8e8e0;font-family:SF Mono,Menlo,Consolas,Courier New,monospace;font-size:16px;line-height:1.5;resize:vertical}.virtual-keyboard{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.3rem}.virtual-keyboard.hidden{display:none}.virtual-keyboard__row{display:flex;gap:.25rem}.virtual-keyboard__key{flex:1 1 0;min-width:0;padding:.4rem .1rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.72rem;font-weight:700;letter-spacing:.02em;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:2.1rem}.virtual-keyboard__key:hover{background:var(--footer-btn-bg-hover)}.virtual-keyboard__key:active{background:var(--footer-btn-border)}.virtual-keyboard__key--unsupported{border-style:dashed}.onscreen-input-panel{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.5rem}.onscreen-input-panel.hidden{display:none}.onscreen-input-panel__toolbar{display:flex;justify-content:flex-end}.onscreen-input-panel__mode-btn{padding:.4rem .7rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.78rem;cursor:pointer}.onscreen-input-panel__mode-btn:hover{background:var(--footer-btn-bg-hover)}.virtual-pad{width:100%}.virtual-pad.hidden{display:none}.pad-panel__stage{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}.pad-side{display:flex;align-items:center;justify-content:center}.pad-side--right{flex:1 1 auto}.pad-stick{position:relative;width:34vw;max-width:150px;aspect-ratio:1;border-radius:50%;background:#ffffff14;border:1px solid #ffffff33;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;flex:0 0 auto}.pad-stick.pad-hidden{display:none}.pad-stick__knob{position:absolute;top:50%;left:50%;width:42%;height:42%;margin-top:-21%;margin-left:-21%;border-radius:50%;background:#ffffff40;border:1px solid #ffffff66;pointer-events:none;transition:background-color .1s ease-out}.pad-stick__knob--active{background:#ffffff70}.pad-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%;max-width:220px;margin-left:auto}.pad-button{aspect-ratio:1;border-radius:50%;border:1px solid #ffffff33;background:#ffffff1c;color:var(--footer-text);font-size:1rem;font-weight:700;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer}.pad-button:active,.pad-button.pad-button--active{background:#fff4}.pad-button.pad-hidden{display:none;visibility:hidden}.pad-profile-bar{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:#ffffff0a}.pad-profile-bar.hidden{display:none}.pad-profile-bar__row{display:flex;flex-wrap:wrap;gap:.4rem}.pad-profile-bar__editor-toggle{margin-left:auto;padding:.35rem .6rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.78rem;cursor:pointer}.pad-profile-bar__editor-toggle:hover{background:var(--footer-btn-bg-hover)}.pad-profile-bar__editor-toggle[aria-pressed=true]{background:var(--footer-btn-bg-hover);border-color:#8a8a8a}.pad-profile-bar__editor{display:flex;flex-direction:column;gap:.5rem}.pad-profile-bar__editor.hidden{display:none}.pad-profile-bar__add-button-btn{padding:.35rem .5rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.78rem;cursor:pointer}.pad-profile-bar__add-button-btn:hover{background:var(--footer-btn-bg-hover)}.pad-profile-bar__add-button-btn:disabled{opacity:.4;cursor:not-allowed}.pad-profile-bar__select,.pad-profile-bar__name-input,.pad-profile-bar__action-btn,.pad-profile-bar__binding-select{padding:.35rem .5rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg);color:var(--footer-text);font-size:.8rem}.pad-profile-bar__name-input{flex:1 1 8rem;background:#1c1c1c}.pad-profile-bar__action-btn{cursor:pointer}.pad-profile-bar__action-btn:hover{background:var(--footer-btn-bg-hover)}.pad-profile-bar__action-btn:disabled,.pad-profile-bar__binding-select:disabled{opacity:.4;cursor:not-allowed}.pad-profile-bar__bindings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .6rem}.pad-profile-bar__binding-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.78rem}.pad-profile-bar__binding-select{flex:1 1 auto;min-width:0}.pad-safe-area-probe{position:absolute;top:-9999px;left:-9999px;visibility:hidden;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}body.pad-shown{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body.pad-shown input,body.pad-shown textarea,body.pad-shown select,body.pad-shown [contenteditable],body.pad-shown [contenteditable] *,body.pad-shown .editor-panel,body.pad-shown .library-panel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}body.pad-shown canvas{-webkit-touch-callout:none}body.pad-sides{background:#14140f;height:100vh;overflow:hidden}body.pad-sides .site-footer,body.pad-sides .onscreen-input-panel__toolbar,body.pad-sides #pad-profile-bar,body.pad-sides .library-panel,body.pad-sides .editor-panel,body.pad-sides #unsupported-notice,body.pad-sides .site-header{display:none}body.pad-sides .screen-area{position:fixed;padding:0;z-index:15}body.pad-sides .control-bar{position:fixed;padding:.4rem .5rem;z-index:15}body.pad-sides .control-bar__buttons{max-width:none;gap:.4rem}body.pad-sides .control-bar__button:not(#btn-break):not(#btn-panel-keyboard){display:none}body.pad-sides .pad-panel__stage{position:fixed;top:0;right:0;bottom:0;left:0;padding:0;gap:0;pointer-events:none;z-index:20}body.pad-sides .pad-side{position:fixed;top:0;bottom:0;pointer-events:auto;padding:1rem;background:#00000026}body.pad-sides .pad-side--left{left:0;width:min(38vw,220px)}body.pad-sides .pad-side--right{right:0;width:min(38vw,220px);flex:none}body.pad-sides .pad-buttons{max-width:none}.library-panel{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.5rem}.library-panel.hidden{display:none}.library-panel--dragover{outline:2px dashed #8a8a8a;outline-offset:4px}.library-panel__note{margin:0;font-size:.78rem;line-height:1.5;color:#c7c6c0}.library-panel__toolbar{display:flex;flex-wrap:wrap;gap:.6rem}.library-panel__file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.library-panel__file-label{flex:1 1 30%;text-align:center}.library-panel__ignored-notice{min-height:1.2em;margin:0;font-family:monospace;font-size:.75rem;color:#8a6d1a;opacity:0;transition:opacity .15s ease-out}.library-panel__ignored-notice--visible{opacity:1}.library-panel__empty{margin:0;font-size:.82rem;line-height:1.5;color:#c7c6c0}.library-panel__empty.hidden{display:none}.library-panel__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:40vh;overflow-y:auto}.library-panel__row{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;padding:.5rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:var(--footer-btn-bg)}.library-panel__row-main{flex:1 1 auto;min-width:8rem;display:flex;flex-direction:column;gap:.1rem;cursor:pointer}.library-panel__row-title{color:var(--footer-text);font-size:.9rem;font-weight:700;word-break:break-all}.library-panel__row-added-at{color:#a8a8a8;font-size:.68rem;font-family:monospace}.library-panel__row-note{flex:1 1 8rem;min-width:0;padding:.3rem .4rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:#1c1c1c;color:#e8e8e0;font-size:.8rem}.library-panel__row-remove{flex:0 0 auto;padding:.4rem .6rem;border:1px solid var(--footer-btn-border);border-radius:4px;background:#7a3030;color:var(--footer-text);font-size:.78rem;cursor:pointer}.library-panel__row-remove:hover{background:#8f3a3a}.site-footer{flex-shrink:0;width:100%;padding:1.5rem 1rem 2rem;border-top:1px solid #dedcd2;background:#ecebe4;font-size:.8rem;color:#55544a;text-align:center}.site-footer p{max-width:42ch;margin:.5rem auto;text-align:left}.site-footer__rom-en,.site-footer__links{text-align:center}.site-footer__rom{color:#2b2b28}.site-footer__rom-en{font-style:italic;color:#6b6a60}.site-footer__links a{color:#2b2b28;text-decoration:underline}.site-footer code{background:#dedcd2;padding:.1em .35em;border-radius:3px;font-size:.85em}