:root{color:#eef6f7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#0b1117;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{min-width:44px;min-height:44px;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible{outline-offset:3px;outline:3px solid #37ded8cc}#viewer{width:100vw;height:100dvh;display:block;position:fixed;inset:0}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}.top-bar{z-index:20;height:calc(92px + env(safe-area-inset-top));padding:calc(18px + env(safe-area-inset-top)) 24px 18px;background:#1a2028f0;grid-template-columns:minmax(104px,1fr) auto minmax(188px,1fr);align-items:end;display:grid;position:fixed;inset:0 0 auto;box-shadow:0 1px #ffffff0d}.top-bar h1{letter-spacing:0;text-align:center;margin:0;font-size:26px;font-weight:560;line-height:1}.top-actions{justify-content:flex-end;display:flex}.primary-action,.panel-action{color:#f3ffff;background:#35c6c0;border-radius:8px;justify-content:center;align-items:center;gap:8px;font-weight:650;transition:transform .18s,background-color .18s;display:inline-flex;box-shadow:0 8px 22px #35c6c042}.primary-action{padding:0 16px;font-size:17px}.panel-action{margin-top:4px;padding:0 18px;font-size:16px}.primary-action:hover,.panel-action:hover{background:#41d6cf}.primary-action:active,.panel-action:active,.tool-button:active,.nav-item:active,.side-arrow:active{transform:scale(.96)}.tool-rail{top:calc(104px + env(safe-area-inset-top));z-index:18;color:#eef6f7b3;gap:26px;display:flex;position:fixed;left:24px}.tool-button,.nav-item{background:0 0;justify-items:center;gap:8px;display:grid}.tool-button{width:58px;padding:0;font-size:16px}.icon-slot{opacity:.86;width:34px;height:34px;display:block}.icon-slot.small{width:20px;height:20px}.icon-slot svg{width:100%;height:100%;display:block}.side-arrow{z-index:18;background:#222832e6;border-radius:36px 0 0 36px;width:58px;height:72px;position:fixed;top:47%;right:0;box-shadow:0 10px 30px #00000047}.side-arrow span{color:#eef6f7d1;width:34px;height:34px;margin:auto;display:block}.bottom-nav{z-index:20;min-height:calc(106px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#1a2028f5;grid-template-columns:minmax(120px,.8fr) minmax(180px,2fr);display:grid;position:fixed;inset:auto 0 0;box-shadow:0 -1px #ffffff0d}.nav-item{color:#eef6f752;border-left:1px solid #ffffff0f;align-content:center;font-size:20px;font-weight:650}.nav-item.active{color:#eef6f7b8;background:#ffffff09;box-shadow:inset 0 1px #ffffff1f}.status-panel{z-index:30;color:#eef6f7d6;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#12181fe6;border:1px solid #ffffff1a;border-radius:8px;justify-items:center;gap:12px;width:min(360px,100vw - 32px);padding:24px;display:grid;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 24px 80px #00000057}.status-panel.hidden{display:none}.status-panel.error{color:#ffd6d6}.status-panel h2{margin:0;font-size:20px;font-weight:650;line-height:1.2}.status-panel p{color:#eef6f7a3;max-width:280px;margin:0;font-size:14px;line-height:1.5}.spinner{border:3px solid #ffffff2e;border-top-color:#35c6c0;border-radius:50%;width:32px;height:32px;animation:.9s linear infinite spin}.status-panel.idle .spinner,.status-panel.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=700px){.top-bar{height:calc(88px + env(safe-area-inset-top));padding:calc(16px + env(safe-area-inset-top)) 14px 16px;grid-template-columns:1fr auto 1fr}.top-bar h1{font-size:22px}.primary-action{width:48px;padding:0}.primary-action span:last-child{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tool-rail{top:calc(98px + env(safe-area-inset-top));gap:18px;left:16px}.tool-button{width:54px;font-size:15px}.side-arrow{width:50px;height:66px}.bottom-nav{min-height:calc(96px + env(safe-area-inset-bottom))}.nav-item{font-size:18px}}
