:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#151b1a;color:#efe4c6}*{box-sizing:border-box}body{margin:0;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));height:100dvh;display:flex;flex-direction:column;overscroll-behavior:none}header{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:48px}h1{font-size:17px;margin:0}h1 small{display:none}a{color:#d9bc7c}header a{font-size:13px;white-space:nowrap}button,.file-button,select,input{font:inherit;font-size:16px}button,.file-button{min-height:48px;color:inherit;background:#293431;border:1px solid #647164;border-radius:9px;padding:8px 12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:active,button.held{background:#72603c}button:disabled{opacity:.45}main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 172px;gap:12px;padding-top:8px}.screen-wrap{grid-column:1/3;position:relative;display:flex;align-items:center;justify-content:center;background:#050807;min-height:0;overflow:hidden;border:1px solid #46524a;border-radius:6px}#screen{display:block;width:100%;max-height:100%;aspect-ratio:4/3;object-fit:fill;image-rendering:pixelated;touch-action:none;outline:none}#cover{position:absolute;inset:0;background:radial-gradient(ellipse at top,#3c4835,#15231feF);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px}#cover h2{font-family:serif;font-size:clamp(25px,6vw,45px);letter-spacing:5px;margin:12px 0;color:#e8cd89}#cover p{font-size:14px;line-height:1.65;margin:10px 0}.eyebrow{font-size:12px;letter-spacing:4px;color:#a5b5a3}#start{background:#a28042;color:#fff8e4;min-width:160px}#resume{position:absolute;min-width:160px;background:#8b703f}.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;align-self:center}.dpad button{padding:0;font-size:24px;min-width:48px}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:3}.right{grid-column:3;grid-row:2}.dpad span{grid-column:2;grid-row:2;font-size:11px;text-align:center;align-self:center}.action-pad{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center}.action-pad button{min-height:48px;font-size:14px}.action-pad small{font-size:11px;color:#b9b99f}.confirm{background:#695839}#status{font-size:12px;line-height:1.5;min-height:32px;margin:8px 0 0;color:#bbc8ba}dialog{background:#1b2824;color:inherit;border:1px solid #7b805e;border-radius:12px;max-width:440px;width:calc(100% - 24px);max-height:90dvh;padding:18px;overflow:auto}dialog::backdrop{background:#000a}.menu-heading,.row{display:flex;gap:8px;align-items:center;justify-content:space-between}.menu-heading h2{font-size:20px}dialog>button,.file-button{display:block;width:100%;margin:10px 0}dialog p{font-size:13px;color:#bfcaba;line-height:1.65}.row>*{flex:1}label{display:block;margin:12px 0}select,input{width:100%;background:#0f1d18;border:1px solid #596c5c;color:inherit;padding:10px;margin-top:6px}input[type=file]{font-size:12px}details{border-top:1px solid #53604c;padding:12px 0}summary{cursor:pointer;min-height:30px}@media(orientation:landscape){main{grid-template-columns:150px minmax(0,1fr) 160px;grid-template-rows:1fr;gap:10px}.screen-wrap{grid-column:2;grid-row:1}.dpad{grid-column:1;grid-row:1}.action-pad{grid-column:3;grid-row:1}header{min-height:36px}header button{min-height:36px}#status{min-height:18px;margin-top:5px}#cover h2{font-size:28px;margin:5px}#cover p{font-size:12px;margin:4px}#cover .eyebrow{font-size:10px}#loading{max-width:95%}}@media(min-width:1000px){body{max-width:1360px;margin:auto}h1 small{display:inline;color:#b6baa1;font-size:12px}main{grid-template-columns:180px minmax(0,1fr) 190px}}

#zhuyin-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}#zhuyin-keys button{min-height:40px;padding:3px;font-size:16px}

.auto-name-option{display:flex;align-items:center;gap:8px;font-size:14px;margin:8px 0}.auto-name-option input{width:20px;height:20px;margin:0;accent-color:#b99a53}#preset-name{width:100%}