body[data-demo-project]{padding-bottom:calc(var(--demo-bar-height,100px) + 64px)!important}
.demo-publication-note{box-sizing:border-box;max-width:1200px;margin:24px auto;padding:18px 24px;border:1px solid #d8ddd9;background:#fff;color:#303632;font:14px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif;text-align:left;letter-spacing:normal}.demo-publication-note strong{display:block;color:#151716}.demo-publication-note a{color:inherit;text-decoration:underline}
.portfolio-demo-bar{position:fixed;inset:auto 0 0;z-index:9999;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px max(20px,calc((100vw - 1440px)/2));background:#fff;color:#151716;border-top:1px solid #d8ddd9;box-shadow:0 -5px 30px #0000000a;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif;letter-spacing:0;text-align:left}
.portfolio-demo-bar strong{font-size:13px;color:#151716;display:block}.portfolio-demo-bar small{display:block;color:#626762;font-size:11px}
.portfolio-demo-bar nav{display:flex;align-items:center;gap:10px;flex-shrink:0}.portfolio-demo-bar a{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border:1px solid #d8ddd9;border-radius:24px;text-decoration:none;color:#151716;box-sizing:border-box;font:inherit;background:#fff}
.portfolio-demo-bar a:last-child{background:#151716;color:white;border-color:#151716}.portfolio-demo-bar a:focus-visible{outline:3px solid #244bfb;outline-offset:3px}
body[data-demo-project] .float-cta{bottom:var(--demo-bar-height,100px)!important}
#demo-information{color:#151716;background:#fff;border:1px solid #d8ddd9;border-radius:16px;padding:28px;max-width:480px;width:calc(100% - 32px);box-sizing:border-box;font:15px/1.8 sans-serif}
#demo-information::backdrop{background:#0008}#demo-information h2{font-size:20px;color:#151716;margin:0 0 12px}#demo-information button{display:block;margin:20px 0 0 auto;padding:10px 22px;min-height:44px;background:#151716;color:#fff;border:0;border-radius:24px;font:inherit;cursor:pointer}
.demo-form-note,.demo-form-result{padding:18px;border:1px solid #9996;margin:20px 0;font-size:14px;line-height:1.8}
@media(max-width:700px){.portfolio-demo-bar{flex-direction:column;align-items:stretch;padding:10px 16px;gap:7px}.portfolio-demo-bar nav{gap:8px}.portfolio-demo-bar a{flex:1;justify-content:center;font-size:11px;padding:7px}.portfolio-demo-bar small{font-size:10px}}
body[data-demo-project] .has-drop:focus-within .drop{opacity:1;visibility:visible}
body[data-demo-project] .filter-tabs button{scroll-margin-top:120px}
@media(max-width:980px){body[data-demo-project] .gnav.open{max-height:calc(100dvh - 145px - var(--demo-bar-height,100px));overflow:auto}}

.demo-table-scroll{width:100%;max-width:100%;overflow-x:auto}.demo-table-hint{display:none}@media(max-width:650px){.demo-table-hint{display:block;font-size:11px;opacity:.7}.demo-table-scroll:focus-visible{outline:2px solid #b9a797;outline-offset:3px}}

/* Keep sample copy readable over the portrait on small screens. */
@media(max-width:650px){
 body[data-demo-project="kusano"] .hero::after{background:linear-gradient(110deg,rgba(249,246,241,.95),rgba(249,246,241,.82))}
 body[data-demo-project="kusano"] .hero-inner{padding-inline:24px}
 body[data-demo-project="kusano"] .hero h1{font-size:clamp(21px,6.4vw,28px);letter-spacing:.03em}
 body[data-demo-project="kusano"] .hero p{font-size:14px}
 body[data-demo-project] .hamb{min-width:44px;min-height:44px;padding:8px}
}