*{box-sizing:border-box}html,body{height:100%;margin:0;font:14px "Segoe UI","Microsoft JhengHei",sans-serif;background:#f3f3f3;color:#202020}button,input,select,textarea{font:inherit}.menubar{height:30px;display:flex;background:#fff;border-bottom:1px solid #ddd;padding-left:8px}.menu{position:relative;padding:6px 12px}.menu>div{display:none;position:absolute;top:29px;left:0;z-index:20;background:#fff;border:1px solid #bbb;box-shadow:0 3px 12px #0003;min-width:190px}.menu:hover>div{display:grid}.menu button{border:0;background:#fff;text-align:left;padding:8px}.menu button:hover{background:#e5f1fb}.toolbar{min-height:44px;display:flex;align-items:center;gap:5px;padding:5px 8px;background:#fafafa;border-bottom:1px solid #ccc}.toolbar button{padding:7px 9px;border:1px solid #bbb;background:#fff;border-radius:3px}.toolbar i{height:28px;border-left:1px solid #bbb;margin:0 3px}.toolbar.audio b{color:#0078d4;margin-right:8px}.toolbar.audio #seek{width:180px}.toolbar.hidden{display:none}main{height:calc(100% - 74px);display:grid;grid-template-columns:235px minmax(300px,43%) 1fr}body.audioOn main{height:calc(100% - 118px)}aside{background:#fafafa;border-right:1px solid #bbb;padding:8px;overflow:auto}aside h3{margin:5px 0 10px}#files{margin-top:8px}.file{padding:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file:hover{background:#dcecf9}.editor{display:grid;grid-template-columns:auto 1fr;min-height:0;border-right:1px solid #aaa}.editor pre{margin:0;padding:12px 8px;background:#f9fafb;color:#9ca3af;text-align:right;overflow:hidden;font:14px/1.6 Consolas,monospace}.editor textarea{border:0;outline:0;resize:none;padding:12px;background:#fff;font:14px/1.6 Consolas,monospace;white-space:pre;overflow:auto}.right{display:grid;grid-template-rows:36px 1fr;min-height:0}.right nav{background:#eee;border-bottom:1px solid #bbb}.right nav button{height:36px;border:0;padding:0 20px}.right nav button.active{background:#fff;border-top:2px solid #0078d4}.pane{display:none;overflow:auto;padding:20px}.pane.active{display:block}#json{margin:0;background:#fff;white-space:pre;font:12px/1.5 Consolas}.block{background:white;padding:15px;margin-bottom:20px;border-left:5px solid #0078d4;line-height:2.2}.block ruby rt{font-size:.45em;color:#e91e63}.block .lyric{font-size:24px}.block .time{color:#666}dialog{width:min(700px,92vw);max-height:80vh;overflow:auto;border:1px solid #888;border-radius:4px}dialog label{display:grid;grid-template-columns:130px 1fr;gap:8px;margin:10px}.row{display:flex;gap:6px}.row input{flex:1}.ytitem{display:grid;grid-template-columns:1fr auto auto;gap:6px;padding:9px;border-bottom:1px solid #ddd}.ytitem small{display:block;color:#666}#ytPlayer{aspect-ratio:16/9;margin:10px 0}#ytPlayer iframe{width:100%;height:100%}progress{width:100%}.context{position:fixed;z-index:99;background:#fff;border:1px solid #888;box-shadow:0 2px 8px #0004;padding:4px}.context button{display:block;width:100%;border:0;background:#fff;padding:7px;text-align:left}.hidden{display:none}@media(max-width:850px){main{grid-template-columns:1fr;grid-template-rows:180px 1fr 1fr}aside{border-bottom:1px solid #bbb}.toolbar{overflow-x:auto}.menubar{overflow:visible}}@media print{.menubar,.toolbar,aside,.editor,.right nav{display:none!important}main,.right{display:block!important;height:auto}.pane{display:none!important}#preview{display:block!important;padding:0}}