:root{--color-bg:#fff;--color-text:#1a1a1a;--color-muted:#666;--color-accent:#2563eb;--color-accent-dark:#1d4ed8;--color-accent-soft:#eff4ff;--color-border:#e2e2e2;--color-surface:#f7f8fa;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-sm:0 1px 2px #1018280f;--shadow-md:0 4px 12px #10182814;--container-width:760px;--container-width-wide:920px;font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Meiryo,sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.75}a{color:inherit}img,svg,video{max-width:100%;height:auto;display:block}.container{max-width:var(--container-width);padding:var(--space-6) var(--space-4);margin:0 auto}.container-wide{max-width:var(--container-width-wide)}@media (width>=768px){.container{padding:var(--space-7) var(--space-5)}}.site-header{border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:saturate(180%)blur(6px);backdrop-filter:saturate(180%)blur(6px);z-index:40;background:#ffffffeb;position:sticky;top:0}.site-header-inner{max-width:var(--container-width-wide);padding:var(--space-3) var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0 auto;display:flex;position:relative}.site-logo{color:var(--color-text);letter-spacing:-.01em;font-size:1.125rem;font-weight:700;text-decoration:none}.site-logo-accent{color:var(--color-accent)}.nav-toggle-checkbox{opacity:0;pointer-events:none;position:absolute}.nav-toggle-label{cursor:pointer;border-radius:var(--radius-sm);flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;display:flex}.nav-toggle-label:hover{background:var(--color-surface)}.nav-toggle-label span{background:var(--color-text);border-radius:2px;height:2px;transition:transform .2s,opacity .2s;display:block}.site-nav{gap:var(--space-1);flex-direction:column;order:3;width:100%;max-height:0;transition:max-height .25s;display:flex;overflow:hidden}.nav-toggle-checkbox:checked~.site-nav{max-height:320px}.site-nav a{padding:var(--space-3) var(--space-2);color:var(--color-muted);border-radius:var(--radius-sm);align-items:center;min-height:44px;font-weight:500;text-decoration:none;display:flex}.site-nav a:hover,.site-nav a:focus-visible{color:var(--color-accent);background:var(--color-accent-soft)}@media (width>=768px){.nav-toggle-label{display:none}.site-nav{gap:var(--space-1);flex-direction:row;order:2;width:auto;max-height:none;overflow:visible}.site-nav a{min-height:auto;padding:var(--space-2) var(--space-3)}}.push-subscribe-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-4);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);cursor:pointer;border-radius:999px;min-height:44px;font-size:.875rem;font-weight:600;transition:border-color .15s,background-color .15s;display:inline-flex}.push-subscribe-btn:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}.push-subscribe-btn:disabled{opacity:.6;cursor:default}.push-subscribe-status{color:var(--color-muted);margin:0 0 var(--space-4);min-height:1em;font-size:.8rem}.site-footer{border-top:1px solid var(--color-border);padding:var(--space-6) var(--space-4);color:var(--color-muted);margin-top:var(--space-7);text-align:center;font-size:.875rem}.site-footer .social-links{margin:0 0 var(--space-5)}.site-footer .social-links-list{justify-content:center}.site-footer a{color:var(--color-muted)}.site-footer p{margin:var(--space-1) 0}h1{margin:0 0 var(--space-5);letter-spacing:-.01em;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);line-height:1.35}.container :where(h2){margin:var(--space-7) 0 var(--space-3);font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.4}.container :where(h3){margin:var(--space-6) 0 var(--space-2);font-size:1.1rem}.container :where(p){margin:0 0 var(--space-4)}.container :where(ul,ol){margin:0 0 var(--space-4);padding-left:1.4em}.container :where(li){margin-bottom:var(--space-1)}.container :where(blockquote){margin:var(--space-5) 0;padding:var(--space-3) var(--space-4);border-left:4px solid var(--color-accent);background:var(--color-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-muted)}.container :where(pre){color:#f4f4f5;padding:var(--space-4);border-radius:var(--radius-md);margin:var(--space-5) 0;background:#1e1e2e;font-size:.875rem;overflow-x:auto}.container :where(code){font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:.9em}.container :where(p code,li code){background:var(--color-surface);border-radius:4px;padding:.15em .4em}.container :where(table){border-collapse:collapse;width:100%;margin:var(--space-5) 0;font-size:.9rem;display:block;overflow-x:auto}.container :where(th,td){border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);text-align:left}.container :where(figure){margin:var(--space-5) 0}.container :where(figcaption){color:var(--color-muted);text-align:center;margin-top:var(--space-2);font-size:.85rem}.site-hero{padding:var(--space-6) 0 var(--space-7);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-6)}.site-hero h1{margin-bottom:var(--space-3)}.site-hero-lead{color:var(--color-muted);max-width:56ch;margin:0;font-size:1.05rem}.search-box{margin:var(--space-5) 0}.search-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:48px;font-size:1rem}.search-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.post-list,.tool-list{gap:var(--space-4);display:grid}@media (width>=700px){.post-list,.tool-list{grid-template-columns:repeat(2,1fr)}}.post-card-thumb-link{margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);border-radius:var(--radius-md) var(--radius-md) 0 0;display:block;overflow:hidden}.post-card-thumb{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.post-hero-image{aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);width:100%;margin:0 0 var(--space-5)}.post-card{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-5);background:var(--color-bg);transition:box-shadow .15s,transform .15s,border-color .15s}.post-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-accent);transform:translateY(-2px)}.post-card h2{margin:0 0 var(--space-2);font-size:1.15rem;line-height:1.4}.post-card h2 a{color:var(--color-text);text-decoration:none}.post-card h2 a:hover{color:var(--color-accent)}.post-meta{color:var(--color-muted);font-size:.875rem}.tag-chip-list{gap:var(--space-2);margin:var(--space-3) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.tag-chip{background:var(--color-accent-soft);color:var(--color-accent-dark);border-radius:999px;padding:.2rem .65rem;font-size:.75rem;font-weight:600;text-decoration:none;transition:background-color .15s;display:inline-block}a.tag-chip:hover,a.tag-chip:focus-visible{background:var(--color-accent);color:#fff}.draft-badge{margin-left:var(--space-2);color:#7a5b00;vertical-align:middle;background:#fde68a;border-radius:999px;padding:.1rem .5rem;font-size:.7rem;font-weight:700;display:inline-block}.ad-disclosure{border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);color:#6b5300;margin:var(--space-4) 0;background:#fff7e6;border:1px solid #f0d999;font-size:.875rem}.calc-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-5) 0}.calc-grid{gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.calc-field{gap:var(--space-1);flex-direction:column;font-size:.875rem;display:flex}.calc-field input{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);min-height:44px;font-size:1rem}.calc-field input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.calc-result{border-radius:var(--radius-sm);padding:var(--space-4);border:1px solid var(--color-border);background:#fff}.calc-result p{margin:var(--space-1) 0}.calc-error{color:#b42318}.calc-formula{color:var(--color-muted);margin-top:var(--space-3);font-size:.8rem}.tool-list a{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-bg);text-decoration:none;transition:box-shadow .15s,border-color .15s,transform .15s;display:block}.tool-list a:hover,.tool-list a:focus-visible{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}.tool-list strong{margin-bottom:var(--space-1);font-size:1.05rem;display:block}.tool-list p{color:var(--color-muted);margin:0;font-size:.9rem}.like-button{padding:var(--space-3) var(--space-5);border:1px solid var(--color-border);cursor:pointer;margin:var(--space-5) 0;background:#fff;border-radius:999px;align-items:center;gap:.4rem;min-height:44px;font-size:1rem;transition:border-color .15s,background .15s;display:inline-flex}.like-button:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-soft)}.like-button:disabled{cursor:default;opacity:.85}.like-button-wrap{display:inline-block;position:relative}.like-thanks{white-space:nowrap;background:var(--color-accent,#2563eb);color:#fff;opacity:0;pointer-events:none;border-radius:999px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;transition:opacity .2s,transform .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%,8px)}.like-thanks.is-visible{opacity:1;transform:translate(-50%)}.comment-section{margin-top:var(--space-7);border-top:1px solid var(--color-border);padding-top:var(--space-5)}.comment-list{margin:0 0 var(--space-5);padding:0;list-style:none}.comment-item{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.comment-author{margin:0 0 var(--space-1);font-weight:700}.comment-reply-btn{color:var(--color-accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:.8rem;text-decoration:underline}.comment-reply-btn:hover{color:var(--color-accent-dark)}.comment-replies{margin:var(--space-3) 0 0;padding:0 0 0 var(--space-5);border-left:2px solid var(--color-border);list-style:none}.comment-replies .comment-item:last-child{border-bottom:none}.comment-reply-banner{background:var(--color-accent-soft);color:var(--color-accent-dark);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);margin:0;font-size:.875rem}.comment-reply-cancel{color:inherit;cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.comment-form{gap:var(--space-4);flex-direction:column;max-width:480px;display:flex}.comment-form input,.comment-form textarea{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem}.comment-form input:focus-visible,.comment-form textarea:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.comment-form button[type=submit]{padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);background:var(--color-accent);color:#fff;cursor:pointer;border:none;align-self:flex-start;min-height:44px;font-size:1rem;transition:background .15s}.comment-form button[type=submit]:hover:not(:disabled){background:var(--color-accent-dark)}.honeypot{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}.turnstile-widget{min-height:65px}.ranking-list{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.ranking-item{align-items:center;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex}.ranking-rank{color:var(--color-accent);flex-shrink:0;min-width:2rem;font-size:1.5rem;font-weight:700}.ranking-item h2{margin:0 0 var(--space-1);font-size:1.05rem}.ranking-item h2 a{color:var(--color-text);text-decoration:none}.ranking-item h2 a:hover{color:var(--color-accent)}a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.preview-banner{border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);color:#3730a3;background:#eef2ff;border:1px solid #c7d2fe;font-size:.9rem}.preview-footnote{color:var(--color-muted);margin-top:var(--space-6);border-top:1px dashed var(--color-border);padding-top:var(--space-4);font-size:.85rem}.social-links{margin:var(--space-6) 0}.social-links-heading{margin:0 0 var(--space-3);font-weight:700}.social-links-list{gap:var(--space-3);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.social-link{align-items:center;gap:var(--space-3);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;display:inline-flex}.social-link:hover,.social-link:focus-visible{border-color:var(--color-accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.social-link-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.social-link-icon svg{width:22px;height:22px}.social-links--compact .social-link{padding:var(--space-3);min-width:44px;min-height:44px}.social-links--compact .social-link-icon svg{width:22px;height:22px}.social-links--full .social-links-list{flex-direction:column}.social-links--full .social-link-item{width:100%}.social-links--full .social-link{padding:var(--space-4) var(--space-5);width:100%}.social-links--full .social-link-icon{background:var(--color-accent-soft);width:44px;height:44px;color:var(--color-accent);border-radius:999px}.social-link-text{flex-direction:column;gap:.15rem;display:flex}.social-link-desc{color:var(--color-muted);font-size:.85rem;font-weight:400}@media (width>=640px){.social-links--full .social-links-list{flex-flow:wrap}.social-links--full .social-link-item{width:calc(50% - var(--space-3) / 2)}}.edit-history{margin:var(--space-5) 0;padding:var(--space-4) var(--space-5);background:var(--color-surface);border-radius:var(--radius-md);font-size:.875rem}.edit-history summary{cursor:pointer;font-weight:600}.edit-history-list{margin:var(--space-3) 0 0;gap:var(--space-2);flex-direction:column;padding:0;list-style:none;display:flex}.edit-history-list li{padding-top:var(--space-2);border-top:1px solid var(--color-border)}.edit-history-list li:first-child{border-top:none;padding-top:0}.edit-history-meta{color:var(--color-muted);margin-top:.15rem;font-size:.8rem;display:block}.breadcrumb{color:var(--color-muted);margin-bottom:var(--space-4);font-size:.8rem}.breadcrumb a{color:var(--color-muted);text-decoration:underline}.breadcrumb a:hover{color:var(--color-accent)}.related-posts{margin:var(--space-7) 0;padding-top:var(--space-5);border-top:1px solid var(--color-border)}.related-posts h2{margin-top:0}.related-posts-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.related-posts-list a{padding:var(--space-3) var(--space-4);background:var(--color-surface);border-radius:var(--radius-md);color:var(--color-text);font-weight:600;text-decoration:none;transition:background-color .15s;display:block}.related-posts-list a:hover{background:var(--color-accent-soft);color:var(--color-accent-dark)}.series-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-5) 0}.series-heading{margin:0 0 var(--space-3);font-size:.95rem;font-weight:700}.series-list{margin:0 0 var(--space-3);gap:var(--space-1);flex-direction:column;padding:0;list-style:none;display:flex}.series-item{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:.9rem}.series-item a{color:var(--color-muted);text-decoration:none}.series-item a:hover{color:var(--color-accent);text-decoration:underline}.series-item--current{background:var(--color-accent-soft);color:var(--color-accent);font-weight:700}.series-pager{justify-content:space-between;gap:var(--space-3);border-top:1px dashed var(--color-border);padding-top:var(--space-3);display:flex}.series-pager-link{color:var(--color-accent);font-size:.9rem;font-weight:700;text-decoration:none}.series-pager-link:hover{text-decoration:underline}.series-pager-link--next{margin-left:auto}.input-checker{gap:var(--space-6);margin-top:var(--space-5);flex-direction:column;display:flex}.input-checker-section{border:1px solid var(--color-border);padding:var(--space-5);border-radius:12px}.input-checker-hint{color:var(--color-muted);margin-top:var(--space-2);font-size:.9rem}.input-checker-warning{color:#b45309;padding:var(--space-3);margin:var(--space-3) 0;background:#fef3c7;border-radius:8px;font-size:.9rem}.key-held-box{gap:var(--space-2);min-height:4rem;padding:var(--space-3);border:1px dashed var(--color-border);margin:var(--space-3) 0;border-radius:8px;flex-wrap:wrap;align-items:center;display:flex}.key-held-empty{color:var(--color-muted);font-size:.9rem}.key-chip{padding:var(--space-2) var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;flex-direction:column;align-items:center;gap:2px;font-size:.95rem;font-weight:700;display:inline-flex}.key-chip small{color:var(--color-muted);font-size:.7rem;font-weight:400}.key-chip-active{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:0 0 0 2px var(--color-accent-soft)}.key-log-list{border:1px solid var(--color-border);border-radius:8px;max-height:220px;margin:0;padding:0;list-style:none;overflow-y:auto}.key-log-list li{gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);align-items:baseline;font-size:.85rem;display:flex}.key-log-list li:last-child{border-bottom:none}.key-log-list time{color:var(--color-muted);margin-left:auto;font-size:.75rem}.key-log-empty{color:var(--color-muted);padding:var(--space-3)}.mouse-stats{gap:var(--space-4);margin:var(--space-3) 0;flex-wrap:wrap;font-size:.9rem;display:flex}.mouse-pad{border:2px dashed var(--color-border);background:var(--color-bg);cursor:crosshair;-webkit-user-select:none;user-select:none;border-radius:12px;height:220px;position:relative;overflow:hidden}.mouse-pad-label{color:var(--color-muted);pointer-events:none;font-size:.85rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mouse-click-mark{pointer-events:none;border-radius:50%;width:24px;height:24px;margin-top:-12px;margin-left:-12px;animation:.6s ease-out forwards mouse-click-fade;position:absolute}.mouse-click-left{background:#2563eb80}.mouse-click-right{background:#dc262680}.mouse-click-middle{background:#16a34a80}@keyframes mouse-click-fade{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2)}}.input-checker-reset{padding:var(--space-3) var(--space-5);border:1px solid var(--color-border);cursor:pointer;background:#fff;border-radius:999px;align-self:flex-start;font-size:.9rem}.input-checker-reset:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}