:root{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,sans-serif;color:#353632;color-scheme:light;--muted: #74756e;--text: #353632;--screen-ratio: 1072 / 1448;--screen-width: 400px}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f7f7f5}button,input,select{font:inherit}button,a,label,select{-webkit-tap-highlight-color:transparent}button,a,select,input{outline-offset:5px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #515d65}button,a{color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:wait}a{text-decoration:none}[hidden]{display:none!important}.wallpaper{position:fixed;inset:0;z-index:-1;background:#f7f7f5}.wallpaper:before,.wallpaper:after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .65s ease}.wallpaper:before{background:radial-gradient(ellipse at 12% 10%,#f9c99c 0,transparent 52%),radial-gradient(ellipse at 86% 18%,#a9c9fa 0,transparent 55%),radial-gradient(ellipse at 20% 94%,#d6b7dd 0,transparent 55%),radial-gradient(ellipse at 85% 92%,#f7d5b3 0,transparent 52%),#e5dff0}.wallpaper[data-scene=gradient]:before{opacity:1}.wallpaper[data-scene=warm]:after{background-image:url(/wallpapers/warm.jpg);opacity:1}.wallpaper[data-scene=sky]:after{background-image:url(/wallpapers/sky.jpg);opacity:1}.topbar{height:106px;padding:0 4.2vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:23px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center;gap:23px}.brand>span{font-size:12px;font-weight:400;letter-spacing:.1px;color:#656660}.load-button{display:flex;align-items:center;gap:10px;padding:12px 17px;border:1px solid #fff9;background:#ffffffb8;border-radius:7px;font-size:12px;box-shadow:0 2px 8px #00000005;transition:background .2s,transform .2s}.load-button:hover{background:#fff;transform:translateY(-1px)}svg{width:18px;height:18px}.load-button svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}main{position:relative;min-height:calc(100svh - 175px);padding:12px 28px 26px;display:flex;justify-content:center;align-items:center}.workspace{display:flex;flex-direction:column;align-items:center;animation:arrive .7s ease both}.device-shell{width:calc(var(--screen-width) + 48px);max-width:calc(100vw - 56px);padding:23px 23px 0;border:1px solid #b6b8b7;border-radius:19px;background:radial-gradient(circle,#60696804 .45px,transparent .7px) 0 0 / 3px 3px,radial-gradient(circle,#ffffff35 .45px,transparent .8px) 1px 1px / 4px 4px,linear-gradient(115deg,#fafbfa,#f0f2f1 38%,#e6e9e7);box-shadow:inset 0 1px 1px #fff,inset 2px 0 3px #ffffffd9,inset -2px -2px 4px #69757036,0 0 0 1px #d6d9d7,0 2px 0 1px #a4aaa7,0 5px 7px -3px #202a2647,0 20px 30px -15px #202a263d,0 42px 60px -27px #202a2630;position:relative}.device-shell:before{content:"";position:absolute;top:-4px;left:32px;width:32px;height:3px;border-radius:2px 2px 0 0;background:linear-gradient(#e7eae8,#afb6b2);box-shadow:inset 0 1px #fff,0 -1px 1px #59625d33}.device-shell:after{content:"";position:absolute;inset:4px;border:1px solid #bcc4bf75;border-radius:14px;box-shadow:inset 0 1px 1px #fff,0 1px 1px #ffffffb3;pointer-events:none}.screen-wrap{aspect-ratio:var(--screen-ratio);position:relative;background:#fff;border:1px solid #9ba39f;border-radius:2px;box-shadow:0 -2px 5px 1px #68756e24,0 0 0 1px #d3d9d5,0 2px 3px 1px #fff;overflow:hidden}.screen-wrap:after{content:"";position:absolute;inset:0;box-shadow:inset 0 2px 5px #26352e26,inset 1px 0 3px #26352e12;pointer-events:none}canvas{width:100%;height:100%;display:block;touch-action:none;opacity:0}canvas.ready{opacity:1}.device-chin{height:57px;display:flex;justify-content:space-between;align-items:center;padding-right:3px}.device-chin>span:first-child{font-size:12px;letter-spacing:.5px;color:#909892;font-weight:550;text-shadow:0 1px 0 #fff}.chin-dot{width:4px;height:4px;border-radius:50%;background:#c1c8c3;box-shadow:inset 0 1px 1px #7c888066,0 1px #fff}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:25px;text-align:center;background:#fafaf8;font-size:11px;color:#777}.loading.done{display:none}.loading-brand{font-size:31px;letter-spacing:-1.5px;color:#444}.loading-line{height:1px;width:40px;background:#777;animation:breathe 1.4s ease-in-out infinite}.reader-actions{display:flex;align-items:center;gap:3px;margin-top:21px;background:#ffffffc9;border:1px solid #ffffffab;border-radius:7px;padding:4px 7px;box-shadow:0 2px 12px #00000004}.reader-actions button,.file-button{border:0;background:transparent;font-size:11px;padding:8px 12px;border-radius:4px;cursor:pointer}.reader-actions button:hover,.file-button:hover{background:#00000007}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.file-button:focus-within{outline:2px solid #515d65}.divider{height:14px;width:1px;background:#0002;margin:0 3px}.device-caption{display:flex;gap:12px;font-size:10px;letter-spacing:.2px;margin-top:14px;color:#73746d}.settings{position:absolute;left:calc(50% + 310px);top:50%;transform:translateY(-58%);width:230px;font-size:12px;padding:0}.setting-group{margin-bottom:29px}h2{font-size:10px;letter-spacing:1.8px;font-weight:500;margin:0 0 17px;display:flex;justify-content:space-between}h2 span{letter-spacing:0;color:#73746d;font-size:10px}.scenes{display:flex;justify-content:space-between;gap:10px}.scenes button{border:0;padding:0;background:transparent;font-size:9px;color:#686a64;text-align:center;display:grid;gap:9px;justify-items:center}.swatch{width:46px;height:39px;border-radius:5px;border:1px solid #00000010;background-size:cover;background-position:center;display:block;transition:border-color .15s}.scenes button:hover .swatch{border-color:#00000030}.scenes button[aria-pressed=true]>span:last-child{color:#353632;text-decoration:underline;text-decoration-color:#74756e80;text-underline-offset:4px}.minimal{background:#fcfcfa}.gradient{background:radial-gradient(at 0 0,#f3c392,transparent 70%),radial-gradient(at 100% 0,#95c4f5,transparent 75%),linear-gradient(20deg,#bba1dc,#f2c8ad)}.warm{background-image:url(/wallpapers/warm.jpg)}.sky{background-image:url(/wallpapers/sky.jpg)}select{width:100%;appearance:none;padding:12px 38px 12px 16px;background-color:#ffffffa8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23636b64' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;border:1px solid #00000012;border-radius:5px;color:#41433c;font-size:12px}.setting-note{font-size:10px;line-height:1.7;color:#777970;margin:11px 0 0}.dimensions{display:flex;align-items:center;gap:6px;margin-top:13px}.dimensions label{display:grid;gap:6px;min-width:0;font-size:10px}.dimensions input{width:100%;padding:8px 4px;border:1px solid #0002;background:#fffc;border-radius:3px;font-size:12px}.dimensions>span{margin-top:15px}.apply{margin-top:10px;width:100%;border:1px solid #0002;border-radius:4px;background:#fffb;padding:8px;font-size:11px}#display-message{display:block;color:#a0392b;font-size:11px;line-height:1.5;margin-top:7px}#repository-controls{border-top:1px solid #0002;padding-top:15px;margin-bottom:20px}#repository-controls .controls{display:flex;flex-wrap:wrap;gap:6px}#repository-controls button{padding:9px;background:#fffd;border:1px solid #0002;border-radius:4px;font-size:11px}#repository-status{display:block;margin-top:10px;font-size:10px;line-height:1.7;overflow-wrap:anywhere}.diagnostics{font-size:10px;color:#71746c}.diagnostics summary{cursor:pointer;width:fit-content}.diagnostics output,.diagnostics a{display:block;margin-top:12px}.diagnostics pre{max-height:150px;overflow:auto;white-space:pre-wrap;font-size:9px}#error{white-space:pre-wrap;overflow-wrap:anywhere;color:#a0392b;max-height:150px;overflow:auto}footer{height:69px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2vw;font-size:10px;letter-spacing:.2px;color:#777970}footer a{display:flex;gap:8px;align-items:center}footer svg{width:16px;height:16px}body[data-scene=sky] .topbar,body[data-scene=sky] footer,body[data-scene=sky] .device-caption{color:#fff}body[data-scene=sky] .brand>span{color:#fffe}body[data-scene=sky] .load-button{color:#353632}.settings:before{content:"";position:absolute;inset:-23px;border-radius:10px;z-index:-1;pointer-events:none}body[data-scene=sky] .settings:before{background:#fffffff0}body[data-scene=warm] .settings:before{background:#ffffffb5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes arrive{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.2;transform:scaleX(.65)}}@media(min-width:1000px){:root{--screen-width: min(400px, calc((100svh - 300px)*.74) )}}@media(max-width:1180px){.settings{left:calc(50% + 255px);width:200px}.swatch{width:39px}.settings:before{inset:-17px}}@media(max-width:999px){.settings:before{display:none}.topbar{height:85px}.brand>span{display:none}main{flex-direction:column;gap:38px;padding-top:12px}.device-shell{width:min(420px,calc(100vw - 48px))}.settings,body[data-scene=sky] .settings,body[data-scene=warm] .settings{position:static;transform:none;width:min(420px,100%);padding:20px;background:#ffffffcf;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.setting-group{margin:0}.scenes{gap:8px}.swatch{width:35px;height:34px}.diagnostics,#repository-controls,#error{grid-column:1 / -1}.device-caption{flex-wrap:wrap;justify-content:center}.load-button{font-size:11px;padding:11px}.setting-note{font-size:9px}footer{height:70px}}@media(max-width:430px){.settings,body[data-scene=sky] .settings,body[data-scene=warm] .settings{grid-template-columns:1fr;gap:26px}.scenes{justify-content:flex-start;gap:20px}.swatch{width:46px;height:39px}.brand{font-size:21px}.topbar{padding:0 22px}.device-caption{font-size:9px}.device-chin{height:40px}.reader-actions button,.file-button{padding:8px 10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}#mobile-settings{display:none}@media(max-width:600px),(pointer:coarse)and (max-height:600px){html,body{width:100%;height:100%;overflow:hidden;background:#fff}.wallpaper,.topbar,footer,.device-chin,.reader-actions,.device-caption{display:none}main{display:block;width:100%;height:100dvh;min-height:0;padding:0}.workspace{width:100%;height:100%;animation:none}.device-shell{width:100%;max-width:none;height:100%;border:0;border-radius:0;padding:0;background:#fff;box-shadow:none}.device-shell:before,.device-shell:after,.screen-wrap:after{display:none}.screen-wrap{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}#mobile-settings{display:block;position:fixed;z-index:5;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:36px;height:36px;border:1px solid #0002;border-radius:50%;background:#ffffffe6;box-shadow:0 2px 10px #0001;font-size:22px;line-height:1;color:#555}.settings,body[data-scene=sky] .settings,body[data-scene=warm] .settings{display:none}body.settings-open .settings{display:grid;position:fixed;z-index:3;inset:auto 12px 64px;width:auto;max-height:calc(100dvh - 158px);overflow:auto;transform:none;background:#fffffff5;padding:22px;border:1px solid #0002;box-shadow:0 10px 50px #0002;grid-template-columns:1fr;gap:22px}body.settings-open .topbar{display:flex;position:fixed;z-index:4;top:0;left:0;right:0;height:70px;padding:10px 16px;background:#ffffffed;color:#353632}body.settings-open footer{display:flex;position:fixed;z-index:4;bottom:6px;left:12px;right:60px;height:44px;padding:0 12px;background:#fffffff0;border-radius:5px;color:#74756e}body.settings-open .load-button{color:#353632}body.settings-open .settings .reader-actions{display:flex;position:static;transform:none;margin:0;justify-content:center}}.language-setting{display:flex;align-items:center;gap:7px;color:#91968f;font-size:11px}.language-setting button{border:0;background:transparent;padding:7px 2px;color:#777e76;font-size:11px}.language-setting button[aria-pressed=true]{color:#333e35;font-weight:600}.language-setting button:hover{color:#202a22}.device-chin .reader-actions{margin:0;padding:0;gap:8px;background:transparent;border:0;box-shadow:none}.reader-actions button,.reader-actions .file-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:8px;color:#737e77}.reader-actions svg{width:18px;height:18px;pointer-events:none}.reader-actions svg path{fill:none}.reader-actions button:hover,.reader-actions .file-button:hover{color:#303c34;background:#8d9c9112}.reader-actions #system-keyboard[aria-pressed=true]{color:#fff;background:#303c34;border-color:#303c34;box-shadow:inset 0 0 0 1px #303c34}.settings>.load-button{justify-content:center;margin-bottom:20px}.device-chin{position:relative;justify-content:center;padding-right:0}.device-chin>span:first-child{position:absolute;left:0}.loading.awaiting-folder .loading-line,.loading.awaiting-folder #loading-text{display:none}#loading #repository-open{padding:13px 20px;border:1px solid #b9c0bb;border-radius:6px;background:#fff;color:#424d45;font-size:13px;box-shadow:0 1px 3px #00000008}#loading #repository-open:hover{background:#f0f3f1}#loading #repository-status{max-width:280px;margin:0;font-size:11px;line-height:1.6;overflow-wrap:anywhere}#loading #repository-status:empty{display:none}#writeback-status{display:block;font-size:11px;line-height:1.6;overflow-wrap:anywhere;margin:-10px 0 20px}#writeback-status:empty{display:none}#repository-more{position:relative}#repository-more>summary{list-style:none;cursor:pointer;padding:5px 11px;font-size:20px;line-height:24px;border-radius:5px}#repository-more>summary::-webkit-details-marker{display:none}#repository-more>summary:hover{background:#ffffff80}.folder-menu{position:absolute;z-index:6;top:calc(100% + 6px);left:0;min-width:170px;padding:5px;background:#fffffff5;border:1px solid #00000012;border-radius:6px;box-shadow:0 6px 18px #00000012}#repository-controls .folder-menu button{width:100%;text-align:left;border:0;background:transparent}#repository-controls .folder-menu button:hover{background:#00000006}.runtime-row{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.runtime-row>.diagnostics{flex:1;min-width:0;padding-top:9px}.runtime-row #repository-more{flex:none}.runtime-row .folder-menu{left:auto;right:0}.runtime-row .folder-menu button{display:block;width:100%;padding:9px;border:0;border-radius:4px;background:transparent;text-align:left;font-size:11px}.runtime-row .folder-menu button:hover{background:#00000006}.local-fonts{color-scheme:light;color:#222;background:#fff;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid #bbb;border-radius:12px;padding:20px;font:14px/1.5 -apple-system,BlinkMacSystemFont,PingFang SC,sans-serif}.local-fonts::backdrop{background:#0008}.local-fonts header,.local-fonts-actions{display:flex;align-items:center;gap:12px}.local-fonts header{justify-content:space-between;margin-bottom:16px}.local-fonts h2{font-size:18px;margin:0}.local-fonts button,.local-fonts-actions label{color:inherit;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;padding:9px 12px;cursor:pointer;font:inherit}.local-fonts button:hover{background:#eaeaea}.local-fonts button:disabled{opacity:.5;cursor:default}.local-fonts :focus-visible{outline:2px solid #222;outline-offset:2px}.local-fonts-actions label{position:relative;overflow:hidden}.local-fonts [type=file]{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.local-fonts-actions label:focus-within{outline:2px solid #222}.local-fonts [type=search]{width:100%;margin-top:12px;padding:10px;color:#222;background:#fafafa;border:1px solid #ddd;border-radius:6px}.local-fonts [role=status]{margin:10px 0;min-height:21px;color:#555}.local-fonts-list{height:min(42dvh,360px);overflow-y:auto;overscroll-behavior:contain}.local-fonts-list button{display:block;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #eee;border-radius:0;overflow-wrap:anywhere}.local-fonts footer{font-size:12px;color:#666;margin-top:12px}