:root{color:#18352c;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;--ink:#18352c;--muted:#64776f;--quiet:#87968e;--line:#d8e2dc;--paper:#fff;--accent:#d65d43;--accent-dark:#b94b35;--accent-soft:#fbefeb;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;background:#f3f7f4;font-family:Avenir Next,Avenir,Segoe UI,sans-serif;font-weight:400}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,.upload-control:focus-within{outline-offset:3px;outline:3px solid #e7a291}.shell{width:min(1280px,100% - 56px);margin:0 auto;padding-bottom:56px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:56px;margin-bottom:18px;display:flex}.wordmark{color:var(--ink);letter-spacing:-.7px;align-items:center;gap:9px;font-size:19px;font-weight:750;text-decoration:none;display:inline-flex}.wordmark-mark{background:var(--accent);color:#fff;border-radius:8px 8px 8px 2px;place-items:center;width:25px;height:25px;font-size:17px;font-weight:750;line-height:1;display:grid}.prototype-tag,.eyebrow,.ready-badge,.image-details,.preview-caption{font-family:var(--mono);letter-spacing:.08em}.prototype-tag{background:var(--accent-soft);color:var(--accent-dark);border:1px solid #ecc2b7;border-radius:3px;padding:7px 9px;font-size:10px;font-weight:700}.eyebrow{color:var(--accent-dark);margin:0 0 14px;font-size:10px;font-weight:700;line-height:1.4}h1,h2,p{margin-top:0}.diagram-workspace{grid-template-columns:minmax(0,1fr);gap:17px;display:grid}.diagram-workspace.source-open{grid-template-columns:minmax(300px,400px) minmax(0,1fr)}.source-toggle{min-height:34px;color:var(--ink);cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #ccd9d1;border-radius:3px;padding:0 13px;font-size:12px;font-weight:600}.source-toggle:hover,.source-toggle[aria-expanded=true]{border-color:var(--accent);background:#fffaf8}.source-panel,.diagram-panel{border:1px solid var(--line);background:var(--paper);border-radius:5px;min-width:0}.source-panel{padding:22px}.diagram-panel{flex-direction:column;padding:14px;display:flex}.diagram-panel-heading{justify-content:space-between;align-items:flex-start;gap:12px;min-height:42px;margin-bottom:17px;display:flex}.toolbar{align-items:stretch;gap:12px;margin-bottom:14px;display:flex}.toolbar-actions{border:1px solid var(--line);background:var(--paper);border-radius:5px;flex:none;align-items:center;gap:10px;padding:0 14px;display:flex}.diagram-panel-heading .eyebrow{margin-bottom:4px;font-size:9px}.diagram-panel-heading h2{color:var(--ink);letter-spacing:-.035em;margin:0;font-size:16px;font-weight:650;line-height:1.35}.source-import{min-height:34px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #ccd9d1;border-radius:3px;align-items:center;padding:0 11px;font-size:11px;font-weight:600;display:inline-flex;position:relative}.source-import:hover{border-color:var(--accent);background:#fffaf8}.source-import:focus-within{outline-offset:3px;outline:3px solid #e7a291}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.source-editor{resize:vertical;color:#263b32;width:100%;min-height:395px;font-family:var(--mono);tab-size:2;white-space:pre;background:#f8faf9;border:1px solid #dce6df;border-radius:3px;padding:15px;font-size:12px;line-height:1.65;display:block}.source-editor:focus-visible{border-color:#c87966}.source-footer{color:var(--quiet);font-family:var(--mono);justify-content:space-between;gap:12px;margin-top:9px;font-size:9px;display:flex}.source-privacy-note{color:var(--muted);margin:12px 0 0;font-size:11px;line-height:1.55}.source-error,.diagram-error{color:#9b3e2d;background:#fff7f4;border:1px solid #e8c5bd;border-radius:3px;margin:12px 0 0;padding:10px 12px;font-size:11px;line-height:1.5}.preview-badge{color:#796a35;font-family:var(--mono);letter-spacing:.06em;white-space:nowrap;background:#fbf8eb;border:1px solid #e7dfc2;border-radius:3px;align-items:center;padding:6px 8px;font-size:8px;font-weight:700;display:inline-flex}.current-badge{color:#447354;background:#f0f8f2;border-color:#cce2d3}.stale-badge{color:#9b3e2d;background:#fff7f4;border-color:#e8c5bd}.diagram-stage{background-color:#f7faf8;background-image:radial-gradient(#d5e0d9 .7px,#0000 .7px);background-position:-4px -4px;background-size:18px 18px;border:1px solid #e4ebe6;flex:1;place-items:center;min-height:clamp(380px,100vh - 310px,760px);padding:20px;display:grid;overflow:auto}.diagram-render{background:#fff;border-radius:4px;width:100%;padding:24px;overflow:auto}.diagram-render svg{max-width:100%;height:auto;max-height:calc(100vh - 360px);margin:0 auto;display:block}.diagram-render.stale{outline-offset:4px;outline:2px dashed #bd705d}.diagram-empty{color:var(--muted);text-align:center;flex-direction:column;align-items:center;gap:12px;font-size:12px;display:flex}.diagram-status{min-height:14px;color:var(--quiet);margin:10px 0 0;font-size:10px;line-height:1.4}.diagram-export{border-top:1px solid #e8eeea;margin-top:12px;padding-top:12px}.diagram-export-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.diagram-export-modes,.diagram-export-formats{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.diagram-export-actions button{min-height:32px;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #ccd9d1;border-radius:3px;padding:0 10px;font-size:11px;font-weight:600}.diagram-export-modes{background:#f3f7f4;border:1px solid #d8e2dc;border-radius:4px;padding:3px}.diagram-export-modes button{min-height:28px;color:var(--muted);background:0 0;border-color:#0000}.diagram-export-modes button.active{color:var(--ink);background:#fff;border-color:#ccd9d1;box-shadow:0 1px 2px #18352c14}.diagram-export-modes button.active:first-child{border-bottom-color:var(--accent)}.diagram-export-formats{gap:6px}.diagram-export-actions button:hover:not(:disabled){border-color:var(--accent);background:#fffaf8}.diagram-export-actions button:disabled{cursor:not-allowed;opacity:.55}.diagram-export-status{min-height:14px;color:var(--quiet);flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:10px;line-height:1.4;display:flex}.workspace{grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);gap:17px;display:grid}.input-panel,.preview-panel{border:1px solid var(--line);background:var(--paper);border-radius:5px;min-width:0}.input-panel{padding:26px}.panel-heading{gap:14px;margin-bottom:25px;display:flex}.panel-heading h2,.preview-heading h2{color:var(--ink);letter-spacing:-.035em;margin:0;font-size:17px;font-weight:650;line-height:1.35}.panel-heading p{color:var(--muted);margin:5px 0 0;font-size:12px;line-height:1.55}.upload-control{cursor:pointer;background:#f8fbf9;border:1px dashed #b9cbc0;border-radius:4px;align-items:center;gap:13px;min-height:74px;padding:12px 14px;transition:border-color .14s,background-color .14s;display:flex;position:relative}.upload-control:hover{border-color:var(--accent);background:#fffaf8}.upload-icon{width:37px;height:37px;color:var(--accent);background:#fff;border:1px solid #e3ebe6;border-radius:4px;flex:none;place-items:center;font-size:22px;line-height:1;display:grid}.upload-copy{gap:4px;display:grid}.upload-copy strong{color:var(--ink);font-size:13px;font-weight:650}.upload-copy small,.field-note{color:var(--quiet);font-size:11px}.upload-action{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:3px;margin-left:auto;padding:7px 10px;font-size:11px;font-weight:600}.file-input{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.divider{color:#98a59e;font-family:var(--mono);letter-spacing:.07em;white-space:nowrap;align-items:center;gap:11px;margin:23px 0 20px;font-size:9px;display:flex}.divider:before,.divider:after{content:"";background:#e8eeea;flex:1;height:1px}.url-form>label{color:var(--ink);margin-bottom:8px;font-size:12px;font-weight:650;display:block}.url-control{gap:8px;min-width:0;display:flex}.url-control input{width:100%;min-width:0;height:42px;color:var(--ink);background:#fff;border:1px solid #ccd9d1;border-radius:3px;padding:0 11px;font-size:12px}.url-control input::placeholder{color:#a0ada6}.url-control button{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:3px;flex:none;min-width:92px;height:42px;padding:0 13px;font-size:12px;font-weight:650;transition:background-color .14s}.url-control button:hover:not(:disabled){border-color:var(--accent-dark);background:var(--accent-dark)}button:disabled,input:disabled{cursor:wait;opacity:.65}.field-note{margin:8px 0 0}.privacy-note{border-top:1px solid #e8eeea;margin-top:25px;padding-top:17px}.privacy-note p{color:var(--muted);margin:0;font-size:11px;line-height:1.6}.privacy-note a,.source-privacy-note a{margin-top:5px;display:inline-block}.preview-panel{flex-direction:column;padding:22px 23px 16px;display:flex}.preview-heading{justify-content:space-between;align-items:flex-start;gap:12px;min-height:39px;display:flex}.preview-heading .eyebrow{margin-bottom:4px;font-size:9px}.preview-heading h2{font-size:16px}.ready-badge{color:#447354;background:#f0f8f2;border:1px solid #cce2d3;border-radius:3px;align-items:center;gap:6px;padding:6px 8px;font-size:9px;font-weight:700;display:inline-flex}.ready-badge span{background:#5d9d79;border-radius:50%;width:6px;height:6px}.preview-stage{background-color:#f7faf8;background-image:radial-gradient(#d5e0d9 .7px,#0000 .7px);background-position:-4px -4px;background-size:18px 18px;border:1px solid #e4ebe6;flex:1;place-items:center;min-height:300px;display:grid;position:relative;overflow:hidden}.preview-stage:before,.preview-stage:after{z-index:1;content:"";pointer-events:none;border-style:solid;border-color:#aabbb0;width:10px;height:10px;position:absolute}.preview-stage:before{border-width:1px 0 0 1px;top:9px;left:9px}.preview-stage:after{border-width:0 1px 1px 0;bottom:9px;right:9px}.preview-stage.has-image{flex-direction:column;justify-content:center;gap:15px;padding:26px 22px 16px;display:flex}.image-frame{background:#fff;flex:1;place-items:center;width:100%;min-height:200px;display:grid;overflow:hidden}.image-frame img{object-fit:contain;max-width:100%;max-height:360px;display:block}.image-details{color:#63776b;justify-content:space-between;align-items:center;gap:10px;width:100%;font-size:9px;display:flex}.image-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.empty-state{text-align:center;flex-direction:column;align-items:center;max-width:300px;padding:24px;display:flex}.empty-state strong{color:var(--ink);margin-top:14px;font-size:13px;font-weight:650}.empty-state p{color:var(--muted);margin:6px 0 0;font-size:11px;line-height:1.55}.empty-art{background:#fff;border:1px solid #c6d7cc;border-radius:3px;grid-template-columns:repeat(2,1fr);gap:5px;width:64px;height:52px;padding:7px;display:grid;transform:rotate(-4deg);box-shadow:4px 4px #e3ece6}.empty-art span{background:#d9e9df;border-radius:1px}.empty-art span:nth-child(2){background:#efb5a5}.empty-art span:nth-child(3){background:#9dbbab}.empty-art span:nth-child(4){background:#e9e1c8}.loader-mark{border:2px solid #d9e5dd;border-top-color:var(--accent);border-radius:50%;width:25px;height:25px;animation:.7s linear infinite spin}.loader-mark+strong{margin-top:12px}.error-state .state-mark{background:var(--accent-soft);width:28px;height:28px;color:var(--accent-dark);border-radius:50%;place-items:center;font-size:14px;font-weight:750;display:grid}.error-state strong{color:var(--accent-dark)}.preview-caption{color:#87968e;text-align:right;margin:12px 0 0;font-size:8px}.palette-error{color:#9b3e2d;background:#fff7f4;border:1px solid #e8c5bd;border-radius:4px;margin:16px 0 0;padding:12px 14px;font-size:12px;line-height:1.5}.theme-editor{border:1px solid var(--line);background:var(--paper);border-radius:5px;margin:18px 0 48px;padding:24px}.theme-editor-heading{border-bottom:1px solid #e8eeea;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:19px;display:flex}.theme-editor-heading .eyebrow{margin-bottom:5px;font-size:9px}.theme-editor-heading h2{color:var(--ink);letter-spacing:-.04em;margin:0;font-size:18px;font-weight:650}.theme-editor-heading p:not(.eyebrow){color:var(--muted);margin:6px 0 0;font-size:12px;line-height:1.5}.copy-button{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;border-radius:3px;flex:none;min-height:38px;padding:0 13px;font-size:11px;font-weight:650}.copy-button:hover{border-color:var(--accent-dark);background:var(--accent-dark)}.theme-editor-content{grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:24px;padding-top:21px;display:grid}.theme-controls{align-content:start;gap:9px;display:grid}.theme-color-control{min-height:44px;color:var(--ink);border:1px solid #e6ece8;border-radius:3px;grid-template-columns:minmax(0,1fr) 38px auto;align-items:center;gap:10px;padding:5px 8px;font-size:11px;display:grid}.theme-color-control input{cursor:pointer;background:#fff;border:1px solid #d5dfd9;border-radius:3px;width:34px;height:28px;padding:2px}.theme-color-control code{color:var(--muted);font-family:var(--mono);text-transform:uppercase;font-size:10px}.theme-output{background:#f8faf9;border:1px solid #e6ece8;border-radius:3px;min-width:0;overflow:hidden}.theme-output-heading{min-height:38px;color:var(--ink);border-bottom:1px solid #e6ece8;justify-content:space-between;align-items:center;gap:12px;padding:7px 11px;font-size:10px;display:flex}.theme-output-heading span{color:#447354;text-align:right;font-size:10px}.theme-output pre{color:#34463e;max-height:250px;font-family:var(--mono);tab-size:2;margin:0;padding:12px;font-size:10px;line-height:1.55;overflow:auto}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=760px){.shell{width:min(560px,100% - 36px)}.workspace,.diagram-workspace,.diagram-workspace.source-open{grid-template-columns:1fr}.theme-picker{flex-direction:column;align-items:stretch}.toolbar{flex-direction:column}.toolbar-actions{justify-content:space-between;padding:10px 14px}.diagram-stage{min-height:330px}.diagram-render svg{max-height:none}.preview-stage{min-height:280px}.preview-panel{min-height:380px}.theme-editor-content{grid-template-columns:1fr}}@media (width<=460px){.shell{width:calc(100% - 28px)}.topbar{height:56px}.prototype-tag{font-size:8px}.theme-editor{padding:18px 15px}.theme-editor-heading{flex-direction:column}.theme-color-control{grid-template-columns:minmax(0,1fr) 38px 68px}.input-panel{padding:20px 17px}.preview-panel{padding:19px 16px 14px}.url-control{flex-direction:column}.url-control button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.theme-picker{border:1px solid var(--line);background:var(--paper);border-radius:5px;flex:1;align-items:center;gap:18px;min-width:0;margin:0;padding:10px 14px;display:flex}.theme-grid{flex-wrap:wrap;flex:1;gap:10px;display:flex}.theme-card{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:6px;flex-direction:column;width:112px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;position:relative;overflow:hidden}.theme-card:hover{border-color:#b9cbc1;transform:translateY(-2px);box-shadow:0 6px 16px #18352c1a}.theme-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.theme-card:has(input:focus-visible){outline-offset:3px;outline:3px solid #e7a291}.theme-thumb{border-bottom:1px solid var(--line);width:100%;height:auto;display:block}.theme-card-meta{flex-direction:column;gap:1px;padding:6px 9px 7px;display:flex}.theme-card-meta strong{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650;overflow:hidden}.theme-card-meta span{color:var(--muted);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:8px}@media (prefers-reduced-motion:reduce){.theme-card{transition:none}.theme-card:hover{transform:none}}