/* Make it yours, signed out: try it by hand, see the whole instrument, sign in to keep it */
.in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 16px 20px 40px; }
/* room under the page for the dock: its exact height, measured by the shell (--dock-room) */
.in-end { height: var(--dock-room, 128px); }
.in-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; min-width: 0; }

/* the head */
.in-head { display: grid; gap: 12px; }
.in-title { font: var(--display, 400) 54px/0.98 var(--serif); letter-spacing: var(--title-track, -0.015em); }
.in-title i { font-style: italic; color: var(--go-ink); }
.in-sub { font-size: 17px; color: var(--soft); max-width: 36em; }
.in-sub b { font-weight: 500; color: var(--ink); }
.in-ways { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.in-way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; padding: 12px 14px; border-radius: calc(16px * var(--round, 1)); }
.in-way b { font: var(--display, 400) 21px/1.15 var(--serif); letter-spacing: var(--title-track, normal); }
.in-way span:not([class]) { grid-column: 1; font-size: 13.5px; }
.in-way > :last-child { grid-column: 2; grid-row: 1 / 3; }
.in-way.is-free { background: var(--free-soft); color: var(--free-ink); }
.in-way.is-ai { background: var(--ai-soft); color: var(--ai-ink); }
.in-way .ai-badge, .in-way .free-badge { background: var(--sheet); }
.in-way.is-go { background: var(--go-soft); color: var(--go-ink); }
.in-go-badge { padding: 2px 8px; border-radius: var(--pill, 999px); background: var(--sheet); color: var(--go-ink); font: 500 11px/1.5 var(--mono); white-space: nowrap; }
.in-tries { display: grid; gap: 8px; margin-top: 6px; }
.in-tries-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.in-try-seg { height: 6px; border-radius: 3px; background: var(--wash); }
.in-try-seg.is-done { background: var(--free); }
.in-tries p { font-size: 14px; color: var(--muted); }
.in-tries p b { font: 500 13px var(--mono); color: var(--free-ink); }

