:root{--ink:#00516b;--pink:#dfa1a2;--purple:#bda0dd;--green:#c3dfa2;--guide:#e4f8ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;background:#fff}button,input{font:inherit}a{text-decoration:none;color:inherit}.hero{height:657px;position:relative;overflow:hidden;background:linear-gradient(90deg,#dfa1a2,#ba8484)}.hero-pig{width:100%;max-width:1440px;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.topbar{position:absolute;top:39px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;color:#fff}.brand{font-size:20px;font-weight:700}.header-icons{display:flex;gap:36px}.header-icons button{border:0;padding:0;background:none}.header-icons img{height:42px;width:42px;display:block}h1{position:absolute;top:118px;width:100%;margin:0;text-align:center;color:white;font-size:62px;line-height:1.25;letter-spacing:2px}.scroll{position:absolute;right:30px;bottom:19px;display:flex;align-items:center;flex-direction:column;color:white}.scroll span{writing-mode:vertical-rl;font-size:18px;font-weight:700;letter-spacing:3px;margin-bottom:16px}.scroll img{width:40px;height:40px}.finance-panel{width:1000px;margin:-53px auto 48px;position:relative;background:white;box-shadow:0 0 12px #00000014;padding:0 60px}.finance-section{padding-top:115px;padding-bottom:80px}.finance-section h2{font-size:32px;line-height:1.3;color:var(--ink);margin:0 0 48px;font-weight:700}.section-body{display:grid;grid-template-columns:250px 1fr;gap:45px}.inputs{margin:0}.field{display:block;margin-bottom:24px;color:#b2b2b2;font-size:16px}.field span{display:block;margin-bottom:15px}.field input{display:block;width:100%;border:0;border-bottom:1px solid #b5b5b5;padding:6px 8px 5px;height:30px;background:white;color:#161616;outline:none;border-radius:0}.inputs button{display:block;width:100%;border:1px solid white;background:#1c60a9;color:#fff;font-size:16px;font-weight:700;border-radius:5px;height:45px;margin-top:24px}.guide .inputs button{background:#02516b}.sample-output{width:100%;display:flex;justify-content:center;align-items:flex-start}.balance-chart{display:flex;width:300px;height:330px}.chart-column{width:50%}.chart-block{position:relative}.chart-block span{display:block;color:white;font-size:11px;line-height:1.3;padding:5px 7px}.profit-chart{display:flex;width:300px;height:247px}.loss-line{height:2%;background:#dda2df}.sample .pl{min-height:700px}.sample .cf{padding-bottom:100px}.cash-chart{width:300px;height:310px;position:relative;margin-top:-42px}.gridline{position:absolute;left:3px;right:3px;height:1px;background:#bfd5df}.g1{top:0}.g2{top:90px}.g3{top:180px}.g4{top:270px}.cash-bar{width:59px;position:absolute;color:white;text-align:center;font-size:11px}.cash-bar span{position:absolute;left:0;right:0;top:5px}.operating{left:10px;top:0;height:180px;background:var(--pink)}.investing{left:83px;top:180px;height:87px;background:var(--purple)}.financing{left:157px;top:180px;height:79px;background:var(--purple)}.investing span,.financing span{top:auto;bottom:6px}.total{left:230px;top:166px;height:14px;background:var(--green)}.total span{top:1px}.cash-labels{position:absolute;top:282px;left:0;right:0;display:flex;color:#777;font-size:12px;text-align:center}.cash-labels span{width:25%}.guide-output{background:var(--guide);color:var(--ink);padding:40px;width:590px;height:490px;font-size:16px;font-weight:700;line-height:1.55}.guide-output p{margin:0}.step-arrow{display:block;margin:14px 0 0}.guide-chart{width:335px;height:230px;object-fit:contain;display:block;margin:38px auto 0}.guide .pl{padding-top:135px}.guide .cf{padding-top:135px}.back-top{height:300px;display:flex;align-items:center;justify-content:center;background:#f2f6f7;color:var(--ink);font-size:16px;font-weight:700}footer{height:477px;position:relative;background:url('assets/pig-footer.jpg') center bottom/cover}footer span{position:absolute;bottom:50px;left:0;right:0;text-align:center;color:white;font-size:22px;font-weight:700}
@media(max-width:1000px) and (min-width:701px){.finance-panel{width:94%;padding:0 40px}.section-body{grid-template-columns:250px 1fr;gap:30px}.guide-output{width:100%;height:auto;min-height:490px;padding:25px}.guide-chart{width:100%}.hero{height:560px}}
@media(max-width:700px){.hero{height:660px;background:url('assets/pig-hero.jpg') 50.5% top/cover}.hero-pig{display:none}.topbar{top:20px;left:15px;right:15px}.brand{font-size:11px}.header-icons{gap:13px}.header-icons img{height:22px;width:22px}h1{top:108px;font-size:29px;line-height:1.25;letter-spacing:1px}.scroll{right:10px;bottom:20px}.scroll span{font-size:10px;margin-bottom:12px}.scroll img{width:20px;height:20px}.finance-panel{width:100%;margin:0 auto 32px;padding:0;box-shadow:0 3px 8px #0000000c}.finance-section{padding:74px 0 50px}.finance-section h2{text-align:center;font-size:17px;line-height:1.4;margin:0 0 50px;white-space:nowrap}.section-body{display:flex;flex-direction:column-reverse;align-items:center;gap:0}.inputs{width:85%;margin-top:100px}.field{font-size:12px;margin-bottom:24px}.field span{margin-bottom:13px}.field input{font-size:14px;height:28px;padding:4px 5px}.inputs button{font-size:14px;height:35px;border-radius:3px;margin-top:20px}.sample-output{width:100%}.balance-chart{width:214px;height:234px}.chart-block span{font-size:8px;padding:4px}.profit-chart{width:214px;height:175px}.sample .pl{min-height:0;padding-top:50px}.sample .pl .inputs{margin-top:74px}.sample .cf{padding-top:50px;padding-bottom:50px}.sample .cf h2{margin-bottom:130px}.cash-chart{width:214px;height:220px;margin-top:0;transform:scale(.714);transform-origin:top left;margin-left:86px;margin-bottom:0}.sample .cf .inputs{margin-top:68px}.back-top{height:214px;font-size:12px}footer{height:340px}footer span{bottom:30px;font-size:11px}.guide-output{width:280px;height:435px;padding:35px 18px;font-size:13px;line-height:1.6}.step-arrow{margin-top:12px}.guide-chart{width:220px;height:150px;margin-top:32px}.guide .finance-section h2{margin-bottom:48px}.guide .inputs{margin-top:110px}.guide .pl,.guide .cf{padding-top:50px}.guide .pl .inputs,.guide .cf .inputs{margin-top:100px}.guide .cf{padding-bottom:50px}}
/* Reference mobile hero overlaps the white content panel by 73px. */
@media(max-width:700px){.hero{height:733px}.finance-panel{margin-top:-73px}.scroll{bottom:89px}}
/* Interactive implementation: same palette and page structure as the design. */
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.app .section-body{position:relative}.app .inputs button{cursor:pointer;min-height:44px}.app .inputs button:hover{background:#1c60a9}.field input:focus-visible{border-bottom:2px solid var(--ink)}button:focus-visible,a:focus-visible{outline:3px solid #1c60a9;outline-offset:4px}.field input[aria-invalid=true]{border-bottom:2px solid #b53240}.form-error{font-size:13px;line-height:1.6;color:#a22130;white-space:pre-line;margin:12px 0 0}.form-error:empty{display:none}.live-output{width:590px;min-height:490px;display:flex;justify-content:center;align-items:flex-start;color:var(--ink)}.chart-result{width:340px;max-width:100%}.live-chart{display:block;width:100%;height:auto;font-family:Arial,'Hiragino Kaku Gothic ProN',sans-serif}.chart-values{margin:16px 0 0;font-size:12px;color:var(--ink)}.chart-values>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 0}.chart-values dt{display:flex;align-items:center;gap:6px;line-height:1.6}.chart-values dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}.chart-values i{display:inline-block;width:10px;height:10px;flex-shrink:0}.header-icons button{cursor:pointer}.site-menu{position:absolute;z-index:5;right:35px;top:100px;display:flex;flex-direction:column;gap:24px;background:#00516bf2;color:#fff;padding:28px 36px}.site-menu a{font-weight:bold}.no-script{padding:20px;color:var(--ink);text-align:center}dialog{border:0;border-radius:8px;padding:28px;color:var(--ink);width:min(450px,90vw)}dialog::backdrop{background:#0006}dialog h2{font-size:22px}dialog label{display:block}dialog input{display:block;width:100%;margin:12px 0;padding:10px;border:1px solid #aaa}dialog button{background:var(--ink);color:white;border:0;padding:10px 18px;margin:8px 0;border-radius:4px;cursor:pointer}
@media(min-width:701px) and (max-width:1100px){.app .finance-panel{width:94%;padding:0 40px}.app .section-body{display:flex;flex-direction:column-reverse;align-items:center;gap:0}.app .inputs{width:85%;max-width:500px;margin-top:70px}.app .guide-output{width:590px;max-width:100%;height:auto;min-height:490px}.app .live-output{width:590px;max-width:100%}.app h2{text-align:center;font-size:28px}.app .hero{height:560px}}
@media(max-width:700px){.app .live-output{width:85%;max-width:340px;min-height:0}.app .chart-result{width:280px}.app .guide-output{width:min(280px,85vw);height:auto;min-height:435px}.app .guide-chart{max-width:100%}.app .chart-values{font-size:12px}.app .finance-section h2{white-space:normal;padding:0 12px}.app .site-menu{right:15px;top:58px;padding:24px}.app .field{font-size:13px}.app .field input{font-size:16px;height:34px}.app .inputs{margin-top:100px}.app .finance-section{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep the scroll cue above the overlapping panel at tablet/narrow desktop widths. */
@media(min-width:701px) and (max-width:1200px){.scroll{bottom:77px}}