.display-mode-control{position:relative}.display-mode-popover{z-index:70;border:1px solid var(--color-border);background:var(--color-bg-primary);width:min(440px,100vw - 32px);max-height:70dvh;color:var(--color-text-primary);border-radius:14px;padding:14px;position:absolute;top:100%;left:0;overflow:auto;box-shadow:0 12px 48px #0007}.display-mode-popover label{flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;font-size:12px;display:flex}.display-mode-popover input[type=range]{width:100%;accent-color:var(--color-accent)}.display-mode-popover output{font-variant-numeric:tabular-nums;margin-left:auto}.display-mode-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0;display:grid}.display-mode-options button{text-align:left;border:1px solid var(--color-border);border-radius:8px;align-items:center;gap:8px;padding:8px;font-size:11px;display:flex}.display-mode-options button[aria-pressed=true],.display-quick button[aria-pressed=true]{border-color:var(--color-accent);color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}.mode-swatch{flex-shrink:0;grid-template-columns:repeat(3,1fr);gap:2px;width:32px;height:23px;display:grid}.mode-swatch i{opacity:.45;background:currentColor;border-radius:2px}.mode-swatch.mode-list,.mode-swatch.mode-single-line,.mode-swatch.mode-text{grid-template-columns:1fr}.mode-swatch[class*=round] i{border-radius:50%}.mode-swatch[class*=overlay] i{background:linear-gradient(#0000,currentColor)}.display-quick{flex-wrap:wrap;gap:5px;display:flex}.display-quick button{border:1px solid var(--color-border);border-radius:6px;padding:5px 9px;font-size:11px}.display-items{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.display-slot{height:100%;padding-right:var(--display-gap-x);padding-bottom:var(--display-gap-y)}.display-card{min-width:0;height:100%;padding:var(--display-padding);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:10px;flex-direction:column;gap:8px;display:flex;position:relative;overflow:hidden}.display-art{border-radius:6px;flex:1;min-height:0;position:relative;overflow:hidden}.display-art>*,.display-art img,.display-art>*>button:first-child{width:100%!important;height:100%!important}.display-art img{object-fit:contain}.display-copy{z-index:1;min-width:0;position:relative}.display-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:600;display:-webkit-box;overflow:hidden}.display-title button{text-align:left}.display-meta{color:var(--color-text-secondary);flex-wrap:wrap;gap:4px 10px;max-height:3.2em;font-size:12px;display:flex;overflow:hidden}.display-meta button:hover{text-decoration:underline}.display-actions{z-index:2;flex-shrink:0;align-items:center;gap:5px;display:flex}.display-card>.display-actions{background:var(--color-bg-secondary);opacity:0;border-radius:8px;padding:2px;transition:opacity .15s;position:absolute;top:5px;right:5px}.display-card:hover>.display-actions,.display-card:focus-within>.display-actions{opacity:1}.mode-list .display-card,.mode-single-line .display-card,.mode-text .display-card,.mode-landscape .display-card,.mode-landscape-round .display-card{flex-direction:row;align-items:center}.mode-list .display-art{flex:none;width:64px;height:64px}.mode-list .display-copy,.mode-single-line .display-copy,.mode-text .display-copy{flex:1}.mode-single-line .display-art{flex:none;width:28px;height:28px}.mode-single-line .display-copy{align-items:center;gap:16px;display:flex}.mode-single-line .display-title,.mode-single-line .display-meta{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;max-height:1.6em}.mode-text .display-art{display:none}.mode-text .display-card{background:0 0;border:0}.mode-landscape .display-art,.mode-landscape-round .display-art{flex:none;width:38%;height:100%}.mode-landscape .display-copy,.mode-landscape-round .display-copy{flex:1}.mode-round-grid .display-art,.mode-round-card .display-art,.mode-round-image .display-art{aspect-ratio:1;border-radius:50%}.mode-round-grid .display-card,.mode-round-image .display-card,.mode-image-grid .display-card{background:0 0;border:0}.mode-round-grid .display-copy,.mode-round-card .display-copy{text-align:center}.mode-round-grid .display-meta,.mode-round-card .display-meta{justify-content:center}.mode-image-grid .display-copy,.mode-round-image .display-copy{color:#fff;opacity:0;background:#000c;padding:8px;transition:opacity .15s;position:absolute;bottom:8px;left:8px;right:8px}.mode-image-grid .display-card:is(:hover,:focus-within) .display-copy,.mode-round-image .display-card:is(:hover,:focus-within) .display-copy{opacity:1}.mode-overlay-grid .display-art,.mode-vertical-overlay .display-art,[class*=mode-landscape-background] .display-art,.mode-landscape-overlay .display-art{position:absolute;inset:0}.mode-overlay-grid .display-art img,.mode-vertical-overlay .display-art img,[class*=mode-landscape-background] .display-art img,.mode-landscape-overlay .display-art img{object-fit:cover}.mode-overlay-grid .display-card,.mode-vertical-overlay .display-card,[class*=mode-landscape-background] .display-card,.mode-landscape-overlay .display-card{justify-content:flex-end}.mode-overlay-grid .display-copy,.mode-vertical-overlay .display-copy,[class*=mode-landscape-background-overlay] .display-copy,.mode-landscape-overlay .display-copy{margin:calc(-1 * var(--display-padding));color:#fff;background:linear-gradient(#0000,#000e);padding:24px 12px 12px}.mode-overlay-grid .display-meta,.mode-vertical-overlay .display-meta,[class*=mode-landscape-background-overlay] .display-meta,.mode-landscape-overlay .display-meta{color:#eee}.mode-landscape-background .display-copy,.mode-landscape-background-round .display-copy{background:color-mix(in srgb,var(--color-bg-primary) 92%,transparent);border-radius:8px;margin-left:30%;padding:10px}.mode-landscape-round .display-card,.mode-landscape-background-round .display-card,.mode-landscape-background-overlay-round .display-card{border-radius:28px}.artwork-action{border-radius:6px;flex-shrink:0;display:inline-flex;position:relative;overflow:hidden}.artwork-action .artwork-start{color:#fff;opacity:0;background:#0008;justify-content:center;align-items:center;transition:opacity .18s;display:flex;position:absolute;inset:0}.artwork-action:hover .artwork-start,.artwork-action:focus-within .artwork-start{opacity:1}.artwork-start span{background:#0009;border:1px solid #ffffff80;border-radius:50%;place-items:center;width:75%;max-width:48px;height:75%;max-height:48px;display:grid}.artwork-action:focus-within{outline:2px solid var(--color-accent)}@media (hover:none){.artwork-action .artwork-start{opacity:1;background:#0003}.display-card>.display-actions{opacity:1}.display-mode-options button{min-height:44px}}@media (prefers-reduced-motion:reduce){.artwork-action .artwork-start{transition:none}}[role=dialog][data-side=true]{border-radius:0!important;width:min(520px,100vw)!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;position:fixed!important;top:0!important;bottom:0!important;right:0!important}