.editor-system { position:absolute; inset:0; overflow:hidden; font-family:Figtree,Arial,sans-serif; color:#111111; --ds-brand:#00c853; --ds-action:#111111; --ds-on-action:#ffffff; --ds-soft:#d3efd9; --ds-line:#e8e8e8; --ds-muted:#737373; }
.editor-system[hidden] { display:none; }
.ds-source-position { position:absolute; left:58px; top:56px; }
.ds-source { width:1440px; min-height:1500px; transform:scale(.55); transform-origin:top left; background:#f5f5f5; border-radius:20px; overflow:hidden; box-shadow:0 22px 80px #00000012; display:grid; grid-template-columns:230px 1fr; }
.editor-system * { box-sizing:border-box; }
.ds-sidebar { padding:38px 24px; border-right:1px solid var(--ds-line); background:#fff; }
.ds-logo { font-size:32px; font-weight:700; letter-spacing:-1.5px; display:flex; align-items:center; gap:12px; }
.ds-logo svg { width:32px; height:32px; }
.ds-logo img { display:block; width:130px; height:36px; object-fit:contain; object-position:left center; }
.editor-system .ds-boxicon { display:inline-block; flex:0 0 20px; width:20px; height:20px; fill:currentColor; stroke:none; vertical-align:middle; }
.ds-workspace { display:flex; align-items:center; justify-content:space-between; }
.ds-topbar > span:last-child, .ds-balance-footer > .ds-kicker { display:inline-flex; align-items:center; gap:8px; }
.ds-workspace { margin:40px 0 28px; padding:15px; border:1px solid var(--ds-line); border-radius:12px; font-size:15px; }
.ds-nav { padding:15px 18px; margin:5px 0; border-radius:10px; display:flex; align-items:center; gap:14px; font-size:16px; color:#737373; }
.ds-nav svg { width:20px; height:20px; }
.ds-nav.active { background:var(--ds-soft); color:#111111; font-weight:600; }
.ds-nav-label { margin:38px 18px 14px; font-size:11px; letter-spacing:1.5px; color:var(--ds-muted); }
.ds-sidebar-footer { margin:260px 16px 0; font-size:14px; line-height:1.7; }
.ds-main { padding:36px 42px; }
.ds-topbar { display:flex; justify-content:space-between; border-bottom:1px solid var(--ds-line); padding-bottom:25px; font-size:14px; color:var(--ds-muted); }
.ds-heading { display:flex; justify-content:space-between; align-items:center; margin:35px 0 30px; }
.ds-heading h2 { font-size:36px; letter-spacing:-1.3px; margin:0 0 8px; font-weight:600; }
.ds-heading p { color:var(--ds-muted); font-size:15px; margin:0; }
.ds-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; background:var(--ds-action); color:var(--ds-on-action); padding:14px 22px; border-radius:12px; font-size:15px; font-weight:600; border:1px solid transparent; }
.ds-button.secondary { background:white; color:#111111; border-color:#dddddd; }
.ds-button.soft { background:var(--ds-soft); color:#111111; }
.ds-overview { display:grid; grid-template-columns:1.08fr 1fr; gap:24px; }
.ds-balance { background:#ffffff; padding:30px; border-radius:18px; position:relative; }
.ds-kicker { font-size:13px; color:var(--ds-muted); }
.ds-amount { font-size:54px; letter-spacing:-2px; margin:18px 0 28px; font-weight:500; }
.ds-balance-footer { display:flex; justify-content:space-between; align-items:center; }
.ds-stat { padding:30px; border:1px solid var(--ds-line); border-radius:18px; background:white; position:relative; }
.ds-bars { height:112px; display:flex; align-items:end; gap:16px; margin:18px 0 12px; }
.ds-bars i { flex:1; background:#ededed; border-radius:6px 6px 0 0; }
.ds-bars i:nth-last-child(2) { background:var(--ds-brand); }
.ds-axis { display:flex; justify-content:space-between; font-size:12px; color:var(--ds-muted); }
.ds-transactions { margin-top:34px; background:white; border:1px solid var(--ds-line); border-radius:18px; padding:25px; }
.ds-section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.ds-section-heading h3 { margin:0; font-size:21px; font-weight:600; }
.ds-table-row { display:grid; grid-template-columns:2fr 1.2fr 1fr 1fr; align-items:center; padding:20px 8px; border-top:1px solid var(--ds-line); font-size:15px; }
.ds-table-row.head { font-size:12px; color:var(--ds-muted); border-top:0; padding-top:0; }
.ds-person { display:flex; align-items:center; gap:14px; }
.ds-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ds-soft); color:#111111; font-size:12px; }
.ds-person small { display:block; color:var(--ds-muted); font-size:12px; margin-top:4px; }
.ds-pill { display:inline-flex; padding:6px 12px; border-radius:100px; font-size:12px; background:#e6f3eb; color:#287449; width:max-content; }
.ds-pill.pending { background:#faf0db; color:#866322; }
.ds-extract { position:absolute; inset:-5px; border:2px solid #318bff; border-radius:inherit; pointer-events:none; opacity:0; }
.ds-extract::before { content:attr(data-label); position:absolute; top:-25px; left:10px; background:#318bff; color:white; padding:5px 10px; border-radius:5px; font-size:12px; }
.ds-sheets { position:absolute; inset:0; pointer-events:none; }
.ds-sheet-position { position:absolute; top:56px; left:54px; opacity:0; }
.ds-sheet-position.guides { left:470px; }
.ds-sheet { width:1280px; min-height:2400px; transform:scale(.3); transform-origin:top left; padding:58px; background:#fff; border:1px solid #e8e8e8; border-radius:24px; box-shadow:0 20px 90px #00000013; }
.ds-sheet-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:32px; border-bottom:2px solid var(--ds-line); font-size:22px; }
.ds-sheet-header .ds-logo { font-size:30px; }
.ds-sheet-header span { color:var(--ds-muted); }
.ds-sheet-title { margin:34px 0 36px; display:flex; align-items:end; justify-content:space-between; }
.ds-sheet-title h2 { font-size:76px; letter-spacing:-4px; line-height:1; margin:0; font-weight:500; }
.ds-sheet-title p { font-size:23px; color:var(--ds-muted); margin:0 0 5px; }
.ds-spec { border:0; border-radius:24px; padding:30px; margin-top:24px; }
.ds-spec-label { display:flex; justify-content:space-between; color:var(--ds-muted); font-size:20px; margin-bottom:26px; }
.ds-spec-label strong { color:#111111; font-weight:500; }
.ds-swatches { display:flex; height:130px; border-radius:14px; overflow:hidden; }
.ds-swatch { flex:1; display:flex; align-items:end; padding:16px; font-size:18px; }
.ds-color-caption { display:flex; justify-content:space-between; font-size:19px; margin-top:18px; color:var(--ds-muted); }
.ds-type-sample { display:grid; grid-template-columns:1fr 1.2fr; gap:35px; }
.ds-aa { font-size:126px; line-height:1; letter-spacing:-8px; background:#f5f5f5; padding:25px; border-radius:16px; }
.ds-aa small { display:block; font-size:54px; letter-spacing:-2px; }
.ds-weights { font-size:42px; line-height:1.25; padding-top:12px; }
.ds-type-scale { display:flex; align-items:baseline; gap:28px; margin-top:26px; }
.ds-type-scale span { color:var(--ds-muted); font-size:18px; }
.ds-component-row { display:flex; align-items:center; gap:22px; margin-top:25px; }
.ds-sheet .ds-button { font-size:25px; padding:23px 28px; border-radius:16px; }
.ds-field { padding:25px; border:2px solid #dddddd; border-radius:16px; font-size:25px; flex:1; }
.ds-toggle { width:74px; height:42px; border-radius:30px; background:var(--ds-brand); padding:5px; }
.ds-toggle::after { content:''; display:block; width:32px; height:32px; border-radius:50%; background:white; margin-left:auto; }
.ds-sheet .ds-pill { font-size:22px; padding:10px 20px; }
.ds-guideline { font-size:24px; line-height:1.5; color:var(--ds-muted); margin:20px 0 0; }
.ds-spacing { display:flex; align-items:end; gap:44px; height:150px; padding-bottom:30px; }
.ds-spacing i { display:block; width:62px; height:var(--space); background:var(--ds-soft); border-top:3px solid var(--ds-brand); position:relative; }
.ds-spacing i::after { content:attr(data-size); position:absolute; top:calc(100% + 10px); font-size:20px; font-style:normal; }
.ds-radii { display:flex; gap:24px; }
.ds-radius { flex:1; height:112px; background:#f5f5f5; border:2px solid #dddddd; display:grid; place-items:center; font-size:23px; }
.ds-states { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ds-iconography { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.ds-iconography-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:130px; padding:20px 8px; border:1px solid var(--ds-line); border-radius:16px; background:#f5f5f5; }
.editor-system .ds-iconography-item .ds-boxicon { width:44px; height:44px; flex-basis:44px; }
.ds-iconography-item span { font-size:18px; line-height:24px; color:var(--ds-muted); }
.ds-state { font-size:20px; color:var(--ds-muted); }
.ds-state .ds-button { margin-top:18px; display:flex; }
.ds-state:nth-child(2) .ds-button { background:#333333; }
.ds-state:nth-child(3) .ds-button { background:#eeeeee; color:#999999; }
.ds-rule { display:flex; align-items:center; gap:24px; margin-top:24px; font-size:23px; line-height:1.45; }
.ds-rule b { color:#287449; background:#e6f3eb; border-radius:50%; padding:12px 17px; }
.guides .ds-spec { padding:24px; margin-top:20px; }
.guides .ds-spacing { height:130px; }
.guides .ds-guideline { font-size:22px; line-height:1.35; }
.guides .ds-rule { margin-top:18px; font-size:22px; line-height:1.3; }
.ds-footer { display:flex; justify-content:space-between; margin-top:36px; padding-top:25px; border-top:2px solid var(--ds-line); font-size:19px; color:var(--ds-muted); }
.ds-semantic { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ds-semantic-item { border-radius:16px; padding:30px; font-size:26px; line-height:1.6; }
.ds-semantic-item small { display:block; font-size:20px; }
.ds-spec-table { width:100%; border-collapse:collapse; font-size:25px; text-align:left; }
.ds-spec-table th { font-size:20px; font-weight:500; color:var(--ds-muted); }
.ds-spec-table td,.ds-spec-table th { padding:24px 12px; border-bottom:2px solid var(--ds-line); }
.ds-layout-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; height:180px; margin-bottom:26px; }
.ds-layout-grid i { background:var(--ds-soft); border-radius:8px; }
.ds-motion-example { display:flex; align-items:center; gap:25px; margin:28px 0; font-size:24px; }
.ds-motion-example i { display:block; height:16px; border-radius:10px; background:var(--ds-brand); }
.ds-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; opacity:0; }
.ds-token { position:absolute; top:205px; left:390px; padding:12px 18px; background:white; border:1px solid #dddddd; box-shadow:0 8px 24px #00000012; border-radius:12px; font-size:17px; opacity:0; }
.ds-token i { display:inline-block; width:16px; height:16px; background:var(--ds-brand); border-radius:50%; vertical-align:-2px; margin-right:8px; }