:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--bg:#f6f1e7;--ink:#1a1a1a;--mut:#585858;--red:#d7261e;--yel:#ffd24a;--blue:#1d3b8b;--card:#fff;--line:#d9d2c3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Heebo,Arial,system-ui,sans-serif;line-height:1.7;color:var(--ink);background:var(--bg);animation:fade .3s var(--ease-out)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.95);opacity:0}100%{transform:none;opacity:1}}
a{color:var(--blue);text-underline-offset:3px}
header.top{position:sticky;top:0;z-index:20;background:#f6f1e7ee;backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.bar{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{width:30px;height:30px}
nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;padding:7px 13px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.92rem;transition:background-color .16s ease,color .16s ease}
@media(hover:hover) and (pointer:fine){nav a:hover{background:var(--ink);color:var(--bg)}}
.menu{position:relative;margin-inline-start:auto}
.menu summary{list-style:none;cursor:pointer;padding:7px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;font-size:.9rem;font-weight:700;white-space:nowrap;transition:background-color .16s ease,color .16s ease}
@media(hover:hover) and (pointer:fine){.menu summary:hover,.menu[open] summary{background:var(--ink);color:var(--bg)}}
.menu summary::-webkit-details-marker{display:none}
.menubox{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:50;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:8px;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;width:min(440px,90vw)}
.menubox a{padding:9px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:.92rem}
@media(hover:hover) and (pointer:fine){.menubox a:hover{background:var(--yel)}}
main,body>h1,body>.ad-slot,body>label,body>input,body>select,body>button,body>.res,body>p,body>h2,body>ul,body>ol,body>table,body>.note,body>footer{max-width:760px;margin-inline:auto;padding-inline:16px;display:block}
body>h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.15;font-weight:900;letter-spacing:-.01em;margin-top:34px;margin-bottom:10px}
body>h1::after{content:"";display:block;width:84px;height:8px;margin-top:12px;background:linear-gradient(90deg,var(--yel) 0 33%,var(--red) 33% 66%,var(--blue) 66%);border-radius:4px}
h2{font-family:Georgia,"Times New Roman",serif;font-size:1.4rem;margin-top:32px;padding-bottom:6px}
label{font-weight:700;margin-top:16px;margin-bottom:5px;font-size:.95rem}
input,select{width:calc(100% - 32px);margin-inline:16px;padding:12px 14px;font:inherit;font-size:1.05rem;border:2px solid var(--ink);border-radius:12px;background:#fff;transition:background-color .16s ease,color .16s ease}
input:focus,select:focus{outline:0;box-shadow:0 0 0 4px var(--yel)}
button{display:inline-flex;align-items:center;gap:10px;margin:18px 16px;padding:13px 28px;font:inherit;font-size:1.05rem;font-weight:800;color:#fff;background:var(--ink);border:2px solid var(--ink);border-radius:999px;cursor:pointer;box-shadow:5px 5px 0 var(--red);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background-color .16s ease}
button::after{content:"\2192";transition:transform .2s}
@media(hover:hover) and (pointer:fine){button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red)}}
@media(hover:hover) and (pointer:fine){button:hover::after{transform:translateX(4px)}}
button:active{transform:translate(3px,3px) scale(.97);box-shadow:1px 1px 0 var(--red)}
button:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.res{margin-top:20px;margin-bottom:8px;padding:20px 22px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);animation:pop .22s var(--ease-out)}
.res b{font-family:Georgia,serif;font-size:1.8rem;color:var(--red)}
table{border-collapse:separate;border-spacing:0;background:#fff;border:2px solid var(--ink);border-radius:14px;overflow:hidden;width:calc(100% - 32px);margin-inline:16px}
body>table{margin-inline:auto;width:calc(100% - 32px);max-width:728px}
.res table{width:100%;margin:12px 0 0;border:1px solid var(--line);box-shadow:none}
tr{transition:background-color .15s ease}
@media(hover:hover) and (pointer:fine){tbody tr:hover,tr:hover{background:#fff6d6}}
td,th{padding:11px 16px;border-bottom:1px solid var(--line);text-align:start}
tr:last-child td{border-bottom:0}
th{background:var(--ink);color:var(--bg);font-weight:700;border-bottom:0}
td:last-child{font-weight:700;font-variant-numeric:tabular-nums}
ul,ol{padding-inline-start:36px}
ul li{margin:5px 0}
ul:has(>li>a:only-child){list-style:none;padding-inline:16px;display:flex;flex-direction:column;gap:8px}
ul:has(>li>a:only-child)>li{margin:0}
ul:has(>li>a:only-child)>li>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:#fff;border:2px solid var(--ink);border-radius:14px;color:var(--ink);text-decoration:none;font-weight:600;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background-color .16s ease}
ul:has(>li>a:only-child)>li>a::after{content:"\2192";width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--yel);font-weight:800;transition:transform .2s var(--ease-out),background-color .16s ease}
@media(hover:hover) and (pointer:fine){ul:has(>li>a:only-child)>li>a:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--ink);background:#fffbea}}
@media(hover:hover) and (pointer:fine){ul:has(>li>a:only-child)>li>a:hover::after{background:var(--red);color:#fff;transform:translateX(3px)}}
.note{font-size:.84rem;color:var(--mut);margin-top:26px;border-inline-start:4px solid var(--yel);padding-inline-start:14px!important}
footer{text-align:center;margin:30px auto 44px;font-size:.88rem;color:var(--mut)}
footer a{color:var(--ink)}
.ad-slot{display:none;margin:16px auto;min-height:90px;text-align:center}
body>.ad-slot:empty{display:none!important}
@media(max-width:640px){nav a:nth-child(n+3){display:none}.menubox{grid-template-columns:1fr}body>button{width:calc(100% - 32px);justify-content:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body>table{display:table}
body>button{display:flex;margin-inline:auto}
@media(min-width:641px){body>button{width:auto}}
body>.res{width:calc(100% - 32px);max-width:728px;padding-inline:22px}
@media(max-width:640px){nav{display:none}.menu{margin-inline-start:auto}}
td:last-child{white-space:nowrap}

.menubox{transform-origin:top left;animation:pop .18s var(--ease-out)}
ul:has(>li>a:only-child)>li>a:active,.tile:active{transform:scale(.98)}
.res b,td:last-child{font-variant-numeric:tabular-nums}
h1,h2{text-wrap:balance}p{text-wrap:pretty}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
input,select{transition:border-color .16s ease,box-shadow .16s var(--ease-out)}
input[type=date]{text-align:start}
:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
a:active{opacity:.8}