:root{--bg:#f7f3ea;--ink:#14213d;--mute:#5a6277;--panel:#fff;--line:#dcd3be;--sun:#f2a900;--brand:#27408b;--branddk:#1b2f6b;--warn:#b3411f}
*{box-sizing:border-box}
html{scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 "Source Sans 3",system-ui,sans-serif;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.1;margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
header{padding:36px 0 22px}
h1{font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.02em;max-width:16em}
header p{color:var(--mute);max-width:40em;margin:12px 0 0}
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.card h2{font-size:22px;margin-bottom:12px}
.row{display:grid;grid-template-columns:24px 1fr 76px 52px 64px 30px;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.row.head{border-top:0;font-size:14px;color:var(--mute);padding-top:0}
.row .nm{overflow:hidden;text-overflow:ellipsis}
.row .nm small{color:var(--mute)}
@media(max-width:520px){.row{grid-template-columns:22px 1fr 62px 44px 54px 24px;gap:5px;font-size:15px}}
input,select,button{font:inherit;color:inherit}
input[type=number],input[type=text],select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:1px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.x{background:none;border:0;color:var(--mute);cursor:pointer;font-size:18px;line-height:1}
.add{display:grid;grid-template-columns:1fr 76px 52px 64px auto;gap:8px;margin-top:12px;align-items:center}
.add label{display:flex;gap:5px;align-items:center;font-size:14px;color:var(--mute);white-space:nowrap}
@media(max-width:520px){.add{grid-template-columns:1fr 1fr 1fr}.add input[type=text]{grid-column:1/-1}}
.btn{background:var(--brand);color:#fff;border:0;border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--branddk)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.opts label{font-size:14px;color:var(--mute);display:block;margin-bottom:3px}
@media(max-width:520px){.opts{grid-template-columns:1fr}}
.result{position:sticky;top:12px}
@media(max-width:860px){.result{position:static}}
.big{display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--line);padding:11px 0}
.big:first-of-type{border-top:0}
.big b{font-family:"Bricolage Grotesque",sans-serif;font-size:32px;color:var(--brand);letter-spacing:-.01em}
.big span{color:var(--mute);font-size:15px}
.big div{margin-left:auto;text-align:right;font-weight:600;font-size:15px}
.note{font-size:14px;color:var(--mute);margin:12px 0 0}
.warn{background:#fbeee8;border-left:4px solid var(--warn);padding:8px 12px;border-radius:4px;font-size:15px;margin-top:10px;display:none}
article{margin:34px 0}
article h2{font-size:26px;margin:26px 0 8px}
article p,article li{max-width:44em}
footer{padding:24px 0 40px;color:var(--mute);font-size:14px}
@media(prefers-reduced-motion:no-preference){.big b{transition:color .2s}}
.mark{flex:none}footer a{color:var(--brand)}.quick{background:#fff;border-left:4px solid var(--sun);padding:12px 16px;border-radius:4px;margin:18px 0 0;max-width:46em;color:var(--ink)}
.tw{overflow-x:auto;max-width:820px}
table{border-collapse:collapse;width:100%;font-size:15px;background:#fff}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#ece4d1;font-weight:600}
.btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn2{background:#fff;color:var(--brand);border:1px solid var(--brand);border-radius:6px;padding:7px 12px;font-weight:600;cursor:pointer}
.btn2:hover{background:#ece4d1}
.upd{color:var(--mute);font-size:14px}
article ul{padding-left:1.2em}
@media print{.site,.add,.btns,.x,footer{display:none}body{background:#fff}.grid{grid-template-columns:1fr}.result{position:static}}
.f{display:grid;grid-template-columns:1fr 1fr;gap:12px}.f .full{grid-column:1/-1}.f label,.lb{font-size:14px;color:var(--mute);display:block;margin-bottom:3px}
.u{display:grid;grid-template-columns:1fr 84px;gap:8px}
.sec{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:18px;margin:20px 0 8px;font-weight:600}
.pre{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}.pre button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer;font-size:14px}.pre button:hover{border-color:var(--brand)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--line);font-size:15px}
details{margin-top:12px;font-size:15px}summary{cursor:pointer;color:var(--brand);font-weight:600}
@media(max-width:520px){.f{grid-template-columns:1fr}}
.hh{display:flex;align-items:center;gap:16px}.ticon{width:56px;height:56px;flex:none}@media(max-width:520px){.ticon{width:44px;height:44px}.hh{gap:12px}}
.site{display:flex;align-items:center;gap:8px;font-size:15px;background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--sun);border-radius:12px;padding:10px 14px;margin-top:14px;color:var(--mute)}
.site a{color:var(--ink);font-weight:700;text-decoration:none}.site a:hover{text-decoration:underline}
.result{border-top:4px solid var(--sun)}
.lg{display:block;line-height:0}.lg img{height:62px;width:auto;display:block}.site{padding:8px 14px}
article a,.note a{color:var(--brand)}article a:hover{color:var(--branddk)}