*{box-sizing:border-box}body{margin:0;color:#222b30;background:#fafaf7;font:16px/1.8 system-ui,-apple-system,sans-serif}a{color:inherit;text-underline-offset:4px}header,main,footer{max-width:1100px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #bcc2c4;gap:24px}header>a{font-weight:750;text-decoration:none;font-size:21px}nav{display:flex;gap:22px;flex-wrap:wrap}h1{font-size:clamp(28px,4vw,43px);line-height:1.4;letter-spacing:.02em;margin:20px 0}h2{font-size:24px;margin-top:36px}h3{font-size:19px}p{max-width:74ch}.intro{color:#4c5960;margin-bottom:30px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}form{padding:24px;background:white;border:1px solid #b7c4ca}label{display:block;margin-bottom:18px;font-weight:650}input,select,button{font:inherit;padding:10px 12px}input,select{display:block;width:100%;border:1px solid #6f8089;background:#fff;color:#20292f;margin-top:5px}button{cursor:pointer;background:#194b60;color:white;border:0;min-height:44px}button.secondary{background:transparent;color:inherit;border:1px solid #71818a;margin-left:8px}button:hover{filter:brightness(.9)}:focus-visible{outline:3px solid #c16b13;outline-offset:3px}output{display:block}#result{border-top:4px solid #194b60;padding:20px 0}#result strong{font-size:32px;display:block}.hint,small{color:#52616a}.error{color:#9b241e;font-weight:700}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;margin:22px 0}th,td{text-align:left;padding:12px;border-bottom:1px solid #c6cdcf}th{background:#e9eef0}article{max-width:800px}article li{margin:10px 0}footer{border-top:1px solid #bac3c6;margin-top:50px;font-size:14px;display:flex;gap:16px;flex-wrap:wrap}.frame{background:#f7f3ed;color:#413830;font-family:Georgia,'Yu Mincho',serif}.frame header{max-width:1200px}.frame main{max-width:1200px}.frame .workspace{grid-template-columns:1.15fr 1fr}.frame form{background:none;border:0;padding:0}.frame button{background:#6c4637}.frame #result{border-color:#6c4637}.frame .preview-space{background:#e6e0d6;min-height:420px;padding:42px;display:flex;align-items:center;justify-content:center}.frame #mat{position:relative;background:#fffefa;box-shadow:0 4px 12px #0002;outline:8px solid #685849;max-width:100%;width:330px}.frame #window{position:absolute;background:#b9b0a0;display:flex;align-items:center;justify-content:center;color:#403b33;font:14px system-ui;text-align:center}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.notice{border-left:3px solid #a16d3d;padding-left:16px}.scale main{background-image:linear-gradient(90deg,transparent 99%,#194b6007 99%);background-size:24px 24px}.scale .workspace{background:#fafaf7}.scale .rule{height:16px;background:repeating-linear-gradient(90deg,#194b60 0 1px,transparent 1px 20px);border-bottom:1px solid #194b60}.product{padding:18px 0;border-top:1px solid #bbc3c5}.product p{margin:8px 0} @media(max-width:700px){header{display:block}nav{gap:16px;margin-top:15px;font-size:14px}main,header,footer{padding:20px}.workspace,.frame .workspace{grid-template-columns:1fr;gap:24px}.frame .preview-space{min-height:320px;padding:32px}.frame h1{font-size:29px}.form-grid{gap:0 12px}form{padding:18px}th,td{padding:8px}button.secondary{margin:10px 0 0}}@media print{header,footer,form,button,.intro,nav,.notice{display:none}main{max-width:none}body{background:white}.workspace,.frame .workspace{display:block}.preview-space{break-inside:avoid}a{text-decoration:none}}
@media(max-width:700px){.frame .workspace form{order:-1}.frame .workspace form h2{margin-top:0}}