:root { --bg:#111615; --ink:#e7eee8; --muted:#91a097; --line:#33413b; --accent:#ff7043; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px system-ui,sans-serif; }
button, textarea { font:inherit; }
button { cursor:pointer; }
header, footer { display:flex; align-items:center; justify-content:space-between; padding:14px 5%; border-bottom:1px solid var(--line); }
header h1 { margin:0; font-size:20px; }
nav { display:flex; gap:8px; }
.customize { position:absolute; top:58px; right:5%; z-index:2; padding:10px 14px; border:1px solid var(--line); background:var(--bg); box-shadow:5px 5px var(--accent); }
.customize summary { cursor:pointer; color:var(--accent); }
.customize label { display:flex; justify-content:space-between; gap:18px; margin:8px 0; font-size:12px; }
.customize input[type=color] { width:34px; height:22px; padding:0; border:0; }
.customize input[type=range] { width:80px; }
button { border:1px solid var(--line); padding:7px 11px; background:transparent; color:var(--ink); }
button:hover, button.active { border-color:var(--accent); color:var(--accent); }
main { display:grid; grid-template-columns:180px 1fr; min-height:calc(100vh - 110px); }
aside { padding:18px; border-right:1px solid var(--line); }
aside h2 { margin:0 0 12px; font-size:11px; }
aside button { display:block; width:100%; margin:5px 0; text-align:left; }
.assistant { margin-top:24px; padding-top:14px; border-top:1px solid var(--line); }
.assistant h2 { color:var(--accent); }
.assistant p { color:var(--muted); font-size:12px; line-height:1.4; }
.assistant input { width:100%; padding:8px; border:1px solid var(--line); background:transparent; color:var(--ink); }
.assistant button { text-align:center; }
.assistant #commandList { margin-top:8px; padding:8px; border:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.5; }
.assistant small { display:block; margin-top:8px; color:var(--muted); font-size:10px; line-height:1.4; }
section { display:grid; grid-template-rows:48px 1fr 180px; min-width:0; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--line); }
#editor { width:100%; height:100%; padding:18px; border:0; outline:0; resize:none; background:#090d0c; color:#dbe4dd; font:13px/1.5 monospace; }
iframe { width:100%; height:100%; border:1px solid var(--line); background:white; }
footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); font-size:11px; }
a { color:inherit; }
h1 { letter-spacing:.02em; }
.toolbar span { color:var(--muted); }
@media (max-width:600px) { main { grid-template-columns:1fr; } aside { display:flex; gap:6px; border-right:0; border-bottom:1px solid var(--line); } aside h2 { display:none; } aside button { margin:0; } }