@layer components{.perm{position:relative;padding:1.25rem 1.25rem 1rem;border-radius:var(--radius-panel);background:var(--role)}.perm-title{font-size:var(--text-h3);line-height:1.2;letter-spacing:-.015em}.perm-title b{font-weight:600}.perm-rows{margin-top:.75rem}.perm-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:.625rem;border-top:1px solid var(--color-line-2);font-size:var(--text-body);line-height:1.3}.perm-row dt{min-width:0}.perm-row dd{flex:none;font-weight:600}.perm-row.is-none dd{color:var(--color-ink-2);font-weight:500}.perm-preview{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.5rem;padding:.625rem .75rem;border-radius:var(--radius-control);background:var(--color-sheet);font-size:var(--text-small)}.perm-who{color:var(--color-ink-2)}.perm-count{margin-left:auto;font-weight:600}.perm-from{display:none}[data-perm] .is-change dd{display:inline-grid;justify-items:end;transition:transform var(--duration-ui) var(--ease-out)}[data-perm] .is-change dd>*{grid-area:1 / 1}[data-perm] .is-change .perm-from{display:inline;opacity:0}:where(.motion) [data-perm].is-before .is-change .perm-from{opacity:1}:where(.motion) [data-perm].is-before .is-change .perm-to{opacity:0}:where(.motion) [data-perm].is-before .is-change dd{color:var(--color-ink);font-weight:600}[data-perm] :is(.is-change dd>*,.perm-count){margin-inline:-.25rem;padding-inline:.25rem;border-radius:var(--radius-inner);transition:background-color var(--duration-state) linear}[data-perm] .perm-count{font-variant-numeric:tabular-nums}:where(.motion) [data-perm].is-lit :is(.is-change dd>.perm-to,.perm-count){background:color-mix(in srgb,var(--color-sheet) 70%,transparent)}:where(.motion) [data-perm].is-press .is-change dd{transform:scale(.95)}.perm-replay{position:relative;z-index:2;flex:none;margin:-.25rem -.375rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-control);color:var(--color-ink-2);transition:background-color var(--duration-ui) var(--ease-out),color var(--duration-ui) var(--ease-out)}.perm-replay:after{content:"";position:absolute;inset:-.375rem}.perm-replay:hover{background:color-mix(in srgb,var(--color-sheet) 60%,transparent);color:var(--color-ink)}.perm-replay .ico{width:1rem;height:1rem}.perm-replay:focus-visible{outline-offset:0}}