:root{color:#292542;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#292542;--muted:#4f4d66;--subtle:#646276;--line:#e3def0;--surface:#fff;--canvas:#f7f5fc;--accent:#6746c8;--accent-strong:#5a3bb5;--accent-soft:#f0ecfb;--carmine:#ba3654;--gold:#e3a008;--success:#176a57;--success-soft:#edf9f5;--warning:#725600;--warning-soft:#fffbea;--danger:#a52e35;--danger-soft:#fff2f2;--mono:"SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;--radius-card:16px;--radius-control:10px;--shadow-card:0 12px 36px #2925420f;font-optical-sizing:auto;background:#f7f5fc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 4% 0%, #6746c812, transparent 30rem), var(--canvas);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,textarea:focus-visible,.upload-control:focus-within{outline:3px solid var(--accent);outline-offset:3px}button{color:inherit}.shell{width:min(1440px,100% - 64px);margin:0 auto;padding-bottom:64px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:76px;margin-bottom:24px;display:flex}.wordmark{color:var(--ink);letter-spacing:-.055em;align-items:center;gap:10px;font-size:21px;font-weight:750;text-decoration:none;display:inline-flex}.wordmark-mark{flex:none;width:32px;height:32px;display:block}.intro{max-width:720px;margin:0 0 22px}.intro h1{color:var(--ink);letter-spacing:-.04em;margin-bottom:8px;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2}.intro p{max-width:68ch;color:var(--muted);margin-bottom:0;font-size:14px;line-height:1.6}.prototype-tag,.eyebrow,.ready-badge,.image-details,.preview-caption,.preview-badge{font-family:var(--mono);letter-spacing:.075em}.prototype-tag{background:var(--accent-soft);color:var(--accent-strong);border:1px solid #d9cff5;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:700}.eyebrow{color:var(--accent-strong);margin:0 0 10px;font-size:10px;font-weight:700;line-height:1.4}h1,h2,p{margin-top:0}h2{color:var(--ink)}.toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:14px;margin-bottom:16px;display:grid}.theme-picker,.toolbar-actions,.source-panel,.diagram-panel,.preview-panel,.theme-editor{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);min-width:0;box-shadow:var(--shadow-card)}.theme-picker{align-items:center;gap:16px;min-width:0;margin:0;padding:14px;display:flex}.theme-grid{flex-wrap:wrap;flex:1;gap:10px;min-width:0;display:flex}.theme-card{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:12px;flex-direction:column;width:108px;transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;position:relative;overflow:hidden}.theme-create-card{width:108px;color:inherit;background:#faf9fe;border:1px dashed #bcb1db;border-radius:12px;flex-direction:column;flex:none;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s,background-color .16s;display:flex;overflow:hidden}.theme-create-card:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 8px 18px #2925421f}.theme-create-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.theme-card:hover{border-color:#bcb1db;transform:translateY(-2px);box-shadow:0 8px 18px #2925421f}.theme-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.theme-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.theme-thumb,.theme-create-art{border-bottom:1px solid var(--line);width:100%;height:auto;display:block}.theme-card-meta{flex-direction:column;gap:3px;padding:8px 9px 9px;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(--subtle);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:8px}.toolbar-actions{flex:none;justify-content:center;align-items:center;gap:12px;padding:14px;display:flex}.preview-badge{color:var(--subtle);white-space:nowrap;font-size:9px;font-weight:700}.stale-badge{color:var(--warning)}.source-toggle,.source-import,.image-theme-button,.change-image-button,.copy-button,.url-control button,.upload-action,.diagram-export button{border-radius:var(--radius-control);background:var(--surface);min-height:40px;color:var(--ink);cursor:pointer;border:1px solid #d3cde3;padding:0 14px;font-size:13px;font-weight:650;transition:background-color .15s,border-color .15s,color .15s,transform .15s}.source-toggle:hover,.source-import:hover,.image-theme-button:hover,.change-image-button:hover,.copy-button:hover,.diagram-export button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.source-toggle[aria-expanded=true],.diagram-export button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}.image-theme-button{align-items:center;gap:9px;margin:10px 0 0;display:inline-flex}.image-theme-swatches{border:1px solid #29254229;border-radius:5px;display:inline-flex;overflow:hidden}.image-theme-swatches i{width:14px;height:16px}.diagram-workspace{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:16px;display:grid}.diagram-workspace.source-open{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}.source-panel{padding:22px}.diagram-panel{flex-direction:column;min-height:440px;padding:20px;display:flex}.diagram-area{flex:1;min-height:310px;display:flex;position:relative}.diagram-area .source-toggle{z-index:1;opacity:0;pointer-events:none;transition:opacity .15s;position:absolute;top:12px;right:12px}.diagram-area:hover .source-toggle,.diagram-area:focus-within .source-toggle{opacity:1;pointer-events:auto}.diagram-area .source-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.diagram-panel-heading,.preview-heading,.theme-editor-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.diagram-panel-heading{min-height:54px;margin-bottom:14px}.source-panel-actions{flex:none;align-items:center;gap:8px;display:flex}.diagram-panel-heading .eyebrow{margin-bottom:5px;font-size:9px}.diagram-panel-heading h2{letter-spacing:-.04em;margin:0;font-size:18px;font-weight:680}.source-import{flex:none;align-items:center;display:inline-flex;position:relative}.source-panel-actions .source-toggle,.source-panel-actions .source-import{min-height:36px;padding:0 10px;font-size:12px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.file-input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.source-editor{resize:vertical;width:100%;min-height:395px;color:var(--ink);font-family:var(--mono);tab-size:2;background:#f9f8fd;border:1px solid #e0dbed;border-radius:11px;padding:16px;font-size:12px;line-height:1.7;display:block}.source-editor:focus-visible{border-color:var(--accent)}.source-footer{color:var(--subtle);font-family:var(--mono);justify-content:space-between;gap:12px;margin-top:8px;font-size:10px;display:flex}.source-privacy-note,.field-note,.diagram-status,.diagram-export-status,.privacy-note,.theme-editor-heading>div>p:last-child{color:var(--muted);font-size:12px;line-height:1.6}.source-privacy-note{margin:16px 0 0}a{color:var(--accent-strong);text-underline-offset:3px}.source-error,.diagram-error,.picker-error,.palette-error{color:var(--danger)}.source-error,.diagram-error{margin:12px 0 0;font-size:13px;line-height:1.5}.diagram-stage{background-color:#fcfbff;background-image:radial-gradient(#e3def0 .8px,#0000 .8px);background-position:8px 8px;background-size:20px 20px;border:1px solid #e8e4f2;border-radius:12px;flex:1;place-items:center;min-height:310px;display:grid;overflow:auto}@media (hover:none){.diagram-area .source-toggle{opacity:1;pointer-events:auto}}.diagram-render{width:100%;min-height:300px;padding:20px;transition:opacity .15s}.diagram-render.stale{opacity:.45}.diagram-render svg{max-width:100%;height:auto;margin:auto;display:block}.diagram-empty{min-height:300px;color:var(--muted);text-align:center;place-content:center;justify-items:center;gap:10px;padding:24px;font-size:14px;display:grid}.loader-mark{border:3px solid #e3def0;border-top-color:var(--accent);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.diagram-status{margin:10px 0 0}.diagram-export{margin-top:18px}.diagram-export-actions{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;display:flex}.diagram-export-modes,.diagram-export-formats{flex-wrap:wrap;gap:7px;display:inline-flex}.diagram-export button{min-height:36px;padding:0 12px;font-size:12px}.diagram-export button:disabled{cursor:not-allowed;opacity:.48}.diagram-export-status{flex-wrap:wrap;gap:4px 14px;min-height:18px;margin:10px 0 0;font-size:11px;display:flex}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:start;gap:14px;display:grid}.preview-panel{min-width:0;padding:22px}#custom-theme{scroll-margin-top:20px}.preview-heading{margin-bottom:16px}.preview-heading .eyebrow{margin-bottom:6px}.preview-heading h2,.panel-heading h2,.theme-editor-heading h2{letter-spacing:-.045em;margin:0;font-size:clamp(18px,2vw,22px);font-weight:680;line-height:1.25}.ready-badge{background:var(--success-soft);color:var(--success);border:1px solid #b7e4d8;border-radius:999px;flex:none;align-items:center;gap:7px;padding:7px 10px;font-size:9px;font-weight:700;display:inline-flex}.ready-badge span{background:#27a789;border-radius:50%;width:7px;height:7px}.preview-stage{background-color:#faf9fe;background-image:radial-gradient(#ddd7ec .8px,#0000 .8px);background-position:8px 8px;background-size:20px 20px;border:1px solid #e6e2f1;border-radius:14px;place-items:center;min-height:360px;padding:18px;display:grid;position:relative;overflow:hidden}.preview-stage.has-image{min-height:0;padding:14px}.picker-form{width:100%;max-width:480px;padding:6px}.panel-heading{margin-bottom:18px}.panel-heading h2{margin-bottom:7px;font-size:19px}.panel-heading p{color:var(--muted);margin:0;font-size:13px;line-height:1.6}.upload-control{background:var(--surface);cursor:pointer;border:1px dashed #b3a2e6;border-radius:12px;align-items:center;gap:13px;min-height:78px;padding:13px 15px;transition:border-color .15s,background-color .15s;display:flex;position:relative}.upload-control:hover{border-color:var(--accent);background:var(--accent-soft)}.upload-icon{background:var(--accent-soft);width:38px;height:38px;color:var(--accent-strong);border-radius:11px;flex:none;place-items:center;font-size:22px;font-weight:500;display:grid}.upload-copy{color:var(--ink);gap:3px;font-size:13px;display:grid}.upload-copy small{color:var(--subtle);font-size:11px}.upload-action{align-items:center;min-height:34px;margin-left:auto;font-size:11px;display:inline-flex}.divider{color:var(--subtle);font-family:var(--mono);letter-spacing:.08em;align-items:center;gap:12px;margin:20px 0;font-size:9px;font-weight:650;display:flex}.divider:before,.divider:after{background:var(--line);content:"";flex:1;height:1px}.url-form>label{color:var(--ink);margin-bottom:7px;font-size:12px;font-weight:650;display:block}.url-control{gap:8px;display:flex}.url-control input{border-radius:var(--radius-control);background:var(--surface);min-width:0;min-height:42px;color:var(--ink);border:1px solid #d3cde3;flex:1;padding:0 12px;font-size:12px}.url-control input::placeholder{color:#6f6d84}.url-control button,.copy-button{border-color:var(--accent);background:var(--accent);color:#fff}.url-control button:hover:not(:disabled),.copy-button:hover{border-color:var(--accent-strong);background:var(--accent-strong);color:#fff}.url-control button:disabled{cursor:wait;opacity:.65}.field-note{margin:8px 0 0;font-size:11px}.picker-error,.palette-error{background:var(--danger-soft);color:var(--danger);border:1px solid #f1c6c8;border-radius:10px;margin:12px 0 0;padding:11px 13px;font-size:12px;line-height:1.5}.change-image-button{margin-top:12px}.loaded-view{gap:10px;width:100%;display:grid;position:relative}.image-frame{border:1px solid var(--line);background:var(--surface);border-radius:11px;place-items:center;width:100%;min-height:200px;max-height:480px;display:grid;overflow:hidden}.image-picker{max-width:100%;line-height:0;display:inline-block;position:relative}.image-picker img{object-fit:contain;-webkit-user-select:none;user-select:none;max-width:100%;max-height:460px;display:block}.color-pointer{background:var(--pointer-color);width:22px;height:22px;box-shadow:0 0 0 2px var(--ink), 0 3px 8px #2925424d;cursor:grab;touch-action:none;border:3px solid #fff;border-radius:50%;padding:0;position:absolute;transform:translate(-50%,-50%)}.color-pointer:active{cursor:grabbing}.change-image-button.corner{z-index:2;background:#fffffff0;min-height:34px;margin:0;font-size:11px;position:absolute;top:8px;right:8px}.image-details{color:var(--subtle);flex-wrap:wrap;gap:6px 12px;font-size:9px;display:flex}.image-name{max-width:100%;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview-caption{color:var(--subtle);text-align:right;margin:12px 0 0;font-size:9px}.privacy-note{background:#f0ecfb;border:1px solid #ddd5f4;border-radius:14px;align-self:stretch;padding:18px 20px;font-size:12px}.privacy-note p{margin:0}.palette-error{margin-top:16px}.theme-editor{margin-top:16px;padding:22px}.theme-editor-heading{align-items:center;margin-bottom:18px}.theme-editor-heading .eyebrow{margin-bottom:6px}.theme-editor-heading>div>p:last-child{max-width:660px;margin:8px 0 0}.theme-editor-content{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:16px;display:grid}.theme-controls{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;display:grid}.theme-color-control{border:1px solid var(--line);min-width:0;color:var(--muted);background:#fcfbff;border-radius:10px;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:10px 11px;font-size:11px;display:grid}.theme-swatch{border:1px solid #2925422e;border-radius:6px;grid-row:span 2;width:22px;height:22px}.theme-color-control code{color:var(--ink);font-family:var(--mono);font-size:10px}.theme-output{border:1px solid var(--line);background:#f9f8fd;border-radius:11px;min-width:0;overflow:hidden}.theme-output-heading{border-bottom:1px solid var(--line);color:var(--ink);flex-wrap:wrap;justify-content:space-between;gap:8px;padding:11px 13px;font-size:12px;display:flex}.theme-output-heading [role=status]{color:var(--success)}.theme-output pre{max-height:360px;color:var(--ink);font-family:var(--mono);margin:0;padding:14px;font-size:11px;line-height:1.65;overflow:auto}.site-footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;margin-top:28px;padding-top:16px;font-size:12px;line-height:1.5;display:flex}.site-footer p{margin:0}.site-footer a{color:var(--accent-strong);text-underline-offset:3px;font-weight:650}@media (width<=1100px){.toolbar{grid-template-columns:1fr}.toolbar-actions{justify-content:flex-end}.diagram-workspace.source-open{grid-template-columns:1fr}}@media (width<=760px){.shell{width:min(100% - 36px,640px)}.topbar{min-height:68px;margin-bottom:18px}.theme-picker{align-items:flex-start}.theme-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));display:grid}.theme-card,.theme-create-card{width:100%}.workspace,.theme-editor-content{grid-template-columns:1fr}.preview-stage{min-height:320px}.diagram-panel{min-height:380px;padding:14px}}@media (width<=480px){.shell{width:calc(100% - 28px)}.prototype-tag{padding:7px 8px;font-size:8px}.wordmark{gap:7px;font-size:19px}.wordmark-mark{width:29px;height:29px}.theme-picker,.toolbar-actions,.source-panel,.preview-panel,.theme-editor{padding:13px}.toolbar-actions{flex-wrap:wrap}.theme-editor-heading{flex-direction:column;align-items:flex-start}.theme-controls{grid-template-columns:1fr}.url-control{flex-direction:column}.url-control button{width:100%}.diagram-export-actions{align-items:center}.source-footer{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}