:root{--bg:#eef3f8;--surface:#fbfdff;--surface-soft:#e2eaf2;--ink:#13243b;--muted:#65758a;--line:#d3dde7;--accent:#296ee6;--accent-2:#18a69a;--accent-soft:rgba(41,110,230,.11);--dark:#101f36}
.hero{background:linear-gradient(160deg,#f7fbff 0,#eef3f8 55%,#e8f0f4 100%)}.hero::after{position:absolute;z-index:-1;right:-180px;bottom:-280px;width:720px;height:720px;border:1px solid #296ee622;border-radius:50%;box-shadow:0 0 0 70px #296ee60a,0 0 0 140px #18a69a08;content:""}.lucid-window{border-color:#c7d5e5;box-shadow:0 32px 85px #16365d26}.lucid-screen{display:grid;min-height:520px;background:#f5f8fb;grid-template-columns:145px 1fr}.draft-list{padding:22px 13px;border-right:1px solid #d8e1e9;background:#172b46;color:white}.draft-list>small{color:#8094ad;font:7px/1 var(--mono);letter-spacing:.15em}.draft-list div{display:flex;margin-top:12px;padding:10px;border:1px solid #ffffff12;border-radius:6px;background:#ffffff05;flex-direction:column;gap:5px}.draft-list div.active{border-color:#4284ed;background:#296ee629}.draft-list b{font:9px/1 var(--mono)}.draft-list span{color:#8497ae;font:6px/1 var(--mono)}.draft-list button{width:100%;margin-top:20px;padding:8px;border:1px solid #ffffff20;border-radius:5px;background:#ffffff08;color:white;font-size:8px}
.import-preview{padding:18px}.preview-head{display:flex;min-height:38px;align-items:center;justify-content:space-between;color:#63758b;font:8px/1 var(--mono)}.preview-head b{padding:5px 7px;border-radius:99px;background:#d9f4ec;color:#16806f;font-size:7px}.lucid-board{position:relative;height:340px;overflow:hidden;border:1px solid #dbe3eb;border-radius:8px;background-color:white;background-image:radial-gradient(#c9d3dc 1px,transparent 1px);background-size:18px 18px}.lane{position:absolute;top:24px;right:20px;left:20px;height:128px;border:1px solid #cbd9e8;border-radius:6px;background:#f4f8fd}.lane.lower{top:176px;background:#f2faf8}.lane>small{position:absolute;top:9px;left:10px;color:#8091a3;font:7px/1 var(--mono)}.box{position:absolute;z-index:2;top:51px;display:grid;width:82px;height:42px;border:2px solid #2f73df;border-radius:5px;background:#e8f1ff;color:#255caa;place-items:center;font:7px/1 var(--mono)}.box.a{left:25px}.box.b{left:50%;border-color:#e87561;background:#fff0ec;color:#ad4f40;transform:translateX(-50%)}.box.c{right:25px;border-color:#18a69a;background:#e6f8f4;color:#13786f}.box.d{left:25%;border-color:#8062c3;background:#f0ebfb;color:#644ca1}.box.e{right:25%;border-color:#18a69a;background:#e6f8f4;color:#13786f}.line{position:absolute;z-index:1;top:71px;height:2px;background:#8294a7}.line::after{position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:2px solid #8294a7;border-right:2px solid #8294a7;content:"";transform:rotate(45deg)}.l1{left:107px;width:calc(50% - 148px)}.l2{right:107px;width:calc(50% - 148px)}.l3{left:calc(25% + 82px);width:calc(50% - 164px)}.import-status{display:flex;height:76px;padding:13px 2px;align-items:center;gap:10px}.import-status span{color:var(--accent);font:7px/1 var(--mono)}.import-status b{color:#66788d;font:7px/1 var(--mono)}.import-status button{margin-left:auto;padding:8px 10px;border:0;border-radius:5px;background:var(--accent);color:white;font-size:8px}
.json-visual{display:flex;padding:16px;background:#12243c;color:#afc1d7;gap:9px}.json-visual span{color:#4f8ff0;font:24px/1 var(--mono)}.json-visual code{font-size:9px;line-height:1.65}.json-visual b{position:absolute;right:15px;bottom:13px;color:#44c0ad;font:7px/1 var(--mono)}.mermaid-visual{padding:19px;background:#172b46;color:#cbd8e7}.mermaid-visual code{font-size:9px;line-height:1.75}.history-visual{display:flex;padding:18px;align-items:center;justify-content:center}.history-visual span{display:grid;width:42px;height:42px;border:1px solid #b9c8d8;border-radius:50%;background:white;color:#718297;place-items:center;font:8px/1 var(--mono)}.history-visual i{width:38px;height:1px;background:#afbfce}.history-visual .active{border-color:var(--accent);background:#e5efff;color:var(--accent)}.boundary-visual{display:flex;padding:19px;align-items:center}.boundary-visual b{padding:10px;border:1px solid #bfcde0;border-radius:5px;background:white;color:#536a85;font:8px/1 var(--mono)}.boundary-visual span{margin:0 15px;color:var(--accent)}.boundary-visual i{padding:7px;border-radius:4px;background:#d9f4ec;color:#16806f;font:normal 7px/1 var(--mono)}
@media(max-width:620px){.lucid-screen{grid-template-columns:92px 1fr}.draft-list{padding:15px 8px}.import-preview{padding:10px}.box{width:56px}.box.a{left:10px}.box.c{right:10px}.l1{left:66px;width:calc(50% - 88px)}.l2{right:66px;width:calc(50% - 88px)}.import-status b{display:none}}