.m-head{padding-bottom:330px}.crumbs{font-family:var(--f-mono);color:var(--ink-2);justify-content:center;gap:8px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.crumbs a{color:var(--ink-2)}.crumbs li+li:before{content:"/";margin-right:8px}#try.m-main{margin-top:-160px}@media (max-width:900px){#try.m-main{margin-top:-100px}}@media (max-width:760px){.m-head{padding-bottom:230px}}#examples .demos{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:900px;margin:0 auto}@media (max-width:700px){#examples .demos{grid-template-columns:repeat(2,minmax(0,1fr))}}.makers{border-top:var(--b);display:grid}.maker{border-bottom:var(--b);color:var(--ink);grid-template-columns:56px minmax(0,1fr) minmax(0,1.1fr) 48px;align-items:center;gap:24px;padding:22px 16px;text-decoration:none;transition:background .15s;display:grid}.maker:hover{color:var(--ink);background:color-mix(in oklch, var(--c) 55%, var(--paper))}.maker .no{font-family:var(--f-mono);color:var(--ink-2);font-size:14px}.maker .nm{font-family:var(--f-head);font-size:clamp(24px,3vw,34px);line-height:1.1}.maker .ex{align-items:center;gap:12px;min-width:0;display:flex}.maker .tile{border:2px solid var(--ink);background:var(--c);border-radius:7px;flex:0 0 28px;width:28px;height:44px}.maker .ex span{color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.maker .go{border:var(--b);background:var(--white);border-radius:50%;place-items:center;width:44px;height:44px;font-weight:800;transition:transform .15s;display:grid}.maker:hover .go{background:var(--butter);transform:rotate(-45deg)}@media (max-width:760px){.maker{grid-template-columns:36px minmax(0,1fr) 44px;gap:14px}.maker .ex{grid-area:2/2}.maker .go{grid-area:1/3/3}}.tips{gap:12px;margin-top:24px;padding:26px 30px;display:grid}.tips h3{font-size:24px}.tips ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.tips li{color:var(--ink-2);gap:10px;display:flex}.tips li:before{content:"";border:2px solid var(--ink);background:var(--c,var(--butter));border-radius:50%;flex:0 0 10px;width:10px;height:10px;margin-top:8px}@media (max-width:640px){.m-head{padding-bottom:190px}#examples .demos{gap:14px;max-width:none;margin:0 -24px}.tips{padding:18px}}@media (max-width:420px){#examples .demos{margin:0 -16px}}
