:root{color-scheme:light dark;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:6px;--radius-lg:10px;--text-sm:.8125rem;--text-base:.875rem;--text-lg:1rem;--text-xl:1.25rem;--focus-width:2px;--hairline:1px;--tap-min:40px;--target-primary:var(--tap-min);--target-secondary:32px;--color-bg:#fff;--color-bg-subtle:#f8fafc;--color-bg-muted:#eef2f7;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-ink:#0f172a;--color-ink-muted:#64748b;--color-accent:#2563eb;--color-accent-fill:#dbeafe;--color-accent-strong:#1d4ed8;--color-on-accent:#fff;--color-success:#15803d;--color-success-fill:#dcfce7;--color-success-border:#bbf7d0;--color-warning:#92400e;--color-warning-fill:#fef3c7;--color-warning-border:#fde68a;--color-danger:#b91c1c;--color-danger-fill:#fee2e2;--color-danger-border:#fecaca;--color-danger-strong:#991b1b;--color-on-danger:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#15181c;--color-bg-subtle:#1c2126;--color-bg-muted:#242a30;--color-border:#333b43;--color-border-strong:#454f59;--color-ink:#e6e9ec;--color-ink-muted:#9aa5b1;--color-accent:#60a5fa;--color-accent-fill:#1c3457;--color-accent-strong:#93c5fd;--color-on-accent:#0b1a2e;--color-success:#4ade80;--color-success-fill:#143523;--color-success-border:#1f5738;--color-warning:#fbbf24;--color-warning-fill:#3a2c0c;--color-warning-border:#5c4813;--color-danger:#f87171;--color-danger-fill:#3a1616;--color-danger-border:#5c2323;--color-danger-strong:#fca5a5;--color-on-danger:#2a0b0b}}:root[data-theme=dark]{--color-bg:#15181c;--color-bg-subtle:#1c2126;--color-bg-muted:#242a30;--color-border:#333b43;--color-border-strong:#454f59;--color-ink:#e6e9ec;--color-ink-muted:#9aa5b1;--color-accent:#60a5fa;--color-accent-fill:#1c3457;--color-accent-strong:#93c5fd;--color-on-accent:#0b1a2e;--color-success:#4ade80;--color-success-fill:#143523;--color-success-border:#1f5738;--color-warning:#fbbf24;--color-warning-fill:#3a2c0c;--color-warning-border:#5c4813;--color-danger:#f87171;--color-danger-fill:#3a1616;--color-danger-border:#5c2323;--color-danger-strong:#fca5a5;--color-on-danger:#2a0b0b}*{box-sizing:border-box}body{background:var(--color-bg-subtle);color:var(--color-ink);font:var(--text-base)/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;margin:0}:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:2px}main.app{max-width:1680px;padding:var(--space-4) var(--space-4) var(--space-7);margin:0 auto}main.app .page-title{font-size:var(--text-xl);margin:0 0 var(--space-1)}main.app>.hint{margin:0 0 var(--space-5)}main.app>.hint:has(+.hint){margin-bottom:var(--space-2)}main.app>.hint.notice{color:var(--color-ink)}.site-header{justify-content:space-between;align-items:center;gap:var(--space-4);max-width:44rem;padding:var(--space-4);flex-wrap:wrap;margin:0 auto;display:flex}.site-brand{color:var(--color-ink);font-weight:700;text-decoration:none}.site-header nav{gap:var(--space-4);display:flex}.site-header a,.content a{color:var(--color-accent-strong)}.site-header a{min-height:var(--target-secondary);align-items:center;display:inline-flex}.content{max-width:44rem;padding:var(--space-4) var(--space-4) var(--space-7);font-size:var(--text-lg);margin:0 auto;line-height:1.8}.content h1{margin:0 0 var(--space-4);font-size:1.75rem;line-height:1.4}.content h2{margin:var(--space-7) 0 var(--space-3);font-size:1.25rem}.content h3{margin:0 0 var(--space-1);font-size:1rem}.content p{margin:0 0 var(--space-4)}.content ul,.content ol{margin:0 0 var(--space-4);padding-left:1.4em}.content li{margin-bottom:var(--space-2)}.content .lead{color:var(--color-ink);font-size:1.0625rem}.content .notice{background:var(--color-accent-fill);border-radius:var(--radius-lg);padding:var(--space-4)}.content .cta{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.content a.cta-link,.cta-link{min-height:var(--target-primary);padding:0 var(--space-5);border-radius:var(--radius-lg);background:var(--color-accent);color:var(--color-on-accent);align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.cta-note{color:var(--color-ink-muted);font-size:var(--text-base)}.content .cta-hero{margin:var(--space-6) 0}.content .cta-hero .cta-link{min-height:52px;padding:0 var(--space-6);font-size:1.0625rem}.content .screenshot{margin:0 0 var(--space-6)}.content .screenshot img{border:var(--hairline) solid var(--color-border);border-radius:var(--radius-lg);width:100%;height:auto;display:block}.content .screenshot figcaption{margin-top:var(--space-2);font-size:var(--text-base);color:var(--color-ink-muted)}.content .steps>li{margin-bottom:var(--space-5)}.content .faq dt{margin-top:var(--space-4);font-weight:700}.content .faq dd{margin:0 0 var(--space-4)}.content .next{margin-top:var(--space-7)}.content .crumbs{font-size:var(--text-base);color:var(--color-ink-muted);margin-bottom:var(--space-3)}.content .example-figure{margin:0 0 var(--space-4)}.content .figure-note{font-size:var(--text-base);color:var(--color-ink-muted)}.content .example-card{margin-bottom:var(--space-7)}.content .example-card h2{margin-top:0}.content .example-shows{font-size:var(--text-base);color:var(--color-ink-muted)}.content .credits{border-collapse:collapse;width:100%;font-size:var(--text-base);margin-bottom:var(--space-4)}.content .credits th,.content .credits td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-3) var(--space-2) 0;border-bottom:var(--hairline) solid var(--color-border)}.content .credits th{color:var(--color-ink-muted);font-weight:400}.content code{background:var(--color-bg-muted);border-radius:var(--radius-sm);padding:0 var(--space-1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}.page-footer{max-width:44rem;padding:var(--space-5) var(--space-4) var(--space-7);border-top:var(--hairline) solid var(--color-border);font-size:var(--text-base);margin:0 auto}.page-footer nav{gap:var(--space-5);flex-wrap:wrap;display:flex}.page-footer a{color:var(--color-accent-strong);min-height:var(--target-secondary);align-items:center;display:inline-flex}.page-footer-note{color:var(--color-ink-muted);margin:var(--space-2) 0 0}:root{--footer-height:48px}.site-footer{z-index:20;height:var(--footer-height);box-sizing:border-box;align-items:center;gap:var(--space-3);padding:0 var(--space-4);background:var(--color-bg);border-top:var(--hairline) solid var(--color-border);display:flex;position:fixed;bottom:0;left:0;right:0}body:has(.site-footer){padding-bottom:var(--footer-height)}.consent-reopen{font-size:var(--text-sm);padding:var(--space-1) var(--space-3);min-height:var(--target-secondary)}.consent-banner{left:var(--space-4);right:var(--space-4);bottom:calc(var(--footer-height) + var(--space-3));z-index:30;max-width:640px;padding:var(--space-4) var(--space-5);background:var(--color-bg);border:var(--hairline) solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);margin:0 auto;position:fixed;box-shadow:0 4px 16px #0000002e}.consent-banner p{margin:0 0 var(--space-3)}.consent-actions{justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.consent-actions button{min-height:var(--target-primary);padding:var(--space-2) var(--space-4)}.consent-categories{margin:0 0 var(--space-4);gap:var(--space-3);padding:0;list-style:none;display:grid}.consent-category{align-items:center;gap:var(--space-2);font-weight:600;display:flex}.consent-categories .hint{margin:var(--space-1) 0 0 var(--space-5)}.update-banner{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);background:var(--color-warning-fill);border:var(--hairline) solid var(--color-warning-border);border-radius:var(--radius-lg);color:var(--color-warning);font-size:var(--text-sm);display:flex}.update-banner button{border-color:var(--color-warning-border);margin-left:auto}.undo-banner{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);background:var(--color-accent-fill);border:var(--hairline) solid var(--color-accent);border-radius:var(--radius-lg);color:var(--color-ink);font-size:var(--text-sm);display:flex}.undo-banner button{border-color:var(--color-accent);color:var(--color-accent-strong);margin-left:auto}.appbar{align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5);background:var(--color-bg);border:var(--hairline) solid var(--color-border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.appbar .brand{font-weight:700;font-size:var(--text-lg)}.appbar .brand-input{font-weight:700;font-size:var(--text-lg);border:var(--hairline) solid transparent;padding:var(--space-1) var(--space-2);min-height:var(--target-secondary);box-sizing:border-box;background:0 0;flex:0 20em;min-width:10em}.appbar .brand-input:hover,.appbar .brand-input:focus-visible{border-color:var(--color-border);border-radius:var(--radius-sm)}.appbar .tagline{color:var(--color-ink-muted);font-size:var(--text-sm);white-space:nowrap}.appbar .status-group{gap:var(--space-4);margin-left:auto;display:flex}.appbar .status{font-size:var(--text-sm);color:var(--color-ink-muted);white-space:nowrap}.appbar .status.ok{color:var(--color-success)}.appbar .status.ng{color:var(--color-danger)}.hint.warning{color:var(--color-warning)}.panel{border:var(--hairline) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);background:var(--color-bg)}.panel+.panel{margin-top:var(--space-5)}.panel h2{margin:0 0 var(--space-3);font-size:var(--text-sm);color:var(--color-ink-muted);text-transform:uppercase;letter-spacing:.02em;font-weight:700}.panel label{font-size:var(--text-sm);color:var(--color-ink-muted);margin-top:var(--space-3);margin-bottom:var(--space-1);font-weight:600;display:block}.panel input,.panel select{box-sizing:border-box;width:100%;padding:var(--space-2) var(--space-3);min-height:var(--tap-min);font:inherit;font-size:var(--text-base);border:var(--hairline) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);color:inherit}.panel input:focus-visible,.panel select:focus-visible{outline-offset:0}.hint{font-size:var(--text-sm);color:var(--color-ink-muted)}.code-strip{margin-top:var(--space-3);flex-wrap:wrap;gap:2px;display:flex}.code-strip .char{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--text-lg);min-width:var(--space-6);min-height:var(--tap-min);padding:var(--space-1) var(--space-2);border:var(--hairline) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-subtle);color:inherit;cursor:pointer}.code-strip .char:hover{border-color:var(--color-border-strong)}.code-strip .char-selected{background:var(--color-accent-fill);border-color:var(--color-accent)}.item-list{margin:var(--space-2) 0 0;border:var(--hairline) solid var(--color-border);border-radius:var(--radius-sm);gap:0;padding:0;list-style:none;display:grid;overflow:hidden}.item-list li{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--text-base);background:var(--color-bg);display:flex;position:relative}.item-list li+li{border-top:var(--hairline) solid var(--color-border)}.row-actions{gap:var(--space-2);flex-shrink:0;display:flex}.item-delete{font-size:var(--text-sm);padding:var(--space-1) var(--space-3);min-height:var(--target-secondary);border-radius:var(--radius-sm);border:var(--hairline) solid var(--color-danger-border);background:var(--color-danger-fill);color:var(--color-danger);flex-shrink:0}.item-delete:hover{background:var(--color-danger-border)}.item-delete.armed{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-on-danger);font-weight:700}.item-delete.armed:hover{background:var(--color-danger-strong);border-color:var(--color-danger-strong)}.item-list li:has(.note-number) input[type=text]{flex:1;min-width:0}.note-number{color:var(--color-ink-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.note-picker{gap:var(--space-2);margin:var(--space-2) 0 var(--space-3);flex-direction:column;display:flex}.note-picker-option{align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);display:flex}.workspace{gap:var(--space-5);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=1024px){.workspace{grid-template-columns:minmax(26em,1fr) minmax(32em,1.15fr);align-items:start}.pane{max-height:calc(100dvh - var(--footer-height));padding-block:var(--space-3);position:sticky;top:0;overflow-y:auto}}.diagram-frame{border:var(--hairline) solid var(--color-border);border-radius:var(--radius-sm);background:#fff}.diagram-frame svg{width:100%;height:auto;display:block}.diagram-svg{white-space:pre}.export-actions .png-width{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-ink-muted);margin:0 0 0 auto;display:flex}.export-actions .png-width select,.export-actions .png-width input{width:auto;margin:0}.export-actions .png-width input{width:6em}.diagram-bg-transparent{background:0 0}.diagram-bg-white{background:#fff}.font-choice{gap:var(--space-4);margin-top:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(9em,1fr));display:grid}.font-preview-gothic{font-family:PNC Preview Gothic,sans-serif}.font-preview-mincho{font-family:PNC Preview Mincho,serif}.font-preview-design{font-family:PNC Preview Design,sans-serif}.font-preview-code-robotoCondensed{font-family:PNC Preview Roboto,ui-monospace,monospace}.font-preview-code-barlowCondensed{font-family:PNC Preview Barlow,ui-monospace,monospace}.font-preview-code-ibmPlexSansCondensed{font-family:PNC Preview Plex,ui-monospace,monospace}.panel .font-choice-option{text-align:center;justify-content:flex-start;align-items:center;gap:var(--space-2);font-size:var(--text-lg);color:inherit;cursor:pointer;flex-direction:column;margin:0;font-weight:400;display:flex}.export-actions{gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.export-actions button{margin-top:0}.issues{margin:0 0 var(--space-3);padding-left:var(--space-5);color:var(--color-danger);font-size:var(--text-sm)}.warnings{margin:0 0 var(--space-3);padding-left:var(--space-5);color:var(--color-warning);font-size:var(--text-sm)}button{font:inherit;font-size:var(--text-base);padding:var(--space-2) var(--space-4);min-height:var(--tap-min);border-radius:var(--radius-sm);border:var(--hairline) solid var(--color-border-strong);background:var(--color-bg-muted);color:inherit;cursor:pointer}button:hover{border-color:var(--color-ink-muted)}button:active{background:var(--color-border)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);font-weight:700}button.primary:hover:not(:disabled){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}button.add-item{margin-top:var(--space-4)}[role=status]{font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-2) 0 0}.tone-a{background:var(--color-accent-fill)}.tone-b{background:var(--color-success-fill)}.code-strip .char.tone-a,.code-strip .char.tone-b{border-color:#0000}.code-strip .char.char-selected{background:var(--color-accent-fill);border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.selection-actions{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.item-cards{margin:var(--space-2) 0 0;gap:var(--space-3);padding:0;list-style:none;display:grid}.item-card{border:var(--hairline) solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--color-bg)}.panel .item-card input,.panel .item-card select{width:auto;margin:0}.item-card-head{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.code-pill{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);min-width:var(--space-6);text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.panel .item-card .item-heading{flex:10em;min-width:0;font-weight:600}.option-rows{margin:var(--space-2) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.option-row{align-items:center;gap:var(--space-2);display:flex}.panel .item-card .option-code{flex:0 0 6em}.panel .item-card .option-description{flex:auto;min-width:0}.option-separator{color:var(--color-ink-muted)}.option-remove{padding-inline:var(--space-3)}.option-add{margin-top:var(--space-2)}.note-picker-root{position:relative}.note-button{padding-inline:var(--space-3);white-space:nowrap}.note-button.has-notes{background:var(--color-warning-fill);border-color:var(--color-warning-border);color:var(--color-warning)}.note-popover{right:0;top:calc(100% + var(--space-1));z-index:10;gap:var(--space-2);width:min(22em,80vw);padding:var(--space-3);border:var(--hairline) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);display:grid;position:absolute;box-shadow:0 4px 16px #0000001f}.note-popover-option{align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);color:inherit;margin:0;font-weight:400;display:flex}.panel .note-popover-option input{width:auto;min-height:0}.findings{margin:0 0 var(--space-3);font-size:var(--text-sm)}.findings-title{margin:0 0 var(--space-1);font-weight:700}.findings ul{padding-left:var(--space-5);margin:0}.findings-broken{color:var(--color-danger)}.findings-todo{color:var(--color-ink-muted)}.findings-notice{color:var(--color-warning)}.finding-link{all:unset;cursor:pointer;text-underline-offset:2px;text-decoration:underline}.finding-link:focus-visible{outline:var(--focus-width) solid var(--color-accent)}.relayout{margin:0 0 var(--space-3)}.summary-fallback{box-sizing:border-box;width:100%;min-height:6em;margin-top:var(--space-2);font:inherit;font-size:var(--text-sm)}.desc-field{min-width:0;min-height:var(--tap-min);box-sizing:border-box;padding:var(--space-2) var(--space-3);border:var(--hairline) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);font-size:var(--text-base);white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;flex:auto;line-height:1.5}.desc-field:focus-visible{outline:var(--focus-width) solid var(--color-accent);outline-offset:0}.desc-field:empty:before{content:attr(data-placeholder);color:var(--color-ink-muted)}.note-chip{padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--color-warning-fill);border:var(--hairline) solid var(--color-warning-border);color:var(--color-warning);font-size:var(--text-sm);vertical-align:.15em;user-select:none;cursor:default;margin:0 1px;line-height:1.3;display:inline-block}.note-chip.missing{background:var(--color-danger-fill);border-color:var(--color-danger-border);color:var(--color-danger)}.panel .note-popover .note-popover-option{text-align:left;min-height:var(--target-primary);padding:var(--space-2);background:0 0;border-color:#0000}.panel .note-popover .note-popover-option:hover{background:var(--color-bg-muted)}.projects-toggle,#other-projects{margin-top:var(--space-2)}.zoom-controls{gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.zoom-controls button{min-height:var(--target-secondary);padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}.zoom-controls button[aria-pressed=true]{background:var(--color-accent-fill);border-color:var(--color-accent)}.diagram-frame.zoomed{max-height:70vh;overflow:auto}.diagram-frame.zoomed svg{width:var(--preview-width);max-width:none}.preview-stage{position:relative}.preview-map{top:var(--space-2);right:var(--space-2);border:var(--hairline) solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;background:#fff;width:min(240px,40%);position:absolute;overflow:hidden;box-shadow:0 2px 8px #00000026}.preview-map svg{pointer-events:none;width:100%;height:auto;display:block}.preview-map-view{border:2px solid var(--color-accent);box-sizing:border-box;pointer-events:none;background:#2563eb1f;position:absolute}.diagram-frame.zoomed:focus-visible{outline:var(--focus-width) solid var(--color-accent)}@media (width>=1024px){.pane-edit .code-panel{z-index:5;position:sticky;top:0;box-shadow:0 6px 12px -8px #00000040}}.item-card-head .item-delete{margin-left:var(--space-5)}.option-row .option-remove{margin-left:var(--space-4)}.item-list li:has(.note-number) .item-delete{margin-left:var(--space-3)}.panel .font-choice-option input{width:var(--tap-min)}.appbar-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.appbar-actions button{min-height:var(--target-secondary);padding:var(--space-1) var(--space-3);font-size:var(--text-sm)}.projects-panel{margin-bottom:var(--space-5)}.consent-category input[type=checkbox]{width:20px;height:20px;margin:0}.diagram-frame .item-hit{cursor:pointer}.diagram-frame .item-hit:hover rect{fill:#2563eb14}