:is(.toolbar,.icon-button,.icon-group,.sidebar,.tabbar,.card>header,.stats-row,.settings,.rows,.row,.tiles,.search,.tooltip){hyphens:manual}

.tool:has(>.app){padding:0}
.tool:has(>.content){padding-inline:0}
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100dvh}
.app>.sidebar{position:sticky;top:0;height:100dvh;border-right:1px solid var(--line)}
.pane{min-width:0}
.content{width:100%;max-width:calc(var(--column-list) + 2*var(--s4));margin-inline:auto;padding:0 var(--s4) var(--s6)}
.content[data-width="read"]{max-width:calc(var(--column) + 2*var(--s4))}
.content[data-width="wide"]{max-width:calc(var(--column-wide) + 2*var(--s4))}
@media (max-width:40rem){
  .app{grid-template-columns:minmax(0,1fr)}
  .app>.sidebar{display:none}
  .app:has(>.tabbar)>.pane{padding-bottom:calc(var(--h-touch) + var(--s2) + var(--s1) + var(--float-bottom))}
  .content{padding-inline:max(var(--s4),env(safe-area-inset-left))}
}

.icon-button{position:relative;flex:none;width:var(--h-control);height:var(--h-control);min-height:0;padding:0;gap:0;
  border-color:transparent;background:transparent;color:var(--text-2);border-radius:var(--radius-s);
  transition:transform var(--t-fast) var(--ease),background-color var(--t-fast),color var(--t-fast)}
.icon-button .icon{width:var(--icon);height:var(--icon)}
.icon-button:active{background:var(--select);color:var(--text)}
.icon-button[data-size="small"]{width:var(--h-control-small);height:var(--h-control-small);min-height:0;padding:0}
.icon-button[data-frame]{border-color:var(--line-2);background:var(--surface)}
.icon-button[aria-pressed="true"]{border-color:transparent;background:transparent;color:var(--accent)}
.icon-button[data-frame][aria-pressed="true"]{border-color:var(--line-2);background:var(--surface)}
.icon-button[aria-pressed="true"] .icon{fill:color-mix(in srgb,currentColor 22%,transparent)}
.icon-button[data-status]{display:inline-flex;align-items:center;font-size:inherit;white-space:nowrap}
.icon-button[data-status]::before{position:absolute;top:calc(50% - var(--icon)/2 - var(--s1)*.5);right:calc(50% - var(--icon)/2 - var(--s1));
  width:var(--s2);height:var(--s2);box-shadow:0 0 0 2px var(--bg);transform:none}
.icon-button[data-status="neutral"]::before{display:none}
@media (hover:hover) and (pointer:fine){
  .icon-button:hover{background:var(--hover);color:var(--text)}
  .icon-button[aria-pressed="true"]:hover{color:var(--accent)}
}
@media (pointer:coarse){
  .icon-button,.icon-button[data-size="small"]{width:var(--h-touch);height:var(--h-touch)}
}

.icon-group{position:relative;display:inline-flex;flex:none;align-items:center;height:var(--h-control);border-radius:var(--radius-s);background:var(--surface)}
.icon-group::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);border-radius:inherit;pointer-events:none}
.icon-group>.icon-button{border-radius:0}
.icon-group>.icon-button:first-child{border-start-start-radius:var(--radius-s);border-end-start-radius:var(--radius-s)}
.icon-group>.icon-button:last-child{border-start-end-radius:var(--radius-s);border-end-end-radius:var(--radius-s)}
.icon-group>.icon-button:focus-visible{z-index:1;outline-offset:-2px}

.tooltip{position:fixed;inset:auto;left:0;top:0;z-index:30;max-width:min(var(--tip),calc(100vw - 2*var(--s3)));margin:0;padding:var(--s1) var(--s2);
  border:0;border-radius:var(--radius-xs);background:var(--text);color:var(--bg);box-shadow:var(--shadow);overflow:visible;
  font-size:var(--fs-micro);font-weight:var(--w-ui);line-height:var(--lh-title);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity var(--t-fast)}
.tooltip[data-on]{opacity:1}
@starting-style{ .tooltip[data-on]{opacity:0} }
.tooltip kbd{margin-left:var(--s2);padding:0;border:0;background:none;color:inherit;font-family:inherit;font-size:inherit;opacity:.72}

