.tag-stage{padding-bottom:250px}.tag{--fk-width:380px;gap:8px}[data-hue=rose]{--tag-hue:#e5484d}[data-hue=amber]{--tag-hue:#e08a00}[data-hue=lime]{--tag-hue:#3e9b2f}[data-hue=teal]{--tag-hue:#12a594}[data-hue=sky]{--tag-hue:#0b8ad9}[data-hue=violet]{--tag-hue:#7c5cdb}.tag-box{position:relative;display:flex;min-height:56px;padding:11px 10px 10px;border-radius:14px;background:var(--fk-surface);cursor:text}.tag-outline{position:absolute;inset:-6px 0 0;min-width:0;margin:0;padding:0 0 0 10px;border:1.8px solid var(--fk-line);border-radius:inherit;pointer-events:none;transition:border-color .18s}.tag-outline legend{display:block;width:auto;height:11px;padding:0;font-size:12px;font-weight:550;line-height:11px;white-space:nowrap;visibility:hidden}.tag-outline legend>span{display:inline-block;padding:0 5px}.tag-box:focus-within .tag-outline{border-color:var(--fk-ink)}.tag-label{position:absolute;top:0;left:15px;color:var(--fk-muted);font-size:12px;font-weight:550;line-height:1;translate:0 -50%;transition:color .18s}.tag-box:focus-within .tag-label{color:var(--fk-ink)}.tag-chips{display:flex;flex:1;flex-wrap:wrap;min-width:0}.tag-chip,.tag-chips{align-items:center;gap:6px}.tag-chip{--tag-fill:1;display:inline-flex;flex:none;height:30px;padding:0 3px 0 8px;border-radius:9px;background:color-mix(in oklab,color-mix(in oklab,var(--tag-hue) 13%,var(--fk-surface)) calc(var(--tag-fill) * 100%),transparent);color:color-mix(in oklab,var(--tag-hue) 62%,var(--fk-ink));font-size:13.5px;font-weight:600;white-space:nowrap;outline:none;transition:background-color .15s,color .15s}.dark .tag-chip{background:color-mix(in oklab,color-mix(in oklab,var(--tag-hue) 32%,var(--fk-surface)) calc(var(--tag-fill) * 100%),transparent);color:color-mix(in oklab,var(--tag-hue) 45%,white)}.tag-dot{flex:none;width:calc(var(--tag-fill, 1) * 7px);height:7px;border-radius:50%;background:var(--tag-hue);scale:var(--tag-fill,1)}.tag-chip button{display:grid;place-items:center;width:22px;max-width:calc(var(--tag-fill) * 22px);height:22px;padding:0;overflow:hidden;border:0;border-radius:6px;background:none;color:inherit;opacity:calc(var(--tag-fill) * .6);cursor:pointer;transition:opacity .15s,background-color .15s}@media (hover:hover) and (pointer:fine){.tag-chip button:hover{background:color-mix(in oklab,var(--tag-hue) 16%,transparent);opacity:1}}.tag-chip[data-flown] button{animation:tag-remove-in .4s cubic-bezier(.32,.72,0,1) .12s backwards}@keyframes tag-remove-in{0%{max-width:0;opacity:0}}.tag-chip svg{width:12px;height:12px}.tag-chip:focus-within,.tag-chip[data-highlighted]{background:var(--tag-hue);color:#fff}.tag-chip:focus-within .tag-dot,.tag-chip[data-highlighted] .tag-dot{background:#fff}.tag-input{flex:1 0 96px;height:30px;padding-left:4px;font-size:14px}.tag-input[readonly]{flex-basis:0}.tag-foot{display:flex;justify-content:space-between;padding:0 4px;color:var(--fk-muted);font-size:12px;transition:opacity .15s}.tag[data-open] .tag-foot{opacity:0}.tag-counter{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums;transition:color .2s}.tag-counter[data-full]{color:var(--fk-warn);font-weight:600}.tag-popup{--fk-surface:#ffffff;--fk-well:#f5f5f1;--fk-ink:#1f1f1d;--fk-muted:#817f77;display:flex;flex-direction:column;width:var(--anchor-width);max-height:min(296px,var(--available-height,70dvh));overflow:hidden;border:1px solid rgb(0 0 0/.06);border-radius:18px;background:var(--fk-surface);box-shadow:0 1px 2px rgb(0 0 0/.05),0 12px 28px -20px rgb(0 0 0/.16);color:var(--fk-ink);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif;font-size:14px;outline:none;-webkit-font-smoothing:antialiased;clip-path:inset(-60px -60px -60px -60px round 18px);transition:clip-path .42s cubic-bezier(.32,.72,0,1),transform .42s cubic-bezier(.32,.72,0,1),opacity .2s ease-out}.tag-popup[data-ending-style],.tag-popup[data-starting-style]{clip-path:inset(-60px -60px 100% -60px round 18px);opacity:.4;transform:translateY(-6px)}.tag-popup[data-side=top][data-ending-style],.tag-popup[data-side=top][data-starting-style]{clip-path:inset(100% -60px -60px -60px round 18px);transform:translateY(6px)}.tag-popup[data-ending-style]{opacity:0;transition:clip-path .2s cubic-bezier(.4,0,1,1),transform .2s cubic-bezier(.4,0,1,1),opacity .2s ease-in}.dark .tag-popup{--fk-surface:#1c1c1f;--fk-well:#2a2a2f;--fk-ink:#fafafa;--fk-muted:#a1a1aa;border-color:rgb(255 255 255/.07);box-shadow:0 1px 2px rgb(0 0 0/.28),0 12px 28px -20px rgb(0 0 0/.48)}.tag-empty:not(:empty){padding:14px 16px;color:var(--fk-muted);font-size:14px}.tag-list{min-height:0;padding:5px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;mask-image:linear-gradient(180deg,transparent,#000 6px,#000 calc(100% - 10px),transparent)}.tag-list::-webkit-scrollbar{display:none}.tag-row{position:relative;display:flex;align-items:center;height:42px;padding:0 6px;border-radius:12px;cursor:pointer;outline:none;user-select:none}.tag-row-highlight{position:absolute;inset:0;border-radius:inherit;background:var(--fk-well);pointer-events:none}.tag-chip.tag-word{background:none;color:var(--fk-ink)}.tag-chip.tag-word,.tag-create{position:relative;gap:10px;font-size:15px;font-weight:500;letter-spacing:-.01em}.tag-create{display:flex;align-items:center;padding:0 8px;color:var(--fk-muted)}.tag-create svg{width:14px;height:14px}@media (prefers-reduced-motion:reduce){.tag-popup,.tag-popup[data-ending-style]{transition:opacity .15s}.tag-popup[data-ending-style],.tag-popup[data-side=top][data-ending-style],.tag-popup[data-side=top][data-starting-style],.tag-popup[data-starting-style]{clip-path:inset(-60px -60px -60px -60px round 18px);transform:none}}