/* Calm, rounded workspaces. All examples use fictional local data. */
.demo-page{background:#f5f8fb}.demo-wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.demo-header{background:#ffffffec;border-bottom:1px solid #e1e9f0}.demo-header>.demo-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.back-home{font-size:12px;color:#5a7288;display:flex;gap:15px;align-items:center}.back-home:hover{color:var(--blue)}.demo-intro{padding:55px 0 31px;display:flex;gap:30px;justify-content:space-between;align-items:center}.demo-intro h1{font-size:32px;line-height:1.6;letter-spacing:.04em}.demo-intro .section-label{margin-bottom:15px}.demo-intro p:not(.section-label){font-size:13px;color:var(--muted);line-height:2;margin-top:13px}.demo-note{border:1px solid #dce7f0;border-radius:18px;background:#edf4fa;padding:15px 20px;color:#5b748b;font-size:11px;line-height:1.9;flex-shrink:0}.demo-note b{font-size:10px;font-weight:500}.demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.demo-tabs button{background:#fff;border:1px solid #dae4ee;border-radius:18px;display:flex;gap:15px;text-align:left;padding:19px 20px;align-items:center;transition:background .15s,border-color .15s}.demo-tabs button[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 7px 20px #315e8820}.demo-tabs button>span{font-family:Georgia,serif;font-style:italic;font-size:25px;color:#9bafc0}.demo-tabs button[aria-selected=true]>span{color:#bdd6ea}.demo-tabs strong{font-size:13px;display:block;font-weight:600}.demo-tabs small{font-size:10px;display:block;color:#7a8fa2;margin-top:3px}.demo-tabs button[aria-selected=true] small{color:#d7e6f2}.workspace{background:white;border:1px solid #dbe5ee;border-radius:24px;box-shadow:0 16px 46px #26496908;overflow:hidden;scroll-margin-top:30px}.workspace:focus{outline-offset:4px}.workspace-top{display:flex;gap:25px;justify-content:space-between;align-items:center;padding:27px 30px;border-bottom:1px solid #e8edf3}.workspace-label{font-size:10px;letter-spacing:.05em;color:#8295a7}.workspace-top h2{font-size:22px;line-height:1.65;margin-top:5px;letter-spacing:.025em}.workspace-top p{font-size:11px;color:var(--muted);margin-top:5px}.workspace-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;align-items:center}.small-button{background:white;border:1px solid #cdddea;border-radius:9px;color:#3c6385;padding:9px 13px;font-size:11px;line-height:1.6;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;transition:background .15s}.small-button:hover{background:#edf4fa}.small-button:disabled{opacity:.65;cursor:default}.small-button.blue-button{background:var(--blue);color:white;border-color:var(--blue)}.blue-button:hover{background:var(--blue-dark)}.small-button.subtle{background:#f8fafc;border-color:#e4ebf1;color:#72899e;font-size:10px}.benefit-bar{background:#edf5fc;display:flex;gap:14px;padding:20px 30px;align-items:flex-start}.benefit-icon{border-radius:50%;background:white;width:31px;height:31px;display:flex;align-items:center;justify-content:center;color:#4f7d9f;font-size:15px;flex-shrink:0;margin-top:2px}.benefit-bar strong{font-size:13px;font-weight:600;line-height:1.8}.benefit-bar p{font-size:11px;color:#647e94;line-height:1.9;margin-top:3px}.before-after{display:flex;gap:20px;padding:15px 30px;border-bottom:1px solid #e7eef4;background:#fbfcfd;align-items:center}.before-after>div{flex:1}.before-after span{font-size:9px;color:#8192a1}.before-after p{font-size:10px;color:#60798f;line-height:1.9;margin-top:2px}.before-after>i{font-style:normal;color:#8ea8bb}.workspace-body{padding:24px 30px 30px}.example-guide{display:flex;gap:12px;align-items:center;margin-bottom:22px}.example-guide>span{font-size:10px;color:#536e85;white-space:nowrap;background:#f0f5f9;padding:3px 9px;border-radius:50px}.example-guide p{font-size:10px;color:#6c8194;line-height:1.8}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}.metric{border:1px solid #e1e8ef;background:#fcfdfe;border-radius:14px;padding:16px 18px;min-width:0}.metric>span{color:#76899a;font-size:10px;display:block}.metric>strong{display:block;font-size:28px;line-height:1.5;font-weight:550;letter-spacing:-.03em;color:#2f5777;margin-top:5px}.metric strong>span{font-size:11px;font-weight:500;letter-spacing:0;margin-left:5px;color:#658298}.metric small{display:block;font-size:9px;color:#8a9ba8;line-height:1.7;margin-top:4px}.metric.warm{background:#fffaf1;border-color:#eedfc5}.metric.warm>strong{color:#896837}.controls{display:flex;justify-content:space-between;align-items:flex-end;gap:17px;margin-bottom:25px;flex-wrap:wrap}.date-controls{display:flex;gap:15px;align-items:flex-end;flex-wrap:wrap}.date-controls label{display:flex;flex-direction:column;gap:6px;font-size:10px;color:#7b8c9c}.workspace select{font:inherit;font-size:11px;color:#46667f;background:white;border:1px solid #cedde8;border-radius:8px;padding:9px 28px 9px 10px;min-height:37px;max-width:100%}.segmented{background:#f0f4f8;border-radius:11px;padding:4px;display:inline-flex;gap:3px;max-width:100%;flex-wrap:wrap}.segmented button{padding:7px 12px;border-radius:8px;background:transparent;color:#71869a;font-size:10px;line-height:1.6;min-height:31px}.segmented button[aria-pressed=true]{background:white;color:#2f628e;box-shadow:0 2px 6px #2b4f7710;font-weight:600}.segmented button:hover{color:#2e638f}.control-note{font-size:9px;color:#8597a6;line-height:1.8}.output-heading{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:15px}.output-heading h3{font-size:14px;font-weight:600;line-height:1.8}.output-heading p{font-size:10px;color:#8295a5;margin-top:4px}.soft-badge{display:inline-flex;align-items:center;padding:4px 9px;font-size:9px;line-height:1.5;background:#eff3f7;color:#75889a;border-radius:50px;white-space:nowrap;width:max-content}.soft-badge.amber{color:#8c682f;background:#fff0d9}.soft-badge.green{color:#4b7d67;background:#eaf4ee}.soft-badge.blue{background:#eaf2fa;color:#4f7aa0}.order-total-list{display:flex;flex-direction:column;gap:10px}.total-item{display:grid;grid-template-columns:45px 1fr auto;gap:14px;border:1px solid #e0e8f0;border-radius:16px;padding:19px 22px;align-items:center}.product-symbol{width:42px;height:42px;border-radius:14px;background:#edf4fa;display:flex;justify-content:center;align-items:center;font-size:25px;color:#6288a7}.total-name h4,.customer-heading h4,.exception-card h4,.report-preview h4{font-size:13px;font-weight:600;line-height:1.7;margin:0}.total-name p{font-size:10px;color:#8094a5;margin-top:4px;line-height:1.8}.total-number{font-size:29px;line-height:1.5;font-weight:600;color:#2f5f86;letter-spacing:-.03em}.total-number small{font-size:11px;letter-spacing:0;margin-left:6px;font-weight:500}.allocation{grid-column:2/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:3px}.allocation button{display:flex;gap:9px;align-items:center;border:1px solid #e1e9f0;border-radius:7px;background:#fbfcfd;padding:5px 9px;font-size:9px;color:#6c8193}.allocation b{font-size:10px;color:#59768e;font-weight:550}.allocation i{font-style:normal;font-size:11px;color:#6d96b4}.allocation button:hover{background:#edf4fa;border-color:#b9cedf}.output-footnote{font-size:10px;color:#8696a5;line-height:1.9;margin-top:15px}.exception-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:27px}.exception-card{padding:21px;border:1px solid #e7dccb;border-radius:15px;background:#fffcf6;display:flex;flex-direction:column;align-items:flex-start}.exception-card.resolved{border-color:#d8e7df;background:#f9fcfa}.exception-top{display:flex;gap:12px;justify-content:space-between;align-items:center;align-self:stretch;margin-bottom:13px;flex-wrap:wrap}.source-link{color:#4c789a;font-size:10px;line-height:1.7;padding:4px 0;background:none;display:inline-flex;border-bottom:1px solid #d8e5ef;gap:7px}.source-link:hover{color:#214f77;border-color:#7da6c7}.exception-card p,.report-preview p{font-size:11px;line-height:1.9;color:#7b827e;margin-top:9px}.exception-card .small-button,.report-preview .small-button{margin-top:16px}.inline-select{margin-top:15px;font-size:10px;display:flex;gap:12px;align-items:center;color:#857960}.inline-select select{min-width:120px}.check-note{color:#5f8773;font-size:10px;line-height:1.8;display:inline-flex;gap:6px;margin-top:14px}.extra-scenario{margin-top:16px;border:1px solid #e2e9ef;border-radius:12px;overflow:hidden}.extra-scenario summary{list-style:none;cursor:pointer;font-size:11px;padding:14px 18px;color:#6c8295;display:flex;gap:15px;justify-content:space-between}.extra-scenario summary::-webkit-details-marker{display:none}.extra-scenario>div{padding:0 18px 18px}.extra-scenario p{font-size:11px;color:#7a8c9b;line-height:1.9;margin-bottom:12px}.customer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.customer-card{border:1px solid #dfe7ee;border-radius:15px;padding:20px}.customer-heading{display:flex;gap:15px;justify-content:space-between;align-items:center}.customer-date{font-size:9px;color:#8a9ba9;margin-block:8px 17px}.customer-line{font-size:11px;display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-top:1px solid #edf1f4;align-items:center}.customer-line strong{color:#52738e;font-weight:550;text-align:right}.customer-card.cancelled{background:#fafbfc;color:#93a0ab}.customer-card.cancelled strong{color:#93a0ab}.report-table-wrap{border:1px solid #e0e8ef;border-radius:13px;overflow:auto}.report-table{border-collapse:collapse;width:100%;font-size:11px;text-align:left;min-width:650px;line-height:1.7}.report-table thead{background:#f3f7fa;color:#8195a6;font-size:10px}.report-table th,.report-table td{padding:15px 17px;border-bottom:1px solid #e5ecf2;white-space:nowrap}.report-table tbody th{font-weight:550}.report-table tbody small{font-size:8px;color:#8c9ca9;display:block;margin-top:4px;min-height:12px}.report-table tr:last-child>*{border-bottom:0}.report-table tr.missing{background:#fffbf3}.report-table tr.duplicate{background:#f8fafc;color:#9aa7b2}.report-bottom{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:26px}.report-preview{padding:22px;border:1px solid #dde7f0;border-radius:15px;background:#f5f9fc}.report-preview h4{margin-top:8px}.report-preview p{color:#71889b}.draft-preview{border-radius:8px;border:1px solid #e0e8ee;background:white;padding:12px 14px;margin-top:14px;display:flex;flex-direction:column;gap:3px;font-size:11px;color:#648098}.draft-preview span:last-child{font-size:10px;color:#8b9baa}.fictional-answer{margin-top:15px;padding:12px 14px;border-radius:9px;background:white;border:1px solid #ebe1d3;width:100%}.fictional-answer span{display:block;font-size:9px;color:#a0937c}.fictional-answer strong{display:block;font-size:11px;margin-top:4px;color:#83704e;font-weight:500}.task-list{display:flex;flex-direction:column;gap:13px}.task-card{display:grid;grid-template-columns:1fr auto;gap:25px;padding:23px;border:1px solid #dfe7ef;border-radius:15px}.task-title{display:flex;gap:12px;align-items:center;margin-bottom:9px}.task-customer{font-size:11px;color:#7c93a5}.task-main h3{font-size:14px;font-weight:600;line-height:1.8}.task-main p{font-size:11px;color:#7d91a2;margin-top:7px;line-height:1.9;max-width:560px}.task-main .source-link{margin-top:9px}.task-side{display:flex;flex-direction:column;align-items:flex-end;gap:11px;min-width:240px}.due{font-size:10px;color:#7790a4}.due.overdue{color:#9c7342}.task-side label{display:flex;gap:10px;align-items:center;font-size:10px;color:#8a9ca9}.task-side select{padding-block:5px;min-height:31px}.task-side .check-note{margin-top:0}.task-done{background:#fafcfb;border-color:#e0ebe4}.empty-result{padding:35px 20px;text-align:center;font-size:12px;color:#8a9dad;border:1px dashed #d7e3ed;border-radius:15px}.empty-result>span{font-size:29px;color:#6b9780;display:block;margin-bottom:9px}.empty-result h3{font-size:14px;font-weight:500}.empty-result p{font-size:11px;margin-top:8px;line-height:1.9}.demo-feedback{padding:12px 4px;font-size:11px;color:#68849b;min-height:46px}.demo-after{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:51px 0 65px}.demo-after h2{font-size:24px;line-height:1.8}.demo-after p{font-size:13px;line-height:2;color:#6e8294}.demo-after p.demo-small{font-size:10px;color:#8c9aaa;margin-top:13px}.demo-after .button{font-size:12px;margin-top:21px;padding:15px 24px}.demo-footer{border-top:1px solid #dce5ed;padding-block:22px 28px;display:flex;gap:25px;justify-content:space-between;font-size:10px;color:#8ca0b1}.demo-footer a:hover{text-decoration:underline}.source-dialog{width:min(680px,calc(100% - 36px));padding:29px}.source-dialog .section-label{font-size:10px;margin-bottom:10px}.source-dialog .dialog-heading{align-items:flex-start}.source-dialog .dialog-heading h2{font-size:18px}.source-dialog .source-meta{font-size:10px;line-height:1.9;margin-bottom:14px}.source-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:12px;line-height:2;background:#f7fafc;border:1px solid #e1e9f1;border-radius:12px;padding:21px;color:#4c6479;margin:0}.source-record{margin-top:15px;padding:17px 19px;border-radius:12px;border:1px solid #dce8f1;background:#f1f7fc;font-size:11px}.source-record strong{font-size:12px;font-weight:600}.source-record p{font-size:11px;margin-top:8px}.source-record pre{background:white;font-size:11px;padding:15px;margin-block:12px}.source-record li{font-size:11px;color:#72899c;line-height:1.9;margin-block:6px}.source-dialog #copy-draft{margin-top:14px}.source-dialog .source-retained{font-size:10px;color:#8da0ae;line-height:1.9;margin-top:17px}
@media(max-width:1050px){.demo-wrap{width:calc(100% - 52px)}.demo-tabs{gap:9px}.demo-tabs button{padding:17px 15px;gap:11px}.demo-tabs strong{font-size:12px}.demo-tabs small{font-size:9px}.workspace-top,.workspace-body{padding-inline:24px}.workspace-top{align-items:flex-start}.workspace-actions{flex-direction:column;align-items:flex-end}.benefit-bar,.before-after{padding-inline:24px}.metric{padding:13px}.metric>strong{font-size:25px}.controls{align-items:flex-start}.demo-after{gap:35px}.task-side{min-width:200px}}
@media(max-width:760px){.demo-wrap{width:calc(100% - 32px)}.demo-header>.demo-wrap{min-height:70px}.back-home{font-size:10px;gap:7px}.demo-intro{padding-top:33px;padding-bottom:24px;display:block}.demo-intro h1{font-size:25px;line-height:1.7}.demo-intro p:not(.section-label){font-size:12px;line-height:1.95}.demo-note{display:block;font-size:10px;padding:10px 14px;margin-top:17px;width:max-content;max-width:100%;border-radius:12px}.demo-note br{display:none}.demo-note b{font-size:9px;margin-left:9px}.demo-tabs{grid-template-columns:1fr;gap:7px;margin-bottom:15px}.demo-tabs button{padding:13px 16px;border-radius:12px;gap:14px}.demo-tabs button>span{font-size:22px}.demo-tabs strong{font-size:12px}.demo-tabs small{font-size:9px;margin-top:1px}.workspace{border-radius:17px}.workspace-top{padding:19px 18px;display:block}.workspace-label{font-size:9px}.workspace-top h2{font-size:20px}.workspace-top p{font-size:10px;margin-top:7px;line-height:1.9}.workspace-actions{flex-direction:row;justify-content:flex-start;gap:8px;margin-top:15px}.workspace-actions .small-button{font-size:9px;padding:8px 10px}.benefit-bar{padding:17px 18px;gap:11px}.benefit-icon{width:26px;height:26px;font-size:13px}.benefit-bar strong{font-size:12px;line-height:1.8}.benefit-bar p{font-size:10px;line-height:1.9}.before-after{padding:14px 18px;gap:9px;flex-direction:column;align-items:flex-start}.before-after>i{transform:rotate(90deg);margin-left:3px;line-height:1.1}.before-after span{font-size:8px}.before-after p{font-size:9px}.workspace-body{padding:20px 18px 24px}.example-guide{align-items:flex-start;gap:9px;margin-bottom:16px}.example-guide p{font-size:9px;line-height:2}.example-guide>span{font-size:8px;margin-top:2px}.metrics{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:21px}.metric{padding:12px}.metric>span{font-size:9px}.metric>strong{font-size:24px}.metric strong>span{font-size:10px}.metric small{font-size:8px}.controls{display:block;margin-bottom:21px}.date-controls{gap:10px}.date-controls label{font-size:9px}.workspace select{font-size:10px;padding:8px 23px 8px 9px}.segmented button{font-size:9px;padding:7px 9px}.view-controls{margin-top:15px;display:flex;width:max-content}.control-note{display:block;font-size:8px}.output-heading{align-items:flex-start;gap:12px}.output-heading h3{font-size:13px}.output-heading p{font-size:9px;line-height:1.8}.soft-badge{font-size:8px;padding:4px 7px}.output-heading>.soft-badge{margin-top:5px}.total-item{padding:16px 14px;grid-template-columns:31px 1fr auto;gap:9px}.product-symbol{width:31px;height:34px;border-radius:10px;font-size:21px}.total-name h4{font-size:12px}.total-name p{font-size:8px;max-width:150px}.total-number{font-size:25px;white-space:nowrap}.total-number small{font-size:10px;margin-left:4px}.allocation{grid-column:1/-1;gap:6px;margin-top:5px}.allocation button{font-size:8px;padding:5px 7px;gap:7px}.allocation b{font-size:9px}.output-footnote{font-size:9px;line-height:1.9}.exception-grid,.report-bottom{grid-template-columns:1fr;gap:12px;margin-top:21px}.exception-card{padding:18px}.exception-top{gap:8px;margin-bottom:11px}.exception-card h4,.report-preview h4{font-size:12px}.exception-card p,.report-preview p{font-size:11px;line-height:1.9}.source-link{font-size:9px}.inline-select{font-size:9px;gap:9px;flex-wrap:wrap}.small-button{font-size:10px;line-height:1.8;padding:9px 11px}.check-note{font-size:9px}.extra-scenario summary{font-size:10px;padding-inline:14px}.extra-scenario>div{padding-inline:14px}.extra-scenario p{font-size:10px}.customer-grid{grid-template-columns:1fr}.customer-card{padding:17px}.customer-heading h4{font-size:12px}.customer-date{font-size:9px;margin-bottom:12px}.customer-line{font-size:11px}.report-table{min-width:585px;font-size:10px}.report-table th,.report-table td{padding:12px}.report-table thead{font-size:9px}.report-table-wrap:before{content:'横にスクロールして、元の報告も確認できます →';display:block;padding:9px 12px;font-size:8px;color:#8a9eaf;background:#f8fafc;position:sticky;left:0;width:100%}.report-preview{padding:18px}.draft-preview{font-size:10px}.fictional-answer strong{font-size:10px}.task-card{grid-template-columns:1fr;gap:16px;padding:18px}.task-side{min-width:0;align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}.task-side .small-button{flex-basis:100%;margin-top:1px}.task-title{gap:9px}.task-customer{font-size:10px}.task-main h3{font-size:13px}.task-main p{font-size:11px;line-height:1.9}.task-main .source-link{font-size:9px}.due{font-size:9px}.task-side label{font-size:9px}.task-side select{padding-block:5px;font-size:10px}.task-filters{margin-bottom:7px}.task-filters button{font-size:8px;padding-inline:8px}.demo-feedback{font-size:10px;line-height:1.9;padding-block:13px}.demo-after{grid-template-columns:1fr;gap:23px;padding:35px 0 45px}.demo-after h2{font-size:23px}.demo-after p{font-size:12px}.demo-after p.demo-small{font-size:9px}.demo-after .button{font-size:11px;padding:15px 20px}.demo-footer{font-size:9px;flex-direction:column;gap:7px}.source-dialog{padding:23px;max-height:88vh}.source-dialog .dialog-heading h2{font-size:16px}.source-dialog pre{font-size:11px;padding:17px;line-height:2}.source-record{padding:15px}.source-record strong{font-size:11px}.source-record p,.source-record li{font-size:10px}.source-dialog .source-retained{font-size:9px}.demo-page .toast{z-index:100}}
@media(max-width:370px){.demo-wrap{width:calc(100% - 24px)}.brand-name{font-size:15px}.back-home{font-size:9px}.workspace-body,.workspace-top,.benefit-bar,.before-after{padding-inline:14px}.metric{padding:10px}.metric>strong{font-size:21px}.metric>span{font-size:8px}.metric small{font-size:7px}.total-name h4{font-size:11px}.total-number{font-size:22px}.demo-intro h1{font-size:23px}.demo-note b{display:block;margin-left:0}.task-filters{gap:1px;padding:3px}.task-filters button{font-size:8px;padding:7px}.output-heading{flex-wrap:wrap}.output-heading>.soft-badge{margin-top:0}.inline-select{display:block}.inline-select select{display:block;margin-top:7px}}
/* Give the explanations the same priority as the numbers. */
.workspace-top p,.benefit-bar p,.exception-card p,.report-preview p,.task-main p{font-size:12px;color:#62788b}.before-after p,.total-name p,.output-heading p{font-size:11px;color:#647d91}.metric>span,.metric small,.control-note,.workspace-label,.output-footnote,.source-dialog .source-meta{color:#6b8193}.metric>span{font-size:11px}.metric small{font-size:10px}.output-footnote{font-size:11px}.report-table{font-size:12px}.report-table tbody small{font-size:9px}.demo-tabs small{color:#6e8498}.demo-tabs button[aria-selected=true] small{color:#e0edf6}
@media(max-width:760px){.workspace-top p,.benefit-bar p,.exception-card p,.report-preview p,.task-main p{font-size:12px}.before-after p,.total-name p,.output-heading p{font-size:10px}.metric>span{font-size:10px}.metric small{font-size:9px}.output-footnote{font-size:10px}.report-table{font-size:11px}.report-table tbody small{font-size:9px}.total-name p{max-width:none}.demo-after p.demo-small{font-size:10px}}
@media(max-width:370px){.metric>span{font-size:9px}.metric small{font-size:8px}}