.toolbar{display:flex;align-items:center;gap:var(--s3);min-height:calc(var(--h-control) + 2*var(--s3));padding:var(--s3) 0}
.toolbar>:is(h1,h2,h3){flex:0 1 auto;min-width:0;margin:0;overflow:hidden;font-size:var(--fs-h3);line-height:var(--lh-title);
  letter-spacing:var(--tracking-title);text-overflow:ellipsis;white-space:nowrap}
.toolbar>.search{flex:1 1 auto;max-width:var(--column-list);margin-inline:auto}
.toolbar>.end{display:flex;flex:none;align-items:center;gap:var(--s1);margin-inline-start:auto}
.toolbar>.search+.end{margin-inline-start:0}
.toolbar :is(button:not(.icon-button),select,.segment,.icon-group,[data-status]:not(button)){height:var(--h-control);min-height:0}
.toolbar>.input,.toolbar .end>.input{height:var(--h-control);min-height:0;padding-block:0;display:flex;align-items:center;white-space:pre;overflow:hidden}
.toolbar select{width:auto;flex:none}
.toolbar [data-status]:not(button){display:inline-flex;align-items:center}
.toolbar .segment label{min-height:0;height:calc(var(--h-control) - 2*var(--segment-inset))}
.toolbar .view-open{width:var(--h-control);min-height:var(--h-control);border-color:transparent;background:transparent}
.toolbar .view-open .icon{width:var(--icon);height:var(--icon)}
@media (hover:hover) and (pointer:fine){ .toolbar .view-open:hover{background:var(--hover);color:var(--text)} }
@media (pointer:coarse){
  .toolbar .segment label{position:relative}
  .toolbar .segment label::after{content:"";position:absolute;inset:-2px 0}
}
@media (max-width:40rem){
  .toolbar{flex-wrap:wrap;row-gap:var(--s2)}
  .toolbar>:is(h1,h2,h3){flex:1 1 0}
  .toolbar>.search{order:1;flex-basis:100%;max-width:none;margin-inline:0}
  .toolbar>.search+.end{margin-inline-start:auto}
}

.search{position:relative;display:flex;align-items:center;min-width:0}
.search>.icon{position:absolute;left:var(--s3);z-index:1;width:var(--icon);height:var(--icon);color:var(--text-3);pointer-events:none}
.search>:is(.input,input){flex:1 1 auto;min-width:0;height:var(--h-control);min-height:0;padding-block:0;
  padding-inline:calc(var(--s3) + var(--icon) + var(--s2)) calc(var(--s3) + var(--s5))}
.search>.input{display:flex;align-items:center;white-space:pre;overflow:hidden}
.search>.input>div{flex:none;min-width:100%}
.search>kbd{position:absolute;right:var(--s2);min-width:var(--s5);font-family:var(--font-text);font-size:var(--fs-micro);line-height:var(--lh-title);
  text-align:center;color:var(--text-3);background:var(--fill);border-color:var(--line);pointer-events:none}
.search>:is(.input,input):focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.search:has(>.input:not([data-empty])) kbd,.search:has(>input:not(:placeholder-shown)) kbd{display:none}
@media (pointer:coarse){ .search>kbd{display:none} .search>:is(.input,input){padding-inline-end:var(--s3)} }

.sidebar{display:flex;flex-direction:column;gap:1px;min-height:0;padding:var(--s3) var(--s2);overflow:auto;overscroll-behavior:contain;
  background:var(--bg);font-size:var(--fs-body);line-height:var(--lh-dense)}
.sidebar>.brand{display:flex;align-items:center;gap:var(--s2);min-height:var(--h-control);margin:0 0 var(--s2);padding:0 var(--s2);
  font-size:var(--fs-h4);font-weight:var(--w-title);letter-spacing:var(--tracking-title)}
.sidebar :is(a,button):not(.icon-button){display:flex;align-items:baseline;gap:var(--s2);width:100%;min-height:var(--h-row);margin:0;
  padding:calc((var(--h-row) - 1lh)/2) var(--s2);border:0;border-radius:var(--radius-s);background:transparent;color:var(--text);font-size:inherit;font-weight:400;line-height:inherit;
  text-align:start;text-decoration:none;justify-content:flex-start;transition:background-color var(--t-fast)}
