@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root{--ink:#243247;--muted:#778293;--line:#e4e1da;--paper:#f4f2ed;--card:#fbfaf7;--accent:#d86b50;--accent-soft:#f7e7e2;--scale:1}
*{box-sizing:border-box}
html{font-family:"DM Sans","Noto Sans JP",sans-serif;color:var(--ink);background:var(--paper)}
body{margin:0;min-width:320px}
button,input{font:inherit}
button{color:inherit}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);background:rgba(244,242,237,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.02em}
.brand-mark{width:34px;height:34px;background:var(--ink);color:white;display:grid;place-items:center;border-radius:9px}
.brand-mark svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.calibration-status{border:1px solid #d9d5cd;background:#faf9f6;border-radius:999px;padding:9px 14px;display:flex;gap:8px;align-items:center;font-size:12px;cursor:pointer}
.calibration-status svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.status-dot{width:7px;height:7px;border-radius:50%;background:#7dad7d}
.status-divider{width:1px;height:14px;background:#ddd8cf}
.zoom-warning{position:sticky;top:76px;z-index:9;background:#9e4939;color:#fff;min-height:42px;padding:9px 5vw;display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px}
.zoom-warning span{opacity:.82}.zoom-warning kbd{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:2px 6px;font:inherit}
main{max-width:1320px;margin:auto;padding:0 34px 36px}
.hero{text-align:center;padding:72px 20px 46px}
.eyebrow,.section-label{font-size:11px;letter-spacing:.18em;font-weight:700;color:#8a655c;margin:0;text-transform:uppercase}
.hero h1{font-size:clamp(34px,4.2vw,58px);line-height:1.2;letter-spacing:-.045em;margin:15px 0 18px;font-weight:600}
.hero h1 span{color:var(--accent)}
.lead{color:var(--muted);font-size:15px;line-height:1.9;margin:0}
.tool-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px}
.control-card,.preview-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(53,48,40,.04)}
.control-card{padding:4px 24px}
.control-section{padding:22px 0;border-bottom:1px solid var(--line)}
.control-section:last-child{border:0}
.segmented{margin-top:13px;background:#edeae4;border-radius:10px;padding:4px;display:grid;grid-template-columns:1fr 1fr}
.segment{border:0;background:transparent;padding:10px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;cursor:pointer}
.segment svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.segment.active{background:#fff;box-shadow:0 2px 7px rgba(43,47,52,.09);font-weight:600}
.dimension-grid{display:grid;grid-template-columns:1fr 18px 1fr;align-items:end;gap:7px;margin-top:13px}
.dimension-grid label,.diameter-input{font-size:12px;color:var(--muted)}
.times{text-align:center;padding-bottom:12px;color:#a2a7ad}
.input-wrap{margin-top:7px;border:1px solid #d9d6cf;background:#fff;border-radius:9px;height:44px;display:flex;align-items:center;padding:0 10px}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input-wrap input{border:0;outline:0;width:100%;font-size:16px;color:var(--ink);background:transparent}
.input-wrap span{font-size:11px;color:#a0a6ae}
.diameter-input{display:block;margin-top:13px}
.hidden{display:none!important}
.label-row{display:flex;align-items:center;justify-content:space-between}
.label-row>span{font-size:10px;color:#a0a6ae}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.presets button{border:1px solid #dedbd4;background:#fff;border-radius:8px;padding:9px 11px;text-align:left;font-size:12px;font-weight:600;cursor:pointer}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.presets span{display:block;font-size:9px;color:#a0a6ae;font-weight:400;margin-top:2px}
.color-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:16px}
.color-control{display:flex;align-items:center;gap:8px;color:#8f97a1;font-size:10px}
input[type=color]{width:26px;height:26px;border:0;padding:0;border-radius:50%;overflow:hidden;background:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.toggle input{position:absolute;opacity:0}.toggle>span{display:block;width:36px;height:20px;background:#d8d8d6;border-radius:20px;padding:3px;transition:.2s;cursor:pointer}
.toggle>span:after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:white;transition:.2s;box-shadow:0 1px 3px #999}
.toggle input:checked+span{background:var(--accent)}.toggle input:checked+span:after{transform:translateX(16px)}
.preview-card{min-height:534px;overflow:hidden;display:flex;flex-direction:column}
.preview-header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 23px}
.preview-header>div>p:last-child{margin:5px 0 0;color:#a0a6ae;font-size:10px}
.icon-button{border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.icon-button svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.preview-area{flex:1;min-height:460px;display:flex;flex-direction:column;position:relative;background-color:#f7f6f2;background-image:radial-gradient(#d5d1c8 .65px,transparent .65px);background-size:12px 12px;overflow:auto}
.shape-stage{flex:1;min-height:390px;display:grid;place-items:center;padding:60px}
.shape{width:50mm;height:30mm;background:var(--accent);position:relative;box-shadow:0 13px 26px rgba(83,51,43,.16);transition:width .25s,height .25s,border-radius .25s,background .2s}
.shape.circle{border-radius:50%}
.measure{position:absolute;font-size:10px;color:#9d817b;white-space:nowrap;letter-spacing:.04em;pointer-events:none}
.measure-width{left:0;bottom:-31px;width:100%;text-align:center}
.measure-width:before{content:"";position:absolute;left:0;top:-11px;width:100%;height:11px;border-left:1px solid #baa9a3;border-right:1px solid #baa9a3;background:linear-gradient(to bottom,transparent 5px,#baa9a3 5px,#baa9a3 6px,transparent 6px)}
.measure-height{top:0;right:-49px;height:100%;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg)}
.measure-height:before{content:"";position:absolute;right:24px;top:0;width:11px;height:100%;border-top:1px solid #baa9a3;border-bottom:1px solid #baa9a3;background:linear-gradient(to right,transparent 5px,#baa9a3 5px,#baa9a3 6px,transparent 6px)}
.scale-note{align-self:center;margin:0 0 18px;padding:7px 11px;border:1px solid var(--line);background:rgba(251,250,247,.9);border-radius:99px;font-size:8px;letter-spacing:.08em;color:#9da2a9}
.scale-note span{display:inline-block;width:5px;height:5px;background:#7dad7d;border-radius:50%;vertical-align:1px}
.tips{margin:0 0 20px;border:1px solid var(--line);background:#eeeae3;border-radius:13px;padding:18px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.tip-icon{width:38px;height:38px;border-radius:50%;background:#e3dcd1;display:grid;place-items:center}
.tip-icon svg{width:20px;fill:none;stroke:#8a655c;stroke-width:1.6}
.tips div>p:last-child{font-size:11px;color:#7e858f;margin:6px 0 0;line-height:1.6}
.tips button{border:0;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer;padding:12px 18px;border-radius:9px;box-shadow:0 5px 14px rgba(216,107,80,.24);transition:transform .18s,box-shadow .18s,background .18s}.tips button:hover{background:#c85c43;transform:translateY(-1px);box-shadow:0 7px 18px rgba(216,107,80,.32)}.tips button:focus-visible{outline:3px solid rgba(216,107,80,.28);outline-offset:3px}.tips button span{font-size:16px;margin-left:7px}
.ad-unit{width:100%;margin-top:28px;min-height:90px;overflow:hidden;text-align:center}
footer{border-top:1px solid var(--line);height:88px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;color:#a2a5aa;font-size:10px;letter-spacing:.03em}
dialog{border:0;padding:0;border-radius:18px;background:transparent;max-width:520px;width:calc(100% - 30px)}
dialog::backdrop{background:rgba(28,35,45,.55);backdrop-filter:blur(4px)}
.dialog-card{background:#fbfaf7;padding:34px;border-radius:18px;position:relative;text-align:center;overflow-x:auto}
.dialog-card h2{font-size:27px;margin:8px 0}.dialog-card>p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.dialog-close{position:absolute;right:17px;top:14px;border:0;background:none;font-size:25px;color:#9ba0a7;cursor:pointer}
.card-calibrator{width:85.6mm;height:53.98mm;max-width:none;margin:0 auto 25px;border:2px dashed var(--accent);border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;color:#a65b49;font-size:10px;letter-spacing:.14em}
.range-label{display:grid;grid-template-columns:1fr auto;text-align:left;font-size:12px;gap:10px}.range-label input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.measured-calibration{margin-top:20px;padding:15px;background:#f1eee8;border-radius:10px;text-align:left}.measured-calibration>label{font-size:11px;font-weight:600}.measured-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.measured-row .input-wrap{margin-top:7px}.measured-row button{height:44px;border:0;border-radius:8px;padding:0 14px;background:#8a655c;color:#fff;font-size:11px;cursor:pointer}.measured-calibration p{margin:7px 0 0!important;font-size:9px!important;color:#8c929a!important}
.dialog-actions{display:grid;grid-template-columns:1fr 2fr;gap:9px;margin-top:22px}.dialog-actions button{border-radius:9px;padding:12px;border:1px solid var(--line);cursor:pointer}.secondary-button{background:#fff}.primary-button{background:var(--ink);color:#fff;border-color:var(--ink)!important}
@media(max-width:850px){.tool-layout{grid-template-columns:1fr}.control-card{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}.control-section:nth-last-child(-n+2){border-bottom:0}.preview-card{min-height:500px}}
@media(max-width:600px){.site-header{height:64px;padding:0 18px}.zoom-warning{top:64px;flex-wrap:wrap;gap:6px;text-align:center}.zoom-warning span{width:100%}.brand{font-size:13px}.brand-mark{width:30px;height:30px}.calibration-status #statusText,.status-divider{display:none}.calibration-status{padding:8px 10px}.hero{padding:48px 0 34px}.hero h1{font-size:36px}.lead br{display:none}main{padding:0 14px 56px}.control-card{display:block}.control-section{border-bottom:1px solid var(--line)!important}.control-section:last-child{border:0!important}.preview-header{height:66px}.shape-stage{padding:55px 45px;min-height:350px}.tips{grid-template-columns:auto 1fr}.tips button{grid-column:2;text-align:left}footer{height:auto;padding:25px 18px;display:block;line-height:1.8}.dialog-card{padding:30px 18px}.measured-row{grid-template-columns:1fr}.measured-row button{width:100%}}