:root{--font:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--canvas:#fcfcfc;--surface:#fff;--stroke:#dbdbdb;--text:#1e1e1e;--text-weak:#707070;--brand:#3858e9}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--canvas);color:var(--text);font:13px/1.5 var(--font)}#app{display:grid;grid-template-columns:200px minmax(320px,1fr) 2fr;height:100vh}aside,section{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--stroke)}header,footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--stroke)}footer{border-bottom:0;border-top:1px solid var(--stroke);margin-top:auto}ul,ol{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}#site-list li{padding:6px 8px;border-radius:6px;cursor:pointer}#site-list li.on{background:#eef1fd;color:var(--brand)}.note{color:var(--text-weak)}#composer{display:flex;gap:8px;padding:8px;border-top:1px solid var(--stroke)}#composer textarea{flex:1;font:inherit;resize:none}button{font:inherit;padding:4px 10px;border:1px solid var(--stroke);border-radius:6px;background:var(--surface);cursor:pointer}iframe{flex:1;border:0;background:#fff}#preview-url{color:var(--text-weak);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:800px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr 1fr}aside{max-height:30vh}}