.sidebar :is(a,button):not(.icon-button)>:is(.icon,.favicon,.avatar){align-self:center;width:var(--icon);height:var(--icon);flex:none;color:var(--text-2)}
.sidebar :is(a,button):not(.icon-button)>span:not(.count,.favicon,.avatar){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar :is(a,button)>.count{flex:none;margin-inline-start:auto}
.sidebar :is(a,button):not(.icon-button):active{background:var(--select);transform:none}
.sidebar :is(a,button,summary):focus-visible{outline-offset:-2px}
.sidebar [aria-current]:not([aria-current="false"]){background:var(--select)}
.sidebar [aria-current]:not([aria-current="false"])>.icon{color:var(--text)}
.sidebar :is(a,button)[data-level="2"]{padding-inline-start:calc(var(--s2) + var(--s4))}
.sidebar :is(a,button)[data-level="3"]{padding-inline-start:calc(var(--s2) + 2*var(--s4))}
.sidebar details{margin:var(--s4) 0 0;border:0;border-radius:0;background:none;overflow:visible}
.sidebar summary{gap:var(--s1);min-height:var(--h-row);padding:0 var(--s2);border-radius:var(--radius-s);
  font-size:var(--fs-micro);font-weight:var(--w-strong);color:var(--text-3)}
.sidebar summary .icon{order:1;margin-inline-start:auto;width:var(--fs-dense);height:var(--fs-dense)}
.sidebar summary:active{background:var(--select)}
.sidebar .fold-body>div{display:flex;flex-direction:column;gap:1px;padding:0}
.sidebar>.end{margin-top:auto;padding-top:var(--s4)}
dialog.panel .sidebar{margin:0 calc(-1*var(--s2));padding:0;background:none}
@media (hover:hover) and (pointer:fine){
  .sidebar :is(a,button):not(.icon-button):hover,.sidebar summary:hover{background:var(--hover)}
  .sidebar [aria-current]:not([aria-current="false"]):hover{background:var(--select)}
}

.count{margin-inline-start:var(--s2);font-size:var(--fs-dense);font-weight:400;letter-spacing:0;color:var(--text-3);
  font-variant-numeric:tabular-nums;vertical-align:baseline;white-space:nowrap}
.sidebar .count{font-size:var(--fs-micro)}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  padding:var(--s1) max(var(--s2),env(safe-area-inset-right)) var(--float-bottom) max(var(--s2),env(safe-area-inset-left));
  background:var(--bg);border-top:1px solid var(--line)}
.tabbar :is(a,button){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-width:0;
  min-height:calc(var(--h-touch) + var(--s2));margin:0;padding:0 var(--s1);border:0;border-radius:var(--radius-s);background:transparent;
  color:var(--text-3);font-size:var(--fs-micro);font-weight:var(--w-ui);line-height:var(--lh-title);text-decoration:none}
.tabbar :is(a,button)>:is(.icon,.favicon,.avatar){width:calc(var(--icon)*1.25);height:calc(var(--icon)*1.25)}
.tabbar :is(a,button)>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar [aria-current]:not([aria-current="false"]){color:var(--accent)}
.tabbar :is(a,button):active{background:var(--hover);transform:none}
@media (max-width:40rem){ .tabbar{display:grid} }

.card{min-width:0;padding:var(--s4) var(--s3);background:var(--surface);outline:1px solid var(--line);outline-offset:-1px;border-radius:var(--radius)}
.card>header{display:flex;align-items:center;gap:var(--s2);min-height:var(--h-control-small);margin:0 0 var(--s3)}
.card>header>:is(h2,h3,h4){flex:1 1 auto;min-width:0;margin:0;overflow:hidden;font-size:var(--fs-h4);text-overflow:ellipsis;white-space:nowrap}
.card>header>.icon-button:last-child,.card>header>.icon-group:last-child{margin-inline-end:calc((var(--icon) - var(--h-control-small))/2)}
.card>header .icon-button{width:var(--h-control-small);height:var(--h-control-small)}
.card>header+*{margin-top:0}
.card>:last-child{margin-bottom:0}
.card .rows{margin-inline:calc(-1*var(--s3))}
.card .row{--under:var(--surface)}
@media (pointer:coarse){ .card>header .icon-button{width:var(--h-touch);height:var(--h-touch);margin-block:calc((var(--h-control-small) - var(--h-touch))/2)} }

