.card.capture-notes { --_card-stage-track-min:340px; aspect-ratio:auto; background:color-mix(in oklab,var(--card-surface) 95%,var(--card-ink)); & .card-stage { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; padding:0 22px 22px; } & .capture-sheet { min-height:0; overflow:hidden; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 8%,transparent); border-radius:10px; box-shadow:0 5px 18px #18243207; padding:23px 19px 0; mask-image:linear-gradient(#000 82%,transparent); } & .capture-sheet-title { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:20px; line-height:1.3; } & .capture-sheet-title strong { font-weight:550; overflow-wrap:anywhere; } & .capture-sheet-title svg { width:22px; height:22px; flex:none; fill:none; stroke:var(--_card-accent-ink); stroke-width:1.7; stroke-linecap:round; } & .capture-tabs { display:flex; gap:12px; align-items:center; color:var(--card-muted); font-size:10px; line-height:1.5; padding-bottom:13px; border-bottom:1px solid var(--card-line); } & .capture-tabs span:first-child { color:var(--card-ink); background:var(--card-wash); padding:3px 6px; border-radius:4px; } & .capture-tabs i { font-style:normal; margin-left:auto; } & .capture-labels { display:flex; justify-content:space-between; font-size:9px; color:var(--card-muted); padding:12px 0 6px; } & .capture-row { display:flex; align-items:center; gap:8px; width:100%; min-width:0; padding:12px 0; background:transparent; border:0; border-top:1px solid var(--card-line); text-align:left; color:var(--card-ink); cursor:pointer; font-size:11px; line-height:1.3; } & .capture-row::before { content:''; width:9px; height:12px; flex:none; border:1px solid var(--card-muted); border-radius:1px; background:linear-gradient(var(--card-line),var(--card-line)) 2px 4px/5px 1px no-repeat; } & .capture-row span { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } & .capture-row .capture-tags { display:flex; flex:none; gap:4px; margin-left:auto; max-width:42%; } & .capture-row small { flex:0 1 auto; min-width:0; font-size:9px; color:var(--tag-ink); background:color-mix(in oklab,var(--tag-ink) 11%,var(--card-panel)); border-radius:3px; padding:3px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } & [data-tone="indigo"] { --tag-ink:light-dark(#5960b5,#a8adf3); } & [data-tone="teal"] { --tag-ink:light-dark(#347768,#88c9b7); } & [data-tone="amber"] { --tag-ink:light-dark(#936b32,#d9b277); } & [data-tone="rose"] { --tag-ink:light-dark(#995c74,#d8a1b5); } & [data-tone="slate"] { --tag-ink:light-dark(#5f7089,#adbdd3); } & .capture-row[aria-pressed="true"] span { color:var(--_card-accent-ink); } & .capture-recorder { display:flex; align-items:center; gap:9px; min-width:0; padding:9px 11px; background:var(--card-panel); border:1px solid color-mix(in oklab,var(--card-ink) 12%,transparent); border-radius:40px; box-shadow:0 6px 16px #1118270a; } & .record-dot { width:6px; height:6px; flex:none; border-radius:50%; background:var(--card-accent); } & .capture-now { font-size:11px; min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } & .capture-wave { display:flex; align-items:center; gap:3px; height:22px; flex:none; } & .capture-wave i { width:2px; height:20px; background:var(--card-muted); border-radius:2px; transform:scaleY(.3); } & .capture-pause { display:grid; place-items:center; border:0; border-radius:50%; width:28px; height:28px; flex:none; background:var(--card-wash); color:var(--card-ink); cursor:pointer; } & .capture-pause svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } }