:root{--bg:#f4f5f0;--card:#fff;--tx:#17181c;--mu:#6a6d78;--ac:#0f766e;--ac2:#f59e0b;--bd:#dfe1d8;--in:#eef0e8;--ok:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101214;--card:#181b1e;--tx:#ecefe9;--mu:#9aa09a;--ac:#2dd4bf;--bd:#2a2e31;--in:#212528;--ok:#06201c}}
:root[data-theme="dark"]{--bg:#101214;--card:#181b1e;--tx:#ecefe9;--mu:#9aa09a;--ac:#2dd4bf;--bd:#2a2e31;--in:#212528;--ok:#06201c}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--bd);display:flex;gap:12px;align-items:center;padding:12px max(16px,calc(50% - 600px))}
.logo{font:800 20px/1 Georgia,"Times New Roman",serif;color:var(--tx);text-decoration:none;white-space:nowrap}
.logo i{font-style:normal;color:var(--ac)}
#q{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--tx);font:inherit}
button,.btn{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:10px 16px;background:var(--ac);color:var(--ok);font-weight:600;text-decoration:none;display:inline-block}
button.g{background:var(--in);color:var(--tx)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
main{max-width:1120px;margin:0 auto;padding:28px 16px 48px}
.hero{padding:24px 0 8px;max-width:640px}
.hero h1{font:800 clamp(30px,6vw,52px)/1.08 Georgia,"Times New Roman",serif;margin:0 0 12px;letter-spacing:-.02em}
.hero p,.mu{color:var(--mu);margin:0}
h2{font:700 20px Georgia,serif;margin:32px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--card);border:1px solid var(--bd);border-radius:12px;color:var(--tx);text-decoration:none}
.card:hover{border-color:var(--ac)}
.card span{color:var(--mu);font-size:14px}
.back{color:var(--ac);text-decoration:none;font-weight:600}
.tool h1{font:800 clamp(26px,5vw,38px)/1.15 Georgia,serif;margin:12px 0 6px}
.panel{margin-top:20px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px;display:grid;gap:14px;max-width:760px}
label{display:grid;gap:6px;font-weight:600;font-size:14px}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--in);color:var(--tx);font-family:inherit;font-size:16px;line-height:1.4}
input,select{min-height:44px}
textarea{resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px}
input[type=color]{height:44px;padding:4px}
.bar{display:flex;gap:8px;flex-wrap:wrap}
.out{background:var(--in);border-radius:10px;padding:14px;min-height:56px;white-space:pre-wrap;word-break:break-word;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto}
.out img{max-width:100%;border-radius:10px}
.il{fill:#cde3de;stroke:#6f948d;stroke-width:.9;cursor:pointer}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .il{fill:#2f4f4a;stroke:#6aa59c}}:root[data-theme="dark"] .il{fill:#2f4f4a;stroke:#6aa59c}.il:hover{fill:var(--ac);fill-opacity:.45}.il.sa{fill:var(--ac)!important;fill-opacity:1!important}.il.sb{fill:var(--ac2)!important;fill-opacity:1!important}.ln{stroke:var(--tx);stroke-width:2}.da{fill:var(--ac);stroke:var(--card);stroke-width:2}.db{fill:var(--ac2);stroke:var(--card);stroke-width:2}.ml{fill:var(--tx);font:600 13px "Segoe UI",system-ui,sans-serif;paint-order:stroke;stroke:var(--card);stroke-width:3px}
.sw{--hm:30vh;display:flex;flex-direction:column;gap:14px;min-height:calc(100dvh - 170px)}
.sw.fs{position:fixed;inset:0;z-index:50;background:var(--bg);padding:max(12px,env(safe-area-inset-top,0px)) 16px max(12px,env(safe-area-inset-bottom,0px));min-height:0;--hm:44vh}
.sw:fullscreen{background:var(--bg);padding:16px;min-height:0;--hm:44vh}
.swt{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.seg{display:flex;gap:4px;background:var(--in);padding:4px;border-radius:12px}.seg button{background:transparent;color:var(--tx);padding:8px 16px}.seg button.on{background:var(--ac);color:var(--ok)}
.disp{flex:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;letter-spacing:-.02em;min-height:30vh;user-select:none}
.disp .cs{font-size:.42em;color:var(--mu);margin-left:.08em;letter-spacing:0}
.disp.warn{color:#dc2626}.disp.done{color:#dc2626;animation:bl .8s steps(2) infinite}@keyframes bl{50%{opacity:.2}}
.swc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.swc button{font-size:20px;padding:14px 28px;min-width:130px}
.cdin{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.cdin input{width:84px;font-size:22px;text-align:center}
.laps{max-height:18vh;overflow:auto;font-variant-numeric:tabular-nums;text-align:center;color:var(--mu)}
.bc{font-size:14px;color:var(--mu);margin:0 0 4px}.bc a{color:var(--ac);text-decoration:none;font-weight:600}
.swh{font:700 18px Georgia,serif;margin:0;text-align:center}
.fm{fill:#cde3de}.fe{fill:#ecd29b}.tl{fill:#cde3de;stroke:#6f948d;stroke-width:1}.fo{fill:none;stroke:#3d5f59;stroke-width:2.5;stroke-linejoin:round}.dm line{stroke:var(--tx);stroke-width:1.4}.dm text{fill:var(--tx);font:700 14px "Segoe UI",system-ui,sans-serif;paint-order:stroke;stroke:var(--in);stroke-width:3px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .fm,:root:not([data-theme="light"]) .tl{fill:#2f4f4a}:root:not([data-theme="light"]) .fe{fill:#6b5a2e}:root:not([data-theme="light"]) .tl{stroke:#6aa59c}:root:not([data-theme="light"]) .fo{stroke:#9fd3c9}}
:root[data-theme="dark"] .fm,:root[data-theme="dark"] .tl{fill:#2f4f4a}:root[data-theme="dark"] .fe{fill:#6b5a2e}:root[data-theme="dark"] .tl{stroke:#6aa59c}:root[data-theme="dark"] .fo{stroke:#9fd3c9}
.op{fill:var(--card);stroke:var(--tx);stroke-width:1.5}.opl{fill:none;stroke:var(--tx);stroke-width:1.2}
.bd{transition:transform .18s ease;cursor:pointer}.ab-f{fill:#f3e3c8;stroke:#6b3b13;stroke-width:4}.ab-b{fill:#6b3b13}.ab-r{stroke:#777;stroke-width:3}.ab-d{fill:#f3e3c8}.ab-bd{fill:#c07a3a;stroke:#6b3b13;stroke-width:1.5}.bd:hover .ab-bd{fill:#d68f4a}.ab-t{fill:var(--tx);font:700 18px "Segoe UI",system-ui,sans-serif;text-anchor:middle}.ab-f+line,.ab-f~.ab-t{pointer-events:none}.sc-r{fill:#c0392b;stroke:#7a1f14;stroke-width:1.5}.sc-w{fill:#f7f2e8;stroke:#8a7a5a;stroke-width:1.5}.sc-l{stroke:#777;stroke-width:3}
.seow{max-width:1120px;margin:0 auto;padding:0 16px 24px}.seo{margin-top:36px;max-width:760px;line-height:1.65}.seo h2{font:700 22px Georgia,"Times New Roman",serif;margin:24px 0 8px}.seo h3{font:700 16px "Segoe UI",system-ui,sans-serif;margin:16px 0 4px}.seo p{margin:0 0 10px}.seo,.seo p,.seo h3{overflow-wrap:anywhere}
.out td+td,.out th+th{padding-left:10px}
#mp{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--bd);box-shadow:0 14px 28px rgba(0,0,0,.14);overflow:auto;padding:10px max(16px,calc(50% - 600px)) 14px;z-index:6}#mp[hidden]{display:none}
.mg{columns:146px;column-gap:10px}.mc{break-inside:avoid;margin-bottom:3px}
.mc summary{font:700 15px Georgia,"Times New Roman",serif;padding:3px 0;list-style:none;border-bottom:1px solid var(--bd);cursor:default}.mc summary::-webkit-details-marker{display:none}.mc summary i{font:400 13px "Segoe UI",system-ui,sans-serif;color:var(--mu);font-style:normal}
.mc a{display:block;padding:1px 0;color:var(--tx);text-decoration:none;font-size:13px;line-height:1.2}.mc a:hover,.mc a[aria-current]{color:var(--ac)}.mc a[aria-current]{font-weight:700}
.mf{display:flex;gap:6px 22px;flex-wrap:wrap;margin-top:6px;padding-top:4px;border-top:1px solid var(--bd)}.mf a{color:var(--ac);text-decoration:none;font-weight:600;padding:8px 0}
@media(max-width:700px){#mp{padding-top:8px}.mg{columns:auto}.mc{margin-bottom:0}.mc summary{cursor:pointer;padding:14px 2px;min-height:48px;display:flex;justify-content:space-between;align-items:center}.mc summary:after{content:'+';font:700 20px sans-serif;color:var(--ac)}.mc[open] summary:after{content:'−'}.mc a{padding:12px 6px;font-size:15px}.mf{flex-direction:column;gap:0}.mf a{padding:14px 2px}}
@media(max-width:560px){header{flex-wrap:wrap;gap:8px 8px}header .logo{font-size:18px}header button{padding:10px 12px}header .ts{display:none}header .logo{order:1;margin-right:auto}header #mb{order:2}header #th{order:2}header #q{order:3;flex:1 0 100%}}
.mx{display:inline-block;position:relative;padding:6px 16px;vertical-align:middle}.mx:before,.mx:after{content:'';position:absolute;top:0;bottom:0;width:10px;border:2.5px solid var(--tx)}.mx:before{left:0;border-right:0;border-radius:6px 0 0 6px}.mx:after{right:0;border-left:0;border-radius:0 6px 6px 0}.mx table{border-collapse:collapse}.mx td{padding:3px 9px;text-align:center;font:16px ui-monospace,Menlo,Consolas,monospace}
footer a{color:var(--ac);text-decoration:none;font-weight:600}footer p{margin:8px 0 0}.seo.pg{margin-top:8px}.pg h1{font:800 clamp(28px,5vw,40px)/1.15 Georgia,"Times New Roman",serif;margin:12px 0 6px}.pg ul{margin:0 0 10px;padding-left:22px}.pg li{margin:6px 0}.pg a{color:var(--ac)}
footer{text-align:center;color:var(--mu);font-size:14px;padding:0 16px 32px}
.tw{overflow-x:auto;max-width:100%;margin:8px 0 6px;border:1px solid var(--bd);border-radius:10px;-webkit-overflow-scrolling:touch}.seo table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.4}.seo th,.seo td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap;vertical-align:top}.seo thead th{background:var(--in);font-weight:700}.seo tbody th{font-weight:600}.seo tbody tr:last-child>*{border-bottom:0}.seo .tn{font-size:13px;color:var(--mu);margin:6px 0 12px}

.catnav p{line-height:2.1;margin:0}.catnav a,.hub a{color:var(--ac);text-decoration:none;font-weight:600}.hub{margin:8px 0 0}
