:root{color-scheme:light;--ink:#173b36;--muted:#58706a;--line:#d6e4e0;--soft:#f4f8f6;--red:#e30613}*{box-sizing:border-box}body{margin:0;background:#eef4f2;color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}header,main{width:min(1080px,calc(100% - 32px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}.brand{font-size:20px;font-weight:900}.brand span{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:9px;background:var(--ink);color:#fff}.close{color:var(--ink);font-weight:700;text-decoration:none}main{padding-bottom:32px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em}.hero h1{margin:5px 0 8px;font-size:clamp(24px,3vw,34px);line-height:1.15}.hero p,.step p{margin:0;color:var(--muted)}.portal-link,.actions a{display:inline-flex;white-space:nowrap;padding:10px 14px;border-radius:9px;background:var(--ink);color:#fff;font-weight:750;text-decoration:none}.notice{padding:12px 16px;border:1px solid #ecd48a;border-radius:10px;background:#fff4cf;color:#624e16}.steps{display:grid;gap:16px}.step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}.number{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;font-size:17px;font-weight:850}.step h2{margin:0 0 5px;font-size:20px}.step p{margin-bottom:14px}.visual{overflow:hidden;border:1px solid #c8d8d4;border-radius:11px;background:#fafcfc}.browserbar{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:#edf2f1}.dot{width:6px;height:6px;border-radius:50%;background:#b7c7c3}.address{width:48%;height:9px;margin-left:6px;border-radius:8px;background:#d7e2df}.screen{display:grid;grid-template-columns:180px minmax(0,1fr)}.sidebar{padding:16px;background:#202828;color:#fff}.otto{margin-bottom:16px;font-size:24px;font-weight:950;font-style:italic}.nav{display:grid;gap:5px}.nav>span{padding:6px 9px;font-size:13px;color:#cbd7d4}.nav-parent{font-weight:800;background:#fff;color:#202828!important;border-radius:6px}.nav-children{display:grid;gap:4px;margin:3px 0 0 16px}.nav-children span{padding:5px 7px;font-size:10px;color:#cbd7d4;border-radius:5px}.nav-children .active{background:#fff;color:#202828;font-weight:800}.content{padding:18px;min-width:0}.crumb{font-size:10px;font-weight:750;color:#70827e}.content h3{margin:6px 0 16px}.invoice-preview{display:flex;align-items:center;gap:12px;padding:12px 10px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px}.invoice-preview>span:first-child{margin-right:auto}.download-link{font-weight:750;color:#667b76;white-space:nowrap}.download-link.selected{padding:7px 9px;border-radius:6px;background:var(--red);color:#fff;box-shadow:0 0 0 3px #f8bf29}.download-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.download-process{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.download-process h3{margin:0 0 10px;font-size:17px}.download-process ol{padding-left:19px;margin:0 0 15px;min-height:108px;color:var(--muted)}.download-process li{margin:7px 0}.download-purpose{display:block;margin-top:10px;color:var(--muted)}.upload-box{padding:16px;border:2px dashed #a9c1bb;border-radius:10px;background:var(--soft)}.upload-box small{display:block;margin-top:6px;color:var(--muted)}.actions{margin-top:16px}.footer-note{font-size:12px;color:var(--muted)}@media(max-width:700px){.hero{align-items:flex-start;flex-direction:column}.download-columns{grid-template-columns:1fr}.step{grid-template-columns:1fr;padding:18px}.screen{grid-template-columns:145px minmax(0,1fr)}.sidebar{padding:12px}.content{padding:12px}.invoice-preview{gap:7px;flex-wrap:wrap}.download-process ol{min-height:0}.close{font-size:12px}}

.hero{margin-bottom:16px}.step>div{min-width:0}.step .step-note{font-size:12px;line-height:1.5;margin:14px 0 0}.format-details{margin-top:16px}.format-details summary{cursor:pointer;font-weight:700;margin-bottom:12px}.guide-button,.close{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 13px;border:1px solid #b8cbc7;border-radius:9px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;line-height:1.3}.guide-button:hover,.close:hover{background:var(--soft)}a:focus-visible,summary:focus-visible{outline:2px solid #23815f;outline-offset:3px}.portal-link,.actions a{min-height:38px;font-size:13px;line-height:1.3}.download-process{display:flex;flex-direction:column}.download-process .visual{margin-top:auto}.download-process ol{min-height:0}.download-process p{overflow-wrap:anywhere}.format-details .download-columns{margin-top:12px}@media(max-width:700px){header{align-items:flex-start}.close{max-width:180px;white-space:normal}.step h2{font-size:18px}.hero h1{font-size:26px}}

.guide-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.guide-source{padding:15px 17px;border:1px solid #b7d8c4;border-left:4px solid #278358;border-radius:10px;background:#edf8f0;margin:14px 0}.guide-source.manual{border-color:#e1cb8e;border-left-color:#c19b32;background:#fff8e4}.guide-source p{margin:5px 0 0;font-size:13px;line-height:1.55}.guide-source-grid .guide-source{margin:0}.portal-menu-proof{margin:0;display:flex;align-items:center;gap:16px;background:#fff;padding:14px;border:1px solid var(--line);border-radius:11px}.portal-menu-proof img{width:150px;height:auto;max-width:48%;border:1px solid var(--line);border-radius:6px}.portal-menu-proof figcaption{font-size:13px;line-height:1.55;color:var(--muted)}@media(max-width:700px){.guide-source-grid{grid-template-columns:1fr}.portal-menu-proof{gap:10px}}
