:root{--ink:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:#eceff3;font-family:PingFang SC,Noto Sans SC,sans-serif}button{font:inherit;cursor:pointer;border:0}.app{grid-template-rows:60px minmax(0,1fr) 32px;height:100%;display:grid}.topbar{border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:10px;padding:0 16px;display:flex}.brand{align-items:center;gap:9px;display:flex}.brand>b{color:#fff;background:#1d1d1f;border-radius:7px;place-items:center;width:28px;height:28px;display:grid}.brand strong{font-size:15px;display:block}.brand i{color:var(--muted);font-size:10px;font-style:normal}.brand small,.save,footer{color:var(--muted);letter-spacing:.08em;font:10px ui-monospace,monospace}.top-actions{flex:1;gap:6px;min-width:0;display:flex}.topbar>button,.top-actions button,.pane-head button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 11px;font-size:12px}.primary{color:#fff!important;background:#168b75!important;border-color:#0000!important}.workspace{grid-template-columns:280px minmax(400px,1fr) minmax(380px,420px);gap:12px;min-height:0;padding:12px;display:grid}.sidebar,.pane{border:1px solid var(--line);background:#fff;border-radius:16px;min-height:0;overflow:hidden}.sidebar{flex-direction:column;display:flex}.sidebar nav{border-bottom:1px solid var(--line);background:#f5f5f7;grid-template-columns:repeat(4,1fr);display:grid}.sidebar nav button{height:42px;color:var(--muted);background:0 0}.sidebar nav button.active{color:var(--ink);background:#fff}.side-body{padding:16px;overflow:auto}.side-body label{letter-spacing:.12em;color:#168b75;font:800 10px ui-monospace,monospace}.side-body h2{margin:7px 0;font-size:21px}.side-body h3{color:var(--muted);margin:22px 0 9px;font-size:12px}.side-body p{color:var(--muted);font-size:12px;line-height:1.7}.wide{border-radius:8px;width:100%;padding:10px}.side-list{gap:8px;margin-top:14px;display:grid}.side-list button{border:1px solid var(--line);color:var(--ink);text-align:left;background:#f7f7f8;border-radius:9px;padding:10px 12px;font-size:12px}.side-list button:hover{background:#fff;box-shadow:inset 0 0 0 2px #168b75}.style-card{border:1px solid var(--line);text-align:left;background:#f7f7f8;border-radius:10px;align-items:center;gap:9px;width:100%;margin:7px 0;padding:10px;display:flex}.style-card:hover,.style-card.active{background:#fff;box-shadow:inset 0 0 0 2px #168b75}.style-card>i{border-radius:50%;flex:none;width:9px;height:9px}.style-card b{font-size:12px;display:block}.style-card small{color:var(--muted);margin-top:3px;font-size:10px;display:block}.pane{flex-direction:column;display:flex}.pane-head{border-bottom:1px solid var(--line);height:44px;color:var(--muted);align-items:center;gap:10px;padding:0 14px;font-size:12px;display:flex}.pane-head b{color:var(--ink)}.pane-head span{flex:1}.editor textarea{resize:none;border:0;outline:0;flex:1;padding:20px;font:14px/1.8 ui-monospace,monospace}.preview-wrap{background:#e8ecf3;flex:1;padding:22px 16px;overflow:auto}.phone{background:#fff;border-radius:26px;max-width:360px;margin:auto;overflow:hidden;box-shadow:0 10px 30px #0f12180f}.phone-top{color:#fff;background:#15171b;justify-content:space-between;padding:12px 16px;font-size:11px;display:flex}.phone-top span{color:#9ee8d7}.phone article{background:var(--paper);padding:28px 32px;font-size:15px;line-height:1.85}.phone h1{margin:0 0 24px;font-size:27px;line-height:1.35}.phone h2{margin:28px 0 12px;font-size:19px;line-height:1.45}.phone h2 small{color:var(--accent);margin-right:8px;font:800 10px ui-monospace,monospace}.phone p{text-indent:2em;margin:0 0 15px}.phone blockquote{border-left:3px solid var(--accent);color:#59615f;margin:18px 0;padding-left:14px}.phone img{border-radius:12px;max-width:100%;height:auto;margin:16px 0;display:block}.phone mark{background:#ffe36a;padding:0 3px}.phone li{margin:6px 0}.phone .callout{border-left:3px solid var(--accent);background:#f2f7f5;margin:18px 0;padding:14px}footer{border-top:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;padding:0 16px;display:flex}