.layout{display:grid;gap:var(--s-7) clamp(var(--s-6),4vw,var(--s-8));align-items:start}.col-main{display:grid;gap:var(--s-7);min-width:0}.hero{display:grid;gap:var(--s-4)}.hero h1{max-width:13ch}.suggestion{min-height:1.6em;color:var(--text-2);font-size:var(--t-lead)}.hero-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-3)}.hero-controls .status{flex:1 1 14rem}.hero .display{margin-top:var(--s-3)}.hero .readouts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start}.hero .readouts .now{display:grid;grid-column:1 / -1;grid-row:2;min-height:calc(11px * 1.3 + 2px + var(--t-sm) * 1.3)}.hero .readouts .now:has(>dd:empty){visibility:hidden}.hero .readouts .now dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:399px){.eyebrow .then{display:none}}.handoff{background:var(--surface)}.handoff .stack>* + *{margin-top:var(--s-2)}.col-library{display:grid;gap:var(--s-3);min-width:0}.library{display:grid;gap:var(--s-4);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}.library .stack>* + *{margin-top:var(--s-2)}.library .chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--s-4));padding-inline:var(--s-4);scrollbar-width:none;--m:linear-gradient(90deg,transparent,#000 var(--s-4),#000 calc(100% - var(--s-6)),transparent);mask-image:var(--m);-webkit-mask-image:var(--m)}.library .chip{flex:none}.library-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3)}.library-count{min-height:1.4em;color:var(--text-3);font:400 var(--t-xs)/1.4 var(--font-mono)}.row-add .icon-check,.row.is-in-mix .icon-add{display:none}.toggle{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--target);padding:0;border:0;background:none;color:var(--text-2);font-size:var(--t-sm);text-align:start}.toggle::before{content:"";width:32px;height:18px;flex:none;border-radius:9px;background:var(--track) radial-gradient(circle at 9px 50%,var(--text) 6px,transparent 6.5px)}@media (forced-colors:active){.toggle::before{border:1px solid ButtonText}}@media (min-width:900px){.layout{grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr)}.col-library{grid-column:2;grid-row:1 / span 2;position:sticky;top:var(--s-4)}.handoff{grid-column:1}.library{display:flex;flex-direction:column;max-height:calc(100svh - var(--s-6));min-height:420px}.library .list{flex:1;min-height:0;overflow-y:auto;margin-inline-end:calc(-1 * var(--s-2));padding:var(--s-2) var(--s-2) var(--s-3) 0;scrollbar-width:thin;--m:linear-gradient(transparent,#000 var(--s-5),#000 calc(100% - var(--s-5)),transparent);mask-image:var(--m);-webkit-mask-image:var(--m)}}@media (max-width:599px){.col-main{gap:var(--s-6)}}