.stats-row{display:flex;align-items:center;gap:var(--s4);min-height:var(--h-control-small);margin:var(--s2) 0 0;
  font-size:var(--fs-dense);line-height:var(--lh-title);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.stats-row>:not(.end){display:inline-flex;align-items:center;gap:var(--s1);flex:none}
.stats-row>:not(.end)>.icon{width:1.15em;height:1.15em}
.stats-row>.end{display:flex;align-items:center;margin-inline-start:auto;flex:none}
.stats-row .icon-button{width:var(--h-control-small);height:var(--h-control-small)}
@media (max-width:40rem){ .stats-row{gap:var(--s3)} }
@media (pointer:coarse){ .stats-row .icon-button{width:var(--h-touch);height:var(--h-touch);margin-block:calc((var(--h-control-small) - var(--h-touch))/2)} }

.media{margin:var(--s3) 0;max-width:100%}
.media>:is(img,a){display:block;max-width:100%}
.media img{display:block;height:auto;max-width:min(100%,calc(var(--media-max)*var(--ratio,100)));max-height:var(--media-max);border-radius:var(--radius-s);background:var(--fill)}
.media:has(>:nth-child(2)){display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:2px;width:100%;
  aspect-ratio:16/9;border-radius:var(--radius-s);overflow:hidden}
.media:has(>:nth-child(3):last-child)>:first-child{grid-row:span 2}
.media:has(>:nth-child(2))>*{min-width:0;min-height:0;overflow:hidden}
.media:has(>:nth-child(2)) img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0}
.media [data-lightbox]{cursor:zoom-in}

.avatar{display:block;flex:none;width:var(--avatar);height:var(--avatar);aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--fill)}
.avatar[data-size="s"]{width:var(--avatar-s);height:var(--avatar-s)}
.avatar[data-size="l"]{width:var(--avatar-l);height:var(--avatar-l)}

.thumb{position:relative;display:block;overflow:hidden;border-radius:var(--radius-s);background:var(--fill)}
.thumb>img{display:block;width:100%;height:auto}
.thumb-progress{position:absolute;left:0;right:0;bottom:0;height:var(--s1);border-radius:0;
  background:color-mix(in srgb,var(--bg) 55%,transparent)}
.thumb-progress::-webkit-progress-value{border-radius:0 999px 999px 0}
.thumb-progress::-moz-progress-bar{border-radius:0 999px 999px 0}

.settings{margin:0 0 var(--s5);padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
:is(h2,h3,h4):has(+.settings){margin:var(--s5) 0 var(--s2);padding-inline:var(--s4);font-size:var(--fs-dense);font-weight:var(--w-ui);color:var(--text-2)}
.setting{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:calc(var(--h-control) + 2*var(--segment-inset) + 2*var(--s1));margin:0;padding:var(--s1) var(--s4);font-size:var(--fs-input);font-weight:400;line-height:var(--lh-dense)}
.setting+.setting::before{content:"";position:absolute;top:0;left:var(--s4);right:0;border-top:1px solid var(--line)}
.setting>:first-child{flex:1 1 auto;min-width:0}
.setting label{font-size:inherit;font-weight:inherit}
.setting small{display:block;font-size:var(--fs-micro);line-height:var(--lh-title);color:var(--text-3)}
.setting>:last-child:not(:first-child){flex:none}
.setting.choice{cursor:pointer}
.setting input:is([type="checkbox"],[type="radio"]){margin:0}
.setting .segment{min-width:var(--setting-control)}
.setting select{width:auto;min-width:var(--setting-control)}
.time-range{display:flex;align-items:center;gap:var(--s2);white-space:nowrap;color:var(--text-3);font-variant-numeric:tabular-nums}
.time-range input[type="time"]{appearance:none;width:auto;min-height:var(--h-control-small);margin:0;padding:0 var(--s2);
  border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--surface);color:var(--text);font-size:var(--fs-input);font-variant-numeric:tabular-nums}
.time-range input[type="time"]::-webkit-calendar-picker-indicator{display:none}
@media (pointer:coarse){ .time-range input[type="time"]{min-height:var(--h-touch)} }

