.showcase{padding-top:18px}.screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}.screen-card{min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(11,27,46,.62);box-shadow:0 18px 50px rgba(0,0,0,.14)}.screen-caption{display:flex;align-items:center;gap:11px;margin-bottom:14px}.screen-caption>div{min-width:0;flex:1}.screen-caption b{display:block;color:#e8f2fb;font-size:13px;font-weight:650}.screen-caption small{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.4}.screen-caption a{color:#8ce0df;font-size:10px;white-space:nowrap}.screen-index{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(101,215,219,.4);border-radius:8px;color:#8ce0df;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace}.ui-shot{position:relative;overflow:hidden;min-height:244px;border:1px solid rgba(164,190,212,.18);border-radius:9px;background:#091625;color:#dbe8f4;box-shadow:inset 0 0 0 4px rgba(255,255,255,.018)}.library-shot{display:grid;grid-template-columns:37% 63%}.shot-sidebar{padding:15px 10px;background:#101e2d;border-right:1px solid rgba(150,180,200,.2);font-size:10px}.shot-brand{display:flex;align-items:center;gap:7px;margin-bottom:12px}.shot-brand i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#64d5d4;color:#071522;font:800 8px ui-monospace,SFMono-Regular,Consolas,monospace;font-style:normal}.shot-brand strong{font-size:11px}.shot-search{padding:7px 6px;border:1px solid rgba(130,169,201,.25);border-radius:6px;color:#86a6bd;background:rgba(255,255,255,.04);white-space:nowrap;overflow:hidden}.shot-tree{display:grid;gap:7px;margin-top:13px;color:#8fa8bb}.shot-tree b{color:#d4e4f0;font-size:10px}.shot-tree span{padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shot-tree .active{padding:6px 5px;border-radius:5px;color:#83e1df;background:rgba(100,213,212,.13)}.shot-reader{padding:14px 16px;background:#edf1f2;color:#1d3348}.shot-topline{color:#6f879b;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shot-reader-grid{display:grid;grid-template-columns:28% 72%;gap:14px;margin-top:15px}.shot-outline{display:grid;align-content:start;gap:10px;padding:11px 8px;border-right:1px solid #d3dde2;color:#7790a3;font-size:9px}.shot-outline b{color:#31516b;font-size:10px}.shot-document h3{margin:0;color:#18354e;font-size:18px}.shot-document h4{margin:17px 0 7px;color:#365b77;font-size:12px}.shot-document p{margin:0;color:#668094;font-size:10px;line-height:1.6}.shot-muted{font-size:8px!important;color:#9badb8!important}.shot-code{margin-top:11px;padding:9px;border-radius:5px;background:#20384e;color:#a8e3e0;font:9px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.editor-shot{background:#0b1928}.shot-toolbar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid rgba(146,177,199,.2);color:#b7cad8;font-size:10px}.shot-toolbar i{font-style:normal;color:#bdebec}.shot-toolbar em{color:#76d6bd;font-size:9px;font-style:normal}.toolbar-spacer{flex:1}.shot-editor-columns{display:grid;grid-template-columns:50% 50%;height:200px}.shot-editor-columns pre{margin:0;padding:15px;overflow:hidden;border-right:1px solid rgba(146,177,199,.2);color:#b8d7e6;font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.shot-preview{padding:14px 16px;background:#f1f2ed;color:#263b4c}.shot-preview h3{margin:0 0 14px;color:#284e69;font-size:16px}.shot-preview h4{margin:0 0 8px;color:#4b7185;font-size:11px}.shot-preview ul{margin:0;padding-left:16px;color:#6e8691;font-size:10px;line-height:1.8}.graph-shot{padding:13px 15px;background:#0b1a2a}.graph-shot-head,.graph-shot-foot{display:flex;align-items:center;gap:12px;color:#b9d2df;font-size:10px}.graph-shot-head span{margin-left:auto;color:#6e98a8}.graph-map{position:relative;height:185px;margin-top:5px;background:radial-gradient(circle at 51% 52%,rgba(90,210,205,.12),transparent 23%)}.graph-node{position:absolute;display:grid;place-items:center;min-width:52px;height:26px;padding:0 8px;border-radius:15px;border:1px solid currentColor;background:#112a3b;box-shadow:0 0 18px currentColor;color:#73dad4;font-size:9px;z-index:2}.node-main{left:45%;top:42%;min-width:62px;height:34px;background:#1b4c55;color:#b5f4e7;font-weight:700}.node-doc{color:#7bb4ec}.node-tag{color:#d4a7ff}.node-sem{color:#f2b56d}.n1{left:13%;top:20%}.n2{right:10%;top:22%}.n3{left:18%;bottom:17%}.n4{right:14%;bottom:15%}.n5{left:48%;top:6%}.graph-edge{position:absolute;left:50%;top:55%;width:36%;height:1px;transform-origin:left center;background:#70c6ce;opacity:.55}.e1{transform:rotate(-147deg)}.e2{transform:rotate(-32deg)}.e3{transform:rotate(150deg);width:30%}.graph-shot-foot{border-top:1px solid rgba(146,177,199,.16);padding-top:9px}.graph-shot-foot small{margin-left:auto;color:#6d8b9d;font-size:8px}.dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#77b8ed}.tag-dot{background:#d4a7ff}.sem-dot{background:#f2b56d}.settings-shot{display:grid;grid-template-columns:31% 69%;background:#101b2a}.settings-shot-nav{display:grid;align-content:start;gap:10px;padding:17px 10px;border-right:1px solid rgba(146,177,199,.2);color:#8ca8bb;font-size:10px}.settings-shot-nav b{margin-bottom:8px;color:#edf5fa;font-size:14px}.settings-shot-nav span{padding:8px 7px;border-radius:5px}.settings-shot-nav .active{color:#80dfd5;background:rgba(108,218,207,.12)}.settings-shot-body{padding:20px 18px}.settings-shot-title{color:#eef5f9;font-size:15px;font-weight:700}.theme-row,.path-row{display:flex;align-items:center;gap:7px;margin-top:22px;color:#99b1c0;font-size:10px}.theme-swatch{width:25px;height:18px;border:1px solid rgba(255,255,255,.22);border-radius:5px;background:#f2f0e8}.theme-swatch.dark{background:#182332}.theme-swatch.eye{background:#d8e6cf}.theme-swatch.bagua{background:linear-gradient(135deg,#2c231e 50%,#f5f0e8 50%)}.theme-swatch.active{outline:2px solid #6eddd2;outline-offset:2px}.theme-row em{color:#74ddd2;font-style:normal}.path-row{flex-wrap:wrap}.path-row span{width:100%}.path-row code{padding:7px;border:1px solid rgba(146,177,199,.2);border-radius:5px;color:#b5d9df;font-size:9px}.path-row button{padding:7px;border:1px solid #5dbbb6;border-radius:5px;color:#8fe5db;background:transparent;font-size:9px}.setting-note{margin-top:27px;color:#718d9d;font-size:9px;line-height:1.7}.catalog{padding-top:80px}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}.catalog-card{min-height:252px;padding:21px 20px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(150deg,rgba(17,38,61,.7),rgba(9,23,40,.45))}.catalog-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}.catalog-head span{color:#78dbd8;font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace}.catalog-head h3{margin:0;color:#e7f2f8;font-size:15px;font-weight:600}.catalog-card ul{margin:15px 0 0;padding-left:17px}.catalog-card li{margin:8px 0;color:var(--muted);font-size:11px;line-height:1.55}.catalog-card code{padding:2px 4px;border-radius:3px;color:#c7d6ff;background:rgba(169,139,255,.11);font:10px ui-monospace,SFMono-Regular,Consolas,monospace}.examples{padding-top:80px}.example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:26px}.example-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:#091827}.example-tag{color:#78dbd8;font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.example-card h3{margin:14px 0 13px;color:#e6f1f7;font-size:15px;font-weight:600}.example-card pre{min-height:128px;margin:0;padding:12px;overflow:auto;border:1px solid rgba(119,184,237,.2);border-radius:7px;background:#07121f;color:#b8d8e4;font:10px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.example-card p{margin:14px 0 0;color:var(--muted);font-size:11px;line-height:1.65}@media (max-width:980px){.screen-grid{grid-template-columns:1fr}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.screen-grid,.catalog-grid,.example-grid{grid-template-columns:1fr}.screen-caption{align-items:flex-start}.screen-caption a{display:none}.ui-shot{min-height:230px}.library-shot{grid-template-columns:40% 60%}.shot-reader{padding:11px 9px}.shot-reader-grid{gap:7px}.shot-document h3{font-size:14px}.settings-shot-body{padding:14px 11px}.catalog-card{min-height:0}.example-card pre{min-height:0}}