/* suggestions: one tap each, free */
.in-try { display: grid; gap: 8px; margin: 4px 0 6px; }
.in-try-list { display: flex; flex-wrap: wrap; gap: 8px; }
.in-try-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 15px 9px 9px; border: 1px solid #c9dccb; border-radius: var(--pill, 999px); background: var(--sheet); color: var(--ink); font-size: 14.5px; text-align: left; cursor: pointer; }
.in-try-chip:hover { background: var(--free-soft); }
.in-try-k { padding: 2px 8px; border-radius: var(--pill, 999px); background: var(--free-soft); color: var(--free-ink); font: 500 11px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.in-tried-all { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: calc(14px * var(--round, 1)); background: var(--free-soft); color: var(--free-ink); font-size: 14.5px; }
.in-tried-all svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* sections */
.in-sec { display: grid; gap: 14px; }
.in-sec-head { display: grid; gap: 4px; }
.in-sec-top { display: flex; align-items: center; gap: 10px; }
.in-n { font: 500 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.in-h2 { font: var(--display, 400) 30px/1.08 var(--serif); letter-spacing: var(--title-track, normal); text-wrap: balance; }
.in-sec-sub { font-size: 15px; color: var(--soft); }

/* 1 what they carry */
.in-quote { margin: 0; padding: 14px 18px 16px; border-left: 3px solid var(--free); border-radius: 0 calc(16px * var(--round, 1)) calc(16px * var(--round, 1)) 0; background: var(--free-soft); font: italic 400 26px/1.25 var(--serif); color: var(--free-ink); text-wrap: pretty; }
.in-quote-mark { margin-right: 2px; }
.in-quote::after { content: '"'; }
.in-wish-box { display: grid; gap: 10px; }
.in-wish-field { font-size: 17px; }
.in-wish-box .btn { justify-self: start; }
.in-ai-note { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px 10px; align-items: start; padding: 12px 14px; border-radius: calc(14px * var(--round, 1)); background: var(--ai-soft); color: var(--ai-ink); font-size: 14.5px; }
.in-ai-note .ai-badge { grid-column: 2; justify-self: start; background: var(--sheet); }
.in-ai-note b { font-weight: 600; }
.in-ai-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ai); color: #fff; }
.in-ai-dot svg { width: 14px; height: 14px; }

/* 2 the lines */
.in-score { display: grid; gap: 2px; }
.in-part-name { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.in-part-name::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.in-line { --lit: 0; border-radius: calc(14px * var(--round, 1)); background: rgb(111 154 123 / calc(var(--lit) * 0.28)); }
.in-line.is-open { background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.in-line-main { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 9px 10px 9px 6px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.in-line-n { grid-row: 1 / 3; font: 11px/2.1 var(--mono); color: var(--muted); text-align: right; }
.in-line-text { font: 400 20px/1.3 var(--serif); color: var(--ink); }
.in-line.is-mine .in-line-text { color: var(--free-ink); }
.in-line-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.in-tag, .in-mine { padding: 1px 8px; border-radius: var(--pill, 999px); font: 500 11px/1.5 var(--mono); }
.in-tag { background: var(--deep); color: var(--paper); }
.in-mine { background: var(--free-soft); color: var(--free-ink); }
.in-tag-add { font: 11px/1.5 var(--mono); color: var(--muted); }
.in-line-main:hover .in-tag-add { color: var(--deep); }
.in-line-tools { display: grid; gap: 12px; padding: 4px 12px 14px 44px; }
.in-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.in-tags .chip { padding: 7px 12px; border-radius: calc(12px * var(--round, 1)); font-size: 14px; }
.in-edit { display: grid; gap: 8px; }
.in-edit-field { font: 400 18px/1.35 var(--serif); }
.in-edit .btn { justify-self: start; min-height: 44px; padding: 9px 16px; font-size: 15px; }
.in-more { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.in-more svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

/* 3 voice and sound */
.in-voices, .in-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.in-voices .chip, .in-tracks .chip { width: 100%; }

/* 4 the whole instrument */
.in-inst-grid { display: grid; gap: 14px; }
.in-panel { display: grid; gap: 12px; padding: 18px; border-radius: calc(22px * var(--round, 1)); }
.in-panel.is-studio { background: var(--free-soft); color: var(--free-ink); }
.in-panel.is-ai { background: var(--ai-soft); color: var(--ai-ink); }
.in-panel .label { color: inherit; }
.in-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-panel-k { font: 500 11px/1.5 var(--mono); }
.in-panel-art { height: 64px; padding: 6px 0 0; }
.in-panel.is-studio .curve-area { fill: rgb(111 154 123 / 0.22); }
.in-panel.is-studio .curve-line { stroke: var(--free-ink); }
.in-panel ul { list-style: none; margin: 0; padding: 0; display: grid; }
.in-panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgb(27 26 36 / 0.09); }
.in-panel li b { font: var(--display, 400) 19px/1.2 var(--serif); letter-spacing: var(--title-track, normal); color: var(--ink); }
.in-panel li span:not([class]) { grid-column: 1; font-size: 13.5px; }
.in-panel li > :last-child { grid-column: 2; grid-row: 1 / 3; }
.in-panel .free-badge, .in-panel .ai-badge { background: var(--sheet); }
.in-panel-foot { padding-top: 10px; border-top: 1px solid rgb(27 26 36 / 0.09); font-size: 13.5px; }
.in-panel-foot b { font-weight: 600; }

/* their copy, as it stands */
.in-copy { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: calc(22px * var(--round, 1)); background: var(--sheet); }
.in-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-copy-state { font: 500 11px/1.5 var(--mono); color: var(--go-ink); padding: 1px 8px; border-radius: var(--pill, 999px); background: var(--go-soft); }
.in-copy-title { font: var(--display, 400) 28px/1.05 var(--serif); letter-spacing: var(--title-track, normal); }
.in-copy-title i { color: var(--muted); }
.in-copy-curve { height: 56px; }
.in-copy-wish { font: italic 400 19px/1.3 var(--serif); color: var(--free-ink); }
.in-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.in-facts div { padding: 8px 10px; border-radius: calc(12px * var(--round, 1)); background: var(--paper); }
.in-facts div.is-yours { background: var(--free-soft); }
.in-facts dt { font: 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.in-facts dd { margin: 0; font-size: 14.5px; }
.in-facts .is-yours dt, .in-facts .is-yours dd { color: var(--free-ink); }

/* the one next step */
.in-keep { display: grid; gap: 10px; padding: 18px; border-radius: calc(22px * var(--round, 1)); background: var(--go-soft); color: var(--go-ink); }
.in-keep-lead { font: 400 21px/1.2 var(--serif); color: var(--ink); }
.in-keep-lead b { font-weight: 400; color: var(--go-ink); }
.in-keep .btn { width: 100%; }
.in-keep-fine { font-size: 13.5px; }
.in-keep-ways { font: 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }

.in-dock { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-content: start; gap: 8px; margin: 0; padding: 12px 14px 24px 20px; border-top: 1px solid #efd3a2; border-radius: calc(24px * var(--round, 1)) calc(24px * var(--round, 1)) 0 0; background: var(--go-soft); box-shadow: 0 -10px 30px rgb(27 26 36 / 0.12); }
.in-dock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-dock-say { display: grid; line-height: 1.2; }
.in-dock-say b { font: 600 15.5px/1.2 var(--sans); color: var(--ink); }
.in-dock-say span { font-size: 12.5px; color: var(--go-ink); }
.in-dock .btn { min-height: 46px; padding: 10px 18px; }
.in-dock-fine { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--go-ink); padding-right: 8px; }
/* while the first cards are in view the dock is one slim row; the fine print is said again under the copy */
.layer[data-slim] .in-dock-fine { display: none; }
.layer[data-slim] .in-dock { padding-bottom: 14px; }

@container app (min-width: 700px) {
  .in-desk { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding-top: 40px; padding-bottom: 80px; }
  .in-side { position: sticky; top: 90px; display: grid; gap: 14px; }
  .in-title { font-size: 80px; }
  .in-sub { font-size: 19px; }
  .in-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .in-way { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; padding: 14px 16px 16px; }
  .in-way > :last-child { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .in-h2 { font-size: 38px; }
  .in-voices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-inst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .in-line-main { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; }
  .in-line-n { grid-row: auto; line-height: 1.6; }
  .in-line-marks { justify-content: flex-end; }
  .in-line-tools { padding-left: 50px; }
}

/* a voice: pick it, or hear five seconds of it first */
.in-voice { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.in-voice .chip { flex: 1; min-width: 0; }
.in-hear { flex: none; display: grid; place-items: center; align-content: center; gap: 2px; width: 48px; min-height: 44px; border: 1px solid var(--line); border-radius: calc(14px * var(--round, 1)); background: var(--paper); color: var(--deep); font: 400 10.5px/1 var(--mono); cursor: pointer; }
.in-hear svg { width: 16px; height: 16px; }
.in-hear.is-on { border-color: var(--deep); background: var(--sheet); }
.in-saved { justify-self: start; }
.in-saved .free-badge { font-size: 12px; padding: 4px 10px; }
.in .legal-foot { margin-top: 8px; }