.txm{padding-bottom:var(--sp-section)}.txm-bar{top:var(--header-h);z-index:5;justify-content:space-between;align-items:center;gap:var(--sp-12) var(--sp-24);padding:var(--sp-12) 0;background:var(--paper);border-bottom:1px solid var(--line-soft);flex-wrap:nowrap;display:flex;position:sticky}.txm-filter{gap:var(--sp-8);scrollbar-width:none;flex-wrap:nowrap;flex:1;min-width:0;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),#0000)}.txm-filter::-webkit-scrollbar{display:none}.txm-filter button{white-space:nowrap;flex:none}.txm-anim{flex:none}.txm-filter button,.txm-anim span{align-items:baseline;gap:var(--sp-8);min-height:40px;padding:0 var(--sp-16);font:inherit;font-size:var(--fs-s);color:var(--ink);background:var(--sheet);border:1px solid var(--line);cursor:pointer;transition:background-color var(--dur-color),color var(--dur-color),border-color var(--dur-color);border-radius:999px;align-items:center;font-weight:700;display:inline-flex}.txm-filter button:hover,.txm-anim span:hover{border-color:var(--ink)}.txm-filter button[aria-pressed=true],.txm-anim input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}.txm-filter small,.txm-anim small{font-size:var(--fs-xs);opacity:.6;font-variant-numeric:tabular-nums}.txm-anim{cursor:pointer;position:relative}.txm-anim input{opacity:0;pointer-events:none;position:absolute}.txm-anim input:focus-visible+span,.txm-filter button:focus-visible{outline:2px solid var(--entrust);outline-offset:2px}.txm-count{margin:var(--sp-16) 0 var(--sp-24);font-size:var(--fs-xs);color:var(--ink-3)}.txm-grid{gap:var(--sp-32) 24px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.txm-tile[hidden]{display:none}.txm-tile{gap:var(--sp-12);scroll-margin-top:calc(var(--header-h) + 96px);flex-direction:column;display:flex}.txm-open{aspect-ratio:4/3;border:1px solid var(--line-soft);border-radius:var(--r-m);cursor:zoom-in;width:100%;transition:transform .5s var(--ease),box-shadow .5s var(--ease);background:0 0;padding:0;display:block;position:relative;overflow:hidden}.txm-open:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px #00000073}.txm-open:focus-visible{outline:2px solid var(--entrust);outline-offset:3px}.tx{display:block;position:absolute;inset:0}.txm-tile:not(.is-play) .tx,.txm-tile:not(.is-play) .tx:after{animation-play-state:paused}.txm-badge{right:var(--sp-8);top:var(--sp-8);z-index:2;padding:2px var(--sp-8);font-size:var(--fs-xs);color:var(--paper);background:var(--ink);border-radius:999px;font-weight:700;position:absolute}.txm-meta{gap:var(--sp-4);display:grid}.txm-head{align-items:baseline;gap:var(--sp-8);flex-wrap:wrap;margin:0;display:flex}.txm-head b{overflow-wrap:anywhere;min-width:0;font-size:var(--fs-s);font-weight:800;line-height:1.5}.txm-code{padding:2px var(--sp-8);font:700 var(--fs-xs)/1.4 var(--mono);color:var(--cyan-deep);background:var(--paper);border:1px solid var(--line);cursor:copy;border-radius:6px;flex:none}.txm-code:hover{border-color:var(--cyan-deep)}.txm-use{font-size:var(--fs-xs);color:var(--ink-3);margin:0;line-height:1.7}.txm-use span{margin-right:var(--sp-8);color:var(--ink-2);font-weight:700}.txd{width:min(1180px,calc(100vw - 2 * var(--gutter)));max-width:none;max-height:calc(100dvh - 2 * var(--gutter));border-radius:var(--r-l);background:var(--sheet);color:var(--ink);border:0;padding:0;overflow:auto;box-shadow:0 40px 80px -30px #0009}.txd::backdrop{background:#0e10149e}.txd-frame{grid-template-columns:minmax(0,1fr) 300px;display:grid}.txd-site{min-height:min(640px,72dvh);position:relative;overflow:hidden}.txd-mock{z-index:2;height:100%;padding:var(--sp-24) var(--sp-32) var(--sp-48);color:#1b1d21;flex-direction:column;display:flex;position:relative}.txd-mock.is-dark{color:#f4f4f1}.txd-nav{align-items:center;gap:var(--sp-24);font-size:var(--fs-s);display:flex}.txd-logo{font-size:var(--fs-l);letter-spacing:.04em;margin-right:auto;font-weight:800}.txd-hero{gap:var(--sp-16);justify-items:start;max-width:34em;margin-top:auto;display:grid}.txd-kicker{font-size:var(--fs-xs);letter-spacing:.2em;opacity:.75;margin:0}.txd-h{font-size:var(--fs-4xl);letter-spacing:.01em;margin:0;font-weight:800;line-height:1.2}.txd-lead{font-size:var(--fs-m);opacity:.85;margin:0;line-height:2}.txd-btn{min-height:48px;padding:0 var(--sp-24);font-weight:700;font-size:var(--fs-s);color:#f4f4f1;background:#1b1d21;border-radius:999px;align-items:center;display:inline-flex}.txd-mock.is-dark .txd-btn{color:#1b1d21;background:#f4f4f1}.txd-side{gap:var(--sp-12);padding:var(--sp-32) var(--sp-24);border-left:1px solid var(--line-soft);flex-direction:column;display:flex}.txd-id{font-size:var(--fs-s);color:var(--cyan-deep);margin:0;font-weight:700}.txd-title{font-size:var(--fs-xl);margin:0;font-weight:800;line-height:1.4}.txd-use{font-size:var(--fs-s);color:var(--ink-2);margin:0;line-height:1.8}.txd-acts{gap:var(--sp-8);margin-top:var(--sp-8);flex-wrap:wrap;display:flex}.txd-act{min-height:40px;padding:0 var(--sp-16);font:inherit;font-size:var(--fs-s);color:var(--ink);background:var(--sheet);border:1px solid var(--ink);cursor:pointer;transition:background-color var(--dur-color),color var(--dur-color);border-radius:999px;font-weight:700}.txd-act:hover{background:var(--ink);color:var(--paper)}.txd-note{font-size:var(--fs-xs);color:var(--ink-3);margin:0;line-height:1.7}.txd-move{align-items:center;gap:var(--sp-8);padding-top:var(--sp-24);margin-top:auto;display:flex}.txd-step{width:44px;height:44px;font:inherit;font-size:var(--fs-xl);color:var(--ink);background:var(--sheet);border:1px solid var(--line);cursor:pointer;border-radius:50%;place-items:center;line-height:1;display:grid}.txd-step:hover{border-color:var(--ink)}.txd-close{min-height:44px;padding:0 var(--sp-16);font:inherit;font-size:var(--fs-s);color:var(--paper);background:var(--ink);cursor:pointer;border:0;border-radius:999px;margin-left:auto;font-weight:700}.txd :focus-visible{outline:2px solid var(--entrust);outline-offset:2px}.txh{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;display:grid}.txh li{gap:var(--sp-8);padding:var(--sp-24);background:var(--sheet);border:1px solid var(--line-soft);border-radius:var(--r-m);font-size:var(--fs-s);color:var(--ink-2);line-height:1.8;display:grid}.txh b{font-size:var(--fs-m);color:var(--ink)}@media (width<=1023px){.txm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.txd-frame{grid-template-columns:minmax(0,1fr)}.txd-side{border-left:0;border-top:1px solid var(--line-soft)}.txh{grid-template-columns:minmax(0,1fr)}}@media (width<=719px){.txm-bar{position:static}.txm-grid{gap:var(--sp-24) var(--sp-12);grid-template-columns:repeat(2,minmax(0,1fr))}.txd-site{min-height:58dvh}.txd-mock{padding:var(--sp-16) var(--sp-16) var(--sp-24)}.txd-nav span{display:none}.txd-h{font-size:var(--fs-2xl)}}@media (width<=359px){.txm-grid{grid-template-columns:minmax(0,1fr)}}@media (pointer:coarse){.txm-filter button{min-height:44px}.txm-code{position:relative}.txm-code:after{content:"";position:absolute;inset:-11px -4px}}