/* 本文专属组件样式 */

.ap-btn{font-family:var(--sans);font-size:.8rem;background:transparent;color:var(--ink-2);border:1px solid var(--line-2);padding:.42rem .8rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ap-btn:hover:not(:disabled){border-color:var(--ink-2);color:var(--ink)}
.ap-btn:focus-visible,.ap-tile:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.ap-btn:disabled{opacity:.4;cursor:default}
.ap-btn[aria-pressed="true"]{border-color:var(--mark);color:var(--mark);background:var(--mark-dim)}
.ap-btn.is-primary{background:var(--mark);border-color:var(--mark);color:var(--on-mark);font-weight:700}
.ap-btn.is-primary:hover:not(:disabled){filter:brightness(1.1);color:var(--on-mark)}
.ap-tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.ap-label{margin:.9rem 0 .4rem!important;font-size:.76rem;color:var(--ink-3)!important}
.w-ap>.ap-label:first-child{margin-top:0!important}

/* change-ripple */
.ap-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:1rem}
.ap-mod{padding:.75rem .5rem;text-align:center;font-size:.86rem;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--line-2);transition:color .25s,border-color .25s,background .25s,transform .25s var(--ease)}
.ap-mod.is-hit{color:var(--ir);border-color:var(--ir);background:color-mix(in srgb,var(--ir) 14%,transparent);transform:translateY(-2px)}
.ap-count{margin:.9rem 0 0!important;font-size:.92rem;color:var(--ink)!important}
.ap-count b{font-family:var(--mono);font-size:1.4rem;color:var(--ir)}

/* arch-dims */
.ap-dims{margin-top:.9rem}
.ap-dim{display:grid;grid-template-columns:5.2rem minmax(0,1fr) 1.4rem;align-items:center;gap:.6rem;margin-top:.45rem}
.ap-dim-name{font-size:.8rem;color:var(--ink-2)}
.ap-dim b{font-size:.8rem;color:var(--ink);text-align:right}
.ap-track{display:block;height:.8rem;background:var(--bg-2);border:1px solid var(--line)}
.ap-fill{display:block;height:100%;width:100%;transform-origin:left center;background:var(--ink-3);transition:transform .4s var(--ease),background .3s}
.ap-fill.is-high{background:var(--mark)}
.ap-why{margin:.9rem 0 0!important;font-size:.92rem;line-height:1.65;color:var(--ink)!important}

/* pattern-map */
.ap-cols{display:grid;grid-template-columns:5fr 7fr 11fr;gap:.9rem}
.ap-col .ap-label{margin-top:0!important}
.ap-group{display:flex;flex-wrap:wrap;gap:.3rem}
.ap-tile{font-family:var(--sans);font-size:.78rem;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line-2);padding:.42rem .55rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ap-tile:hover{border-color:var(--ink-2);color:var(--ink)}
.ap-tile[aria-pressed="true"]{border-color:var(--mark);color:var(--on-mark);background:var(--mark)}
.ap-detail{margin-top:1rem;padding:.85rem .95rem;min-height:9.5rem;background:var(--render-bg);border:1px solid var(--line)}
.ap-d-kind{font-size:.74rem;color:var(--ink-3)}
.ap-d-name{margin:.15rem 0 .45rem!important;font-size:1.1rem;font-weight:700;color:var(--mark)}
.ap-d-text{margin:.2rem 0 0!important;font-size:.88rem;line-height:1.6;color:var(--ink)!important}
.ap-d-text b{color:var(--ink-2);font-weight:600}

/* decorator-chain */
.ap-flow{list-style:none;margin:.9rem 0 0!important;padding:0!important}
.ap-flow li{display:grid;grid-template-columns:8.2rem minmax(0,1fr);gap:.6rem;align-items:baseline;margin:0!important;padding:.4rem .6rem;border:1px solid var(--line);border-bottom-width:0;background:var(--bg-2)}
.ap-flow li:last-child{border-bottom-width:1px}
.ap-flow li span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.ap-flow li.is-end span{font-family:var(--sans)}
.ap-flow li code{font-size:.84rem;color:var(--ink);overflow-wrap:anywhere;background:transparent}
.ap-flow li.is-end{border-color:var(--mark);background:var(--mark-dim)}
.ap-flow li.is-end code{color:var(--mark)}

/* pattern-diff */
.ap-difftable{margin-top:.9rem;overflow-x:auto}
.ap-difftable table{width:100%;margin:0!important}

/* pattern-quiz */
.ap-scene{margin:.1rem 0 .85rem!important;min-height:3.2em;font-size:1rem;line-height:1.6;color:var(--ink)!important}
.ap-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.ap-opt{padding:.6rem .8rem;text-align:center}
.ap-opt:disabled{opacity:.55}
.ap-opt.is-right{opacity:1;border-color:var(--mark);color:var(--mark);background:var(--mark-dim)}
.ap-opt.is-wrong{opacity:1;border-color:var(--ir);color:var(--ir)}
.ap-result{margin:.8rem 0!important;min-height:3.2em;font-size:.9rem;line-height:1.6;color:var(--ink)!important}

/* 首屏 */
.aph-svg{width:100%;height:auto;display:block}
.aph-title{font-family:var(--sans);fill:var(--ink-2)}
.aph-tile rect{fill:var(--panel);stroke:var(--line-2);transition:fill .3s,stroke .3s}
.aph-tile text{font-family:var(--sans);fill:var(--ink-3);transition:fill .3s}
.aph-tile.is-on rect{fill:var(--mark);stroke:var(--mark)}
.aph-tile.is-on text{fill:var(--on-mark)}

@media (max-width:640px){
  .ap-cols{grid-template-columns:1fr}
  .ap-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-flow li{grid-template-columns:minmax(0,1fr);gap:.1rem}
}