.rows{list-style:none;margin:0;padding:0}
.content>.rows,.content>section>.rows,dialog.panel>.rows{margin-inline:calc(-1*var(--s3))}
.row{--under:var(--bg);position:relative;display:flex;align-items:baseline;gap:var(--s3);margin:0;
  padding:calc((var(--h-row) - 1lh)/2) var(--s3);border-radius:var(--radius-s);font-size:var(--fs-body);line-height:var(--lh-body);
  transition:background-color var(--t-fast)}
.row>:is(.favicon,.icon,.avatar){align-self:center;width:var(--favicon);height:var(--favicon)}
.row>.icon{color:var(--text-2)}
.row>a{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--text);text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.row>a::before{content:"";position:absolute;inset:0;border-radius:inherit}
.row>a:focus-visible{outline:none}
.row:has(>a:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.row>.meta{flex:0 0 auto;max-width:40%;overflow:hidden;font-size:var(--fs-dense);color:var(--text-3);text-overflow:ellipsis;white-space:nowrap}
.row>.actions{position:absolute;top:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;
  padding:0 var(--s1) 0 var(--s5);border-radius:0 var(--radius-s) var(--radius-s) 0;
  background:linear-gradient(to right,transparent,var(--under) var(--s4));opacity:0;visibility:hidden;
  transition:opacity var(--t-fast),visibility var(--t-fast)}
.row>.actions .icon-button{width:var(--h-control-small);height:var(--h-control-small)}
.row:focus-within>.actions,.row[data-open]>.actions{opacity:1;visibility:visible}
.row>.row-more{position:relative;z-index:1;align-self:center;margin-block:calc(-1*(var(--h-row) - 1lh)/2);margin-inline-end:calc(-1*var(--s3))}
.row::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:0;border-bottom:1px solid var(--line);transition:opacity var(--t-fast)}
.row:has(>:is(.favicon,.icon,.avatar))::after{left:calc(2*var(--s3) + var(--favicon))}
.row:last-child::after,.row:is(:hover,[aria-current],[aria-selected="true"],[data-active])::after,
.row:has(+.row:is(:hover,[aria-current],[aria-selected="true"],[data-active]))::after{opacity:0}
.row:is([aria-current],[aria-selected="true"],[data-active]){--under:var(--select);background:var(--select)}
.row:active{--under:var(--select);background:var(--select)}
@media (hover:hover) and (pointer:fine){
  .row:hover{--under:var(--hover);background:var(--hover)}
  .row:hover>.actions{opacity:1;visibility:visible}
  .row:is([aria-current],[aria-selected="true"],[data-active]):hover{--under:var(--select);background:var(--select)}
}
@media (pointer:coarse){
  .row>.actions .icon-button{width:var(--h-touch);height:var(--h-touch)}
  .row:not([data-open])>.actions{display:none}
}

.favicon{display:inline-block;flex:none;width:var(--favicon);height:var(--favicon);border-radius:var(--radius-xs);object-fit:contain;vertical-align:middle}
[data-scheme="dark"] img.favicon{filter:drop-shadow(0 0 1px var(--text-2)) drop-shadow(0 0 .5px var(--text-2))}
span.favicon{display:inline-grid;place-items:center;border-radius:50%;background:var(--c);color:var(--on-series);
  font-size:var(--fs-micro);font-weight:var(--w-strong);line-height:1;font-style:normal;user-select:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile) + 2*var(--s4)),1fr));gap:var(--s1);margin:0;padding:0;list-style:none}
.tiles>li{margin:0;min-width:0}
.tile{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:0;padding:var(--s3) var(--s1) var(--s2);
  border-radius:var(--radius);color:var(--text);font-size:var(--fs-dense);line-height:var(--lh-title);text-decoration:none;
  transition:background-color var(--t-fast)}
.tile>:is(.favicon,.icon,.avatar){width:var(--tile);height:var(--tile);padding:calc(var(--tile)*.25);border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.tile>.icon{color:var(--text-2)}
.tile>span.favicon{background:linear-gradient(var(--c),var(--c)) content-box,var(--surface);font-size:var(--fs-dense)}
.tile>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile:active{background:var(--select)}
.tile[aria-current]{background:var(--select)}
@media (hover:hover) and (pointer:fine){ .tile:hover{background:var(--hover)} }

@media print{ .tabbar,.tooltip,.row>.actions{display:none!important} .app{display:block} .app>.sidebar{display:none} }