*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:22px}body{margin:0;background:#f5f6f8;color:#233049;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:14px;line-height:1.7}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a{color:inherit}button,summary{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid #2e9982;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:20px;top:-100px;background:#fff;padding:12px;z-index:10}.skip:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:216px;background:#17253a;color:#e7edf3;padding:32px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;padding:0 8px;font-weight:700;font-size:23px;letter-spacing:2px}.brand-mark{display:grid;place-items:center;background:#c3edcb;color:#183c35;border-radius:10px;width:40px;height:43px;font-size:28px;box-shadow:inset -6px -6px 0 #a7d9b5}.brand small{display:block;font-size:9px;letter-spacing:2.5px;line-height:1.3;color:#a1b3c8}.side-label{font-size:10px;letter-spacing:2px;color:#8498b0;margin:48px 12px 16px}.nav-item{display:flex;align-items:center;gap:12px;text-decoration:none;padding:13px 12px;border-radius:7px;margin-bottom:8px;font-size:12px;color:#adbdcf}.nav-item span{font-size:10px;letter-spacing:1px;color:#7f97af}.nav-item.active{background:#29394c;color:#f3f8fc}.nav-item.active span{color:#b8e7cb}.nav-item:hover{background:#233348}.side-bottom{margin-top:auto;padding:22px 10px 0;border-top:1px solid #344357;font-size:11px;color:#c2d3d0}.side-bottom p{color:#91a4bc;font-size:11px}.secure-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b4e6bd;margin-right:5px}.version{color:#7c90ab;font-size:10px;letter-spacing:1px}main{margin-left:216px;max-width:1600px;padding:0 44px 24px}.topbar{height:77px;border-bottom:1px solid #e0e4e8;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#65728a}.topbar a{text-decoration:none;color:#455269}.breadcrumb span{margin:0 14px;color:#a3adbb}.intro{padding:33px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:22px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:#628879;margin:0 0 9px}h1{font-size:29px;letter-spacing:.02em;line-height:1.5;margin:0 0 9px;font-weight:750}.lead{color:#6c778a;font-size:12px;margin:0}.mobile-break{display:none}.button{border:0;border-radius:7px;min-height:42px;padding:10px 19px;font-size:12px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;transition:background .15s,box-shadow .15s}.button.primary{background:#255e50;color:#fff;min-width:165px}.button.primary:hover:not(:disabled){background:#194a3e;box-shadow:0 3px 10px #203e3525}.button.secondary{background:#fff;border:1px solid #d8dfe4;color:#3c4b60}.button.secondary:hover{background:#f2f7f3}.panel{background:#fff;border:1px solid #e0e5e9;border-radius:12px;padding:24px;margin-bottom:22px;box-shadow:0 3px 4px #172a3b02}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.section-heading>div{display:flex;align-items:center;gap:11px}h2{font-size:16px;margin:0;letter-spacing:.02em}.step{font-size:10px;font-weight:700;background:#eef3ef;color:#4c705b;padding:3px 7px;border-radius:5px}.muted{color:#7c8797}.small{font-size:10px}.file-grid,.mapping-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.file-card{border:1px solid #dfe5e9;border-radius:9px;padding:15px;background:#fff;min-width:0}.file-title{display:flex;align-items:center;gap:8px;margin-bottom:13px}.file-title h3{font-size:13px;margin:0}.file-icon{background:#e8f3ed;color:#3b7761;font-size:17px;width:29px;height:29px;text-align:center;border-radius:6px}.file-icon.shipment{background:#edf1f8;color:#54779d}.pill{font-size:9px;color:#8a94a1;margin-left:auto}.dropzone{display:flex;flex-direction:column;position:relative;align-items:center;justify-content:center;gap:3px;text-align:center;background:#f8faf9;border:1px dashed #cbd8d2;border-radius:6px;min-height:136px;padding:14px;cursor:pointer}.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.dropzone:focus-within{outline:3px solid #2e9982;outline-offset:2px}.dropzone:hover,.file-card.dragging .dropzone{border-color:#2b816b;background:#eef8f1}.upload-icon{font-size:21px;color:#7d9487;line-height:1.2;margin-bottom:5px}.dropzone strong{font-size:12px;font-weight:500;max-width:100%;overflow-wrap:anywhere}.file-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;color:#809082;font-size:10px}.file-footer select{max-width:160px;min-height:30px;font-size:10px;padding:3px 24px 3px 8px}select{border:1px solid #dce2e6;border-radius:5px;padding:8px 26px 8px 10px;background:#fff;color:#35465b;min-height:38px;max-width:100%}.file-hint{font-size:10px;color:#809089;margin:13px 0 0}.section-description{font-size:11px;color:#748091;margin:-7px 0 18px}.mapping-grid fieldset{border:0;padding:0;min-width:0;margin:0}.mapping-grid legend{font-size:11px;font-weight:650;margin-bottom:10px;color:#59677b}.mapping{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mapping label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#758195;min-width:0}.mapping label select{font-size:11px;min-width:0}.empty-hint{font-size:12px;padding:14px;color:#809082;margin:0}.mapping .empty-hint{grid-column:1/-1;padding:14px 0}.advanced{border-top:1px solid #edf0f2;margin-top:20px;padding-top:13px}.advanced summary{font-size:11px;color:#56677b}.advanced summary>span{color:#8995a4;font-size:10px;margin-left:12px}.advanced>label{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:11px}.advanced input{accent-color:#255e50;margin-top:5px;width:15px;height:15px}.advanced small{display:block;color:#7b8796;font-size:10px}.run-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:20px;padding-top:18px;border-top:1px solid #edf0f2}.text-button{border:0;background:none;padding:5px 0;color:#497064;font-size:11px;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:#163d31}.results-heading{display:flex;justify-content:space-between;align-items:center;margin:29px 0 17px}.results-heading .eyebrow{font-size:9px;margin:0 0 5px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:19px}.stats>div{background:#fff;border:1px solid #e0e5e9;padding:16px 20px;border-radius:9px}.stats span{font-size:11px;color:#7c8796;display:block}.stats strong{display:block;font-size:32px;line-height:1.5;font-weight:550;letter-spacing:-1px;font-variant-numeric:tabular-nums}.stats small{font-size:9px;color:#86939f}.stats .attention{background:#fff9ef;border-color:#f0e5cd}.stats .attention strong{color:#b07026}.results-panel{padding:0;overflow:hidden}.result-empty{text-align:center;padding:38px 20px 42px}.result-empty>span{display:block;margin:0 auto 13px;width:40px;height:40px;line-height:36px;background:#f0f3f3;border-radius:10px;color:#9caea3;font-size:25px}.result-empty h3{font-size:13px;font-weight:500;margin:0 0 8px}.result-empty p{font-size:11px;color:#8b96a3;margin:0}.result-toolbar{display:flex;gap:10px;align-items:center;padding:18px}.result-toolbar select{font-size:11px}.result-toolbar input{width:100%;min-width:100px;border:1px solid #dce2e6;border-radius:6px;padding:9px 11px;font-size:11px;min-height:39px}.search{flex:1;max-width:290px}.small-button{font-size:10px;padding:8px 12px;min-height:38px;margin-left:auto}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:11px;white-space:nowrap}th{padding:11px 16px;background:#f7f9f9;color:#849083;font-size:10px;font-weight:500;border-bottom:1px solid #e9eeee}td{padding:13px 16px;border-bottom:1px solid #eff2f4;font-variant-numeric:tabular-nums}td:nth-child(2),td:nth-child(3){max-width:230px;overflow:hidden;text-overflow:ellipsis}.number{text-align:right}.badge{font-size:10px;padding:4px 7px;border-radius:4px;background:#f0f2f4;color:#59677b}.badge.match{background:#edf6ee;color:#4d7c59}.badge.pending{background:#fff4df;color:#a07529}.badge.danger{background:#fbeceb;color:#ad605b}.source-lines{max-width:120px;white-space:normal;color:#8b96a2;font-size:10px}.pagination{display:flex;justify-content:space-between;padding:12px 18px;font-size:10px;color:#8490a1}.pagination>div{display:flex;gap:20px}.result-note{background:#f8faf9;padding:12px 18px;font-size:9px;color:#78897c;display:flex;justify-content:space-between;gap:16px;align-items:center}.result-note .text-button{font-size:10px;white-space:nowrap}.notice{background:#edf6ee;border:1px solid #cddfd1;padding:12px 16px;border-radius:7px;margin-bottom:18px;font-size:12px;color:#42634d}.issues{background:#fff6f2;border:1px solid #efcfc1;margin-top:20px;padding:16px;border-radius:7px}.issues h3{font-size:13px;margin:0 0 8px;color:#974f36}.issues p,.issues li{font-size:11px;color:#8e624c}.issues ul{padding-left:20px;margin-bottom:0;max-height:240px;overflow:auto}.file-error{font-size:11px;color:#a65140;background:#fff5ef;padding:10px;margin:12px 0 0;overflow-wrap:anywhere}.preview{margin-top:10px;overflow:auto;max-height:124px;border-top:1px solid #e7ece9}.preview th,.preview td{font-size:9px;padding:6px 8px}.preview td{max-width:140px;overflow:hidden;text-overflow:ellipsis}.guide{margin:28px 0;color:#697a85;border-top:1px solid #dee5e3;padding-top:19px;font-size:11px}.guide summary{font-size:12px}.guide>div{padding:8px 16px;max-width:920px}.guide h3{font-size:13px}.guide-actions{display:flex;gap:24px;flex-wrap:wrap}footer{display:flex;justify-content:space-between;align-items:center;margin-top:25px;padding-top:20px;border-top:1px solid #e1e5e8;font-size:10px;color:#536b60}footer .muted{margin-left:8px;font-size:9px}@media(min-width:1600px){main{margin-right:auto}}@media(max-width:1100px){main{padding:0 24px 20px}.sidebar{width:190px;padding:28px 12px}main{margin-left:190px}.small-button{font-size:9px}.result-toolbar{flex-wrap:wrap}.section-heading>.muted{max-width:170px;text-align:right}}@media(max-width:800px){.sidebar{position:static;width:auto;padding:16px 22px;flex-direction:row;align-items:center;justify-content:space-between}.brand{font-size:20px}.brand-mark{width:33px;height:35px;font-size:23px}.side-label,.sidebar nav,.side-bottom p,.side-bottom .version{display:none}.side-bottom{margin:0;padding:0;border:0;font-size:10px}main{margin-left:0;padding:0 20px 20px}.topbar{height:57px}.intro{padding:25px 0;align-items:flex-start}.intro h1{font-size:25px}.intro>.button{margin-top:26px;padding:9px 12px;font-size:10px}.panel{padding:19px}.results-panel{padding:0}.file-grid,.mapping-grid{gap:14px}.stats{gap:10px}.stats>div{padding:14px}.result-toolbar{padding:13px}.result-toolbar .search{max-width:none}.table-scroll td,.table-scroll th{padding:11px 13px}}@media(max-width:560px){main{padding:0 14px 16px}.sidebar{padding:13px 14px}.side-bottom{font-size:9px}.intro{flex-direction:column;gap:14px}.intro>.button{margin-top:0}.lead{font-size:11px}.intro h1{font-size:26px}.file-grid,.mapping-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start}.section-heading>.muted{font-size:9px;max-width:130px}.section-heading h2{font-size:14px}.panel{padding:16px}.results-panel{padding:0}.file-card{padding:12px}.dropzone{min-height:111px}.mapping-grid{gap:20px}.stats{gap:8px}.stats>div{padding:11px}.stats strong{font-size:26px}.stats span{font-size:10px}.stats small{font-size:8px;display:block;line-height:1.5}.run-bar{align-items:flex-start;flex-direction:column}.run-bar .button{width:100%}.result-time{max-width:130px}.result-toolbar .search{flex-basis:100%}.result-toolbar select{font-size:10px}.small-button{margin-left:auto}.result-note{flex-direction:column;align-items:flex-start;gap:5px}.results-heading .small{max-width:140px;text-align:right}.guide-actions{gap:10px 20px}footer{gap:10px;flex-wrap:wrap}footer .muted{display:none}.advanced summary>span{font-size:9px;margin-left:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(max-width:560px){.mobile-break{display:initial}}
.profiles{background:#f7faf8;border:1px solid #e1e9e3;border-radius:8px;padding:13px 15px;margin:0 0 22px;font-size:12px}.profiles summary{color:#435f51}.profiles summary span{font-size:10px;color:#677b70;margin-left:12px}.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:17px 0}.profile-grid>label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:11px}.profile-grid input{min-height:40px;border:1px solid #dce2e6;border-radius:5px;padding:8px 10px;min-width:0;width:100%;background:#fff}.profile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}.profiles .section-description{margin:12px 0 0;font-size:11px}.profile-import{position:relative;cursor:pointer;color:#497064;font-size:11px;text-decoration:underline;text-underline-offset:4px;overflow:hidden}.profile-import input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.profile-import:focus-within{outline:3px solid #2e9982}.profiles #profile-message{font-size:12px;margin-bottom:0;color:#7a5423}.preflight{font-size:11px;background:#f7faf8;padding:12px 15px;border-radius:6px;margin-top:18px;color:#586f62}.preflight p{margin:0}.preflight ul{padding-left:18px;margin:5px 0 0}.filtered-export{padding:0 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#6c7a71;font-size:11px}.detail-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}dialog{width:min(1000px,94vw);max-height:85vh;border:1px solid #dae3df;border-radius:12px;padding:24px;color:#233049;background:#fff;box-shadow:0 20px 80px #17253a30}dialog::backdrop{background:#14283b70}dialog h3{font-size:13px;margin:20px 0 8px}dialog .detail-summary{font-size:13px;color:#506e5c}dialog .table-scroll{max-height:250px;border:1px solid #e4e9e6;border-radius:6px}dialog td{white-space:pre-wrap;min-width:90px;max-width:250px;overflow-wrap:anywhere}dialog .detail-caption{font-size:11px;color:#6c7b72}.source-link{white-space:nowrap}@media(max-width:560px){.profile-grid{grid-template-columns:minmax(0,1fr)}.profile-grid>.button{justify-self:start}.profiles summary span{display:block;margin-left:14px}.filtered-export{align-items:flex-start;flex-direction:column;gap:3px}dialog{padding:16px}.detail-heading h2{font-size:14px}.detail-heading .button{padding:8px 12px;min-width:0}}
.filtered-export>span{min-width:0;overflow-wrap:anywhere}.filtered-export .button{flex-shrink:0;max-width:100%;white-space:normal}.quantity-note{margin:0 18px 12px;padding:10px 12px;background:#f7faf8;border-left:3px solid #789b88;color:#435f51;font-size:12px;line-height:1.7}.quantity-note strong{font-weight:600}
.sample-guide{padding:18px 22px;margin-bottom:24px;background:#fff;border:1px solid #dce6e1;border-radius:10px;font-size:12px;color:#425d50}.sample-guide summary{font-weight:600;cursor:pointer}.sample-guide summary span{font-weight:400;font-size:11px;margin-left:12px;color:#61766a}.sample-guide ol{padding-left:22px;line-height:1.9}.sample-guide p{font-size:11px}.sample-guide td{white-space:normal;max-width:none}.sample-guide th:first-child{min-width:80px}.sample-guide th:nth-child(2){min-width:80px}.sample-guide a{display:inline-block;margin-top:16px;color:#285f52}#support-preview{display:block;width:100%;height:42vh;resize:vertical;padding:14px;border:1px solid #cbd6d0;border-radius:6px;font:12px/1.7 monospace;color:#233049;background:#f7faf8;margin:16px 0}#troubleshooting li{margin:8px 0}@media(max-width:560px){.sample-guide{padding:16px}.sample-guide summary span{display:block;margin:5px 0 0}.sample-guide td:last-child{min-width:180px}#support-dialog .button{font-size:11px}}
.empty-shipments-confirm{display:flex;gap:10px;align-items:flex-start;padding:16px;margin-top:16px;background:#fff9ef;border:1px solid #ecd9b8;border-radius:8px;font-size:13px;color:#604c2b}.empty-shipments-confirm[hidden]{display:none}.empty-shipments-confirm input{margin-top:3px;flex:none}.empty-shipments-confirm small{display:block;line-height:1.7;margin-top:6px;font-size:11px}.preflight-title{font-weight:700;color:#8b472d}.preflight ul+p{margin-top:12px}
.scope-guide{margin:18px 0;padding:16px 18px;background:#f4f8f5;border:1px solid #d5e2d9;border-radius:8px;color:#345344;font-size:12px;line-height:1.8}.scope-guide h3{margin:0 0 6px;font-size:13px}.scope-guide p{margin:6px 0}.interpretation-note{margin:0;padding:16px 22px;border-bottom:1px solid #dce6e1;background:#f4f8f5;color:#345344;font-size:12px;line-height:1.8}
.edition-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:14px 18px;background:#eaf3ed;border:1px solid #cbded1;border-radius:7px;font-size:12px;color:#285c4e;margin-bottom:10px}
.edition-strip strong{font-size:13px}.edition-strip a{margin-left:auto;text-underline-offset:3px}
.plan-info{margin-bottom:22px;border:1px solid #dce4e0;border-radius:7px;background:#fff;padding:12px 18px;font-size:12px;color:#425b50;line-height:1.9}
.plan-info summary{cursor:pointer;font-weight:600}.plan-info p{margin:10px 0}.plan-info:target{outline:2px solid #759e8c;outline-offset:3px}
@media(max-width:600px){.edition-strip{align-items:flex-start;gap:7px 12px}.edition-strip strong{width:100%}.edition-strip a{margin-left:0}.plan-info{padding:12px 14px}}
body.web-workspace {
--ink: #192f36;
--line: #cfdad9;
--teal: #09675a;
color: var(--ink);
background: #f4f6f5;
font-size: 15px;
}
.web-workspace main {
max-width: 1140px;
width: calc(100% - 64px);
margin: 0 auto;
padding: 0;
}
.work-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 0 0; }
.work-title h1 { font-size: clamp(25px, 3vw, 38px); letter-spacing: .015em; line-height: 1.35; margin: 0 0 9px; }
.work-title p, .product-options > p { color: #475c60; margin: 0; font-size: 14px; }
.sample-action { color: white; background: var(--teal); font-size: 14px; border-radius: 5px; }
.sample-action:hover { background: #12554b; }
.local-note { font-size: 12px; color: #43635d; margin: 12px 0 22px; }
.web-workspace .panel { border-color: var(--line); box-shadow: none; border-radius: 7px; }
.web-workspace h2 { font-size: 20px; }
.web-workspace .section-heading { padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.web-workspace .step { border: 1px solid #bcd4ce; background: #edf5f2; color: #215d50; font-variant-numeric: tabular-nums; font-size: 12px; }
.web-workspace .small, .web-workspace .file-hint, .web-workspace .mapping label { color: #52646b; font-size: 12px; }
.web-workspace .file-card { padding: 0; border: 0; }
.web-workspace .file-title h3 { font-size: 16px; }
.web-workspace .file-icon { border-radius: 4px; }
.web-workspace .pill { font-size: 12px; color: #57696c; }
.web-workspace .dropzone { border-color: #95afa7; min-height: 124px; gap: 5px; background: #f2f8f5; }
.web-workspace #shipments-drop .dropzone { border-color: #9dacba; background: #f4f7fa; }
.web-workspace .file-card.dragging .dropzone, .web-workspace .dropzone:hover { outline: 2px solid var(--teal); outline-offset: -1px; }
.web-workspace .dropzone strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.web-workspace .upload-icon { color: #46645d; }
.web-workspace .file-footer, .web-workspace .file-footer select { font-size: 12px; color: #53646a; }
.web-workspace .section-description, .web-workspace .text-button { font-size: 13px; }
.web-workspace .section-description { color: #52646b; }
.web-workspace th, .web-workspace td { font-size: 12px; }
.web-workspace th { color: #4d6269; }
.web-workspace .eyebrow { display: none; }
.web-workspace .stats strong { font-weight: 650; }
.web-workspace #sample-guide:not([hidden]) ~ #results h2::after { content: "サンプル"; margin-left: 10px; font-size: 12px; color: #527265; }
.web-workspace #results:has(#result-content[hidden]) { display: none; }
.web-workspace #rules { margin-bottom: 12px; }
.web-workspace main:not(:has(.preview:not([hidden]))) #rules { display: none; }
.web-workspace .guide { margin: 12px 0; padding: 10px 0 0; }
.web-workspace .guide summary { font-size: 14px; }
.web-workspace .clear-row { text-align: right; }
.web-workspace main:not(:has(.preview:not([hidden]), .file-error:not([hidden]))) .clear-row { display: none; }
.product-options, .home-help { margin: 25px 0; padding: 20px 24px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.product-options > p { margin: 6px 0 14px; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 14px 0; }
.option-row h3 { margin: 0; font-size: 16px; }
.option-row h3 small { font-size: 13px; margin-left: 8px; }
.option-row p, .checksum, .home-help { font-size: 13px; }
.option-row p { margin: 4px 0 0; color: #546368; }
.option-row a, .home-help a { color: var(--teal); text-underline-offset: 3px; }
.option-row a { font-weight: 600; font-size: 13px; }
.checksum code { overflow-wrap: anywhere; }
.home-help details { padding: 10px 0; border-bottom: 1px solid var(--line); }
.home-help > a { display: inline-block; margin-top: 12px; }
@media (max-width: 680px) {
.web-workspace main { width: calc(100% - 28px); }
.work-title { padding-top: 20px; align-items: flex-start; flex-direction: column; gap: 10px; }
.work-title p { font-size: 13px; }
.local-note { margin: 10px 0 14px; }
.web-workspace .dropzone { min-height: 94px; }
.web-workspace h2 { font-size: 17px; }
.option-row { align-items: flex-start; flex-direction: column; gap: 8px; }
.product-options, .home-help { padding: 16px; }
}
:root {
--header-size: 62px;
--footer-size: 42px;
--header-space: calc(var(--header-size) + env(safe-area-inset-top, 0px));
--footer-space: calc(var(--footer-size) + env(safe-area-inset-bottom, 0px));
scroll-padding-block: calc(var(--header-space) + 8px) calc(var(--footer-space) + 8px);
}
body { padding-bottom: var(--footer-space); }
#top { display: block; height: 0; }
.site-bar, .site-foot {
z-index: 12;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic", Meiryo, sans-serif;
}
.site-bar {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top, 0px);
background: #163d39;
color: #fff;
}
.site-foot {
position: fixed;
inset: auto 0 0;
display: block;
margin: 0;
padding: 0 0 env(safe-area-inset-bottom, 0px);
border: 0;
box-shadow: 0 -1px 0 #cfdad9;
background: #fff;
color: #405b53;
}
.site-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
max-width: 1140px;
width: calc(100% - 64px);
margin: 0 auto;
min-height: var(--header-size);
}
.site-foot .site-bar-inner { min-height: var(--footer-size); }
.identity {
display: inline-flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
font-weight: 700;
font-size: 22px;
letter-spacing: .08em;
white-space: nowrap;
}
.site-bar-inner nav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.site-bar-inner nav a { color: inherit; text-decoration: none; padding: 6px 0; }
.site-bar-inner a:hover { text-decoration: underline; }
.site-foot small, .site-foot nav { font-size: 12px; }
.site-skip:focus { position: fixed; top: 4px; z-index: 20; }
.hosted-demo .sidebar { top: var(--header-space); bottom: var(--footer-space); }
@media (max-width: 680px) {
:root { --header-size: 48px; --footer-size: 36px; }
.site-bar-inner { width: calc(100% - 28px); gap: 8px; }
.site-bar-inner nav { gap: 12px; font-size: 12px; }
.wide-label { display: none; }
.identity { font-size: 18px; gap: 6px; }
.site-icon { width: 26px; height: 26px; }
}