/* Content: the Studio tab on the phone (calendar + formats) and the editors in Clipt Studio style.
   Light Clipt app inside the phone, dark studio in the overlay. Prefix ct-. Uses the tokens from style.css. */

/* ---- tab bar: however many tabs there are, they share the width ---- */
.ph-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) }
.ph-tabs button { font-size: .6em; letter-spacing: -.02em }
#studio-badge { right: 8% }

/* ---- phone: the calendar ---- */
.ct-studio { display: grid; gap: .8em }
.ct-streak { display: grid; gap: .1em; padding: .5em .7em; border-radius: .8em; background: #f6ece4; font-size: .84em; color: #6e5a62 }
.ct-streak b { color: #5c4a52 } .ct-streak.on { background: #dff3e6 } .ct-streak.on b { color: #1e6b3a }
.ct-days { display: grid; gap: .3em }
.ct-day { display: grid; grid-template-columns: 3.1em 1fr 3.4em; gap: .1em .5em; align-items: center; padding: .35em .45em; border-radius: .8em; background: #fcf5ee; position: relative }
.ct-day.today { background: #fff; box-shadow: 0 0 0 .13em var(--pink) }
.ct-day.fri .dn b { color: var(--pink) }
.ct-day .dn { display: grid; line-height: 1.1 } .ct-day .dn b { font-size: .92em } .ct-day .dn small { font-size: .68em; color: var(--clipt-mut); font-weight: 700 }
.ct-day .ds { display: flex; flex-wrap: wrap; gap: .25em; align-items: center; min-height: 1.9em }
.ct-chip { display: inline-flex; align-items: center; gap: .3em; font-size: .72em; font-weight: 800; padding: .2em .35em .2em .5em; border-radius: 1em; background: #efe3da; color: #5c4a52; white-space: nowrap }
.ct-chip svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none }
.ct-chip button { all: unset; cursor: pointer; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; color: #8a7580 } .ct-chip button:hover { background: rgba(0, 0, 0, .1) }
.ct-chip.f-fanmail { background: #ffe1ec; color: #a2305f } .ct-chip.f-school { background: #e6e0fa; color: #4b3a99 } .ct-chip.f-pod { background: #d2f1ee; color: #17685f } .ct-chip.f-comp { background: #fff1c9; color: #7a5a00 } .ct-chip.f-collab { background: #f3dcf9; color: #7a2f90 }
.ct-chip.ok { background: #cdeed8; color: #1e6b3a }
.ct-env { color: var(--pink); display: inline-grid; place-items: center } .ct-env svg { width: 1.3em; height: 1.3em }
.ct-day .add { all: unset; cursor: pointer; width: 1.7em; height: 1.7em; border-radius: 50%; border: .1em dashed #cdb8ad; color: #b59ea9; display: grid; place-items: center; font-weight: 900; font-size: .9em } .ct-day .add:hover { border-color: var(--pink); color: var(--pink) }
.ct-day .dl { height: 1.5em; position: relative; border-radius: .5em; background: #f1e3e8; overflow: hidden; display: grid; align-items: center }
.ct-day .dl u { position: absolute; inset: 0 auto 0 0; background: #8fd8d1; border-radius: .5em } .ct-day .dl.over u { background: #e0603a }
.ct-day .dl small { position: relative; font-size: .68em; font-weight: 800; text-align: center; color: #3b2d34 }
.ct-pick { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: .3em; padding: .3em 0 .1em; animation: fade .2s }
.ct-pick button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3em; font-size: .74em; font-weight: 750; padding: .3em .7em; border-radius: 1em; background: #fff; box-shadow: 0 .08em 0 var(--clipt-line), 0 0 0 .08em #e9d6ca; color: #4a3a42 }
.ct-pick button:hover { box-shadow: 0 0 0 .13em var(--pink) } .ct-pick svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round } .ct-pick em { font-style: normal; color: var(--clipt-mut); font-weight: 700 }
.ct-fmts { display: grid; gap: .45em }
.ct-fmt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 2.6em 1fr; gap: .6em; align-items: center; padding: .55em .65em; border-radius: .9em; background: #fcf5ee; box-shadow: 0 .1em 0 var(--clipt-line); transition: transform .12s }
.ct-fmt:hover:not(:disabled) { transform: translateY(-.1em); box-shadow: 0 .22em 0 var(--clipt-line) } .ct-fmt:active:not(:disabled) { transform: translateY(.08em) } .ct-fmt:focus-visible { outline: .18em solid var(--pink) }
.ct-fmt:disabled { opacity: .55; cursor: not-allowed }
.ct-fmt .ic { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; background: var(--pink); color: #fff } .ct-fmt .ic svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.ct-fmt.f-school .ic { background: #6a4fd0 } .ct-fmt.f-pod .ic { background: #2aa59b } .ct-fmt.f-comp .ic { background: #d99a12 } .ct-fmt.f-collab .ic { background: #a64fc4 }
.ct-fmt b { font-size: .92em; display: flex; justify-content: space-between; gap: .4em; align-items: baseline } .ct-fmt b em { font-style: normal; font-size: .74em; color: #fff; background: var(--pink); border-radius: 1em; padding: .05em .6em; white-space: nowrap }
.ct-fmt small { display: block; font-size: .78em; line-height: 1.3; color: #7a6670; font-weight: 600 }

/* ---- the editor window ---- */
#content { z-index: 72 }
.ct-win { position: relative; width: min(88em, 97%); height: min(52em, 96%); background: var(--studio); border-radius: 1.2em; border: .1em solid var(--studio-line); box-shadow: 0 .5em 0 #0b080d, 0 2.5em 5em rgba(0, 0, 0, .6); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; color: #efe6f4; animation: cardIn .45s var(--ease-pop) both }
.ct-win.shown { animation: none }
.ct-top { display: flex; align-items: center; gap: 1em; padding: .65em 1em; background: var(--studio-2); border-bottom: .1em solid var(--studio-line) }
.ct-top::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: #ff5f57; box-shadow: 1.2em 0 #febc2e, 2.4em 0 #28c840; margin-right: 2.6em; flex: none }
.ct-title { display: grid; line-height: 1.15; min-width: 0 } .ct-title b { font-size: 1.05em } .ct-title small { color: #b6a9bd; font-weight: 600; font-size: .85em }
.ct-hrs { margin-left: auto; display: grid; line-height: 1.1; text-align: right; padding: .2em .8em; border-radius: .7em; background: #17131a; border: .1em solid var(--studio-line) }
.ct-hrs i { font-style: normal; font-size: .68em; color: #a99db3; text-transform: uppercase; letter-spacing: .08em } .ct-hrs b { font-family: var(--mono); color: var(--amber) } .ct-hrs.over b { color: #ff9c82 }
.ct-x { all: unset; cursor: pointer; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; color: #b6a9bd } .ct-x:hover { background: rgba(255, 255, 255, .1); color: #fff } .ct-x svg { width: 1em; height: 1em }
.ct-main { min-height: 0; padding: 1em; overflow: auto; display: grid }
.ct-foot { display: flex; align-items: center; gap: .9em; padding: .7em 1em .9em; background: var(--studio-2); border-top: .1em solid var(--studio-line) }
.ct-note { color: #b6a9bd; font-size: .9em; margin-right: auto; line-height: 1.3; max-width: 46em }
.ct-win h4 { margin: 0 0 .4em; font-size: .92em; font-weight: 800; color: #cbbfd3 } .ct-win h4 small { color: #8f8398; font-weight: 600; margin-left: .4em }
.ct-win .seg.four { grid-template-columns: repeat(4, 1fr) } .ct-win .seg small { color: #a99db3 }
.ct-win p { margin: 0 } .ct-win .mut { color: #9c91a5 !important } .ct-win .ok { color: #7fd39a } .ct-win .bad { color: #ff9c82 }
.ct-win .btn.ghost { color: #a99db3 }

/* ---- fan mail ---- */
.ct-mail { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 1em; min-height: 0 }
.ct-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .7em; min-height: 0 }
.ct-photo { position: relative; border-radius: .9em; overflow: hidden; background: #000; border: .35em solid #0a080c; box-shadow: 0 0 0 .1em var(--studio-line); cursor: zoom-in; min-height: 0; align-self: start; aspect-ratio: 4/3; max-height: 100% }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; transform-origin: var(--zx, 50%) var(--zy, 50%) } .ct-photo.zoom img { transform: scale(2.1) } .ct-photo.zoom { cursor: zoom-out }
.ct-msg { position: absolute; left: .7em; right: .7em; bottom: .7em; background: rgba(255, 255, 255, .94); color: #2b1e24; border-radius: 1em 1em 1em .3em; padding: .5em .8em; display: grid; gap: .1em; font-size: .92em; box-shadow: 0 .3em 1em rgba(0, 0, 0, .4); pointer-events: none }
.ct-msg b { font-size: .82em; color: var(--pink-d) } .ct-msg span { line-height: 1.3 }
.ct-photo.zoom .ct-msg { opacity: 0 }
.ct-exif { position: absolute; left: .6em; top: .5em; font: 600 .72em var(--mono); color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .45); padding: .15em .6em; border-radius: .6em; pointer-events: none }
.ct-hint { position: absolute; right: .6em; top: .5em; font: 600 .72em var(--mono); color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .45); padding: .15em .6em; border-radius: .6em; pointer-events: none }
.ct-ths { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em }
.ct-th { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .25em; padding: .3em; border-radius: .7em; background: #1c1721; border: .12em solid #2d2634; font-size: .82em; font-weight: 750; text-align: center; color: #e8dcee; position: relative }
.ct-th:hover { background: #2a2231 } .ct-th img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: .45em; display: block }
.ct-th.on { border-color: var(--pink); box-shadow: 0 0 0 .1em var(--pink) }
.ct-th.v-right span { color: #7fd39a } .ct-th.v-partial span { color: var(--amber) } .ct-th.v-wrong span, .ct-th.v-danger span { color: #ff9c82 }
.ct-right { min-height: 0; overflow: auto; padding-right: .3em }
.ct-form { display: grid; gap: .55em; align-content: start }
.ct-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em }
.ct-types button, .ct-adv button { background: #221c27; border: .12em solid #332b3a; border-radius: .7em; padding: .45em .6em; color: #efe6f4; text-align: left; cursor: pointer; font-size: .9em; font-weight: 700; line-height: 1.2; box-shadow: 0 .15em 0 #0d0a10 }
.ct-types button:hover, .ct-adv button:hover { background: #2d2535 } .ct-types button:active, .ct-adv button:active { transform: translateY(.12em); box-shadow: 0 .03em 0 #0d0a10 }
.ct-types button.on, .ct-adv button.on { border-color: var(--pink); background: rgba(233, 91, 147, .17); box-shadow: 0 0 0 .1em var(--pink), 0 .15em 0 #0d0a10 }
.ct-sign { font-size: .84em; color: #bdb0c6; line-height: 1.35; min-height: 2.7em } .ct-sign b { color: #efe6f4 }
.ct-adv { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35em } .ct-adv button { display: grid; gap: .1em } .ct-adv small { font-weight: 500; color: #a99db3; font-size: .82em }
.ct-win .seg button { font-size: .95em }
.ct-reveal { display: grid; gap: .6em; align-content: start; padding: .9em 1em; border-radius: 1em; background: #1d1722; border: .12em solid #332b3a; animation: pop .35s var(--ease-pop) }
.ct-reveal .ct-stamp { justify-self: start; font-weight: 900; font-stretch: 70%; font-size: 1.9em; line-height: 1; padding: .1em .5em; border-radius: .3em; border: .12em solid currentColor; transform: rotate(-3deg); animation: stampIn .45s var(--ease-pop) }
.ct-reveal.v-right .ct-stamp { color: #7fd39a } .ct-reveal.v-partial .ct-stamp { color: var(--amber) } .ct-reveal.v-wrong .ct-stamp, .ct-reveal.v-danger .ct-stamp { color: #ff9c82 }
.ct-reveal .ex { color: #cbbfd3; font-size: .9em; line-height: 1.4; padding: .5em .7em; border-left: .2em solid var(--pink); background: rgba(255, 255, 255, .03); border-radius: 0 .5em .5em 0 }
.ct-reveal em { font-style: normal; color: #ff9c82; font-weight: 700 }
.ct-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; font-size: .9em }
.ct-rows li { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: .5em; padding: .3em .6em; border-radius: .5em; background: #17121c; border-left: .25em solid #6b5d75 } .ct-rows i { font-style: normal; color: #a99db3; font-size: .85em }
.ct-rows li.ok { border-color: #5fb07a } .ct-rows li.mid { border-color: var(--amber) } .ct-rows li.no { border-color: #e0603a } .ct-rows small { color: #a99db3 }
.ct-tr { font-size: .9em; color: #cbbfd3 } .ct-tr.up b { color: #7fd39a } .ct-tr.down b { color: #ff9c82 }
.ct-pubs { display: flex; gap: .6em } .ct-pub { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .1em; padding: .5em .9em; border-radius: .9em; background: linear-gradient(#f478a9, #e95b93); color: #2a0c1a; box-shadow: 0 .25em 0 var(--pink-d); text-align: left; font-size: .95em }
.ct-win button.ct-pub:hover { background: linear-gradient(#f478a9, #e95b93); filter: brightness(1.08); transform: translateY(-.06em) } .ct-pub:active { transform: translateY(.2em); box-shadow: 0 .04em 0 var(--pink-d) } .ct-pub b { font-weight: 850 } .ct-pub small { font-size: .8em; opacity: .85; font-weight: 600 } .ct-pub span { font: 600 .78em var(--mono) }

/* ---- Hoof School ---- */
.ct-school { display: grid; grid-template-columns: minmax(0, 20em) minmax(0, 1fr); gap: 1.2em; min-height: 0 }
.ct-intro { display: grid; gap: .6em; align-content: start } .ct-intro > b { font-size: 1.25em } .ct-intro p { color: #cbbfd3; line-height: 1.4; font-size: .95em }
.ct-plan { padding: .6em .8em; border-radius: .8em; background: #1f1925; border: .1em solid var(--studio-line); color: #cbbfd3 } .ct-plan b { color: var(--amber); font-size: 1.3em }
.ct-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; align-content: start; overflow: auto; padding: .15em }
.ct-topic { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 2.2em 1fr; gap: .6em; align-items: start; padding: .6em .75em; border-radius: .9em; background: #221c27; border: .12em solid #332b3a; box-shadow: 0 .18em 0 #0d0a10 }
.ct-topic:hover { background: #2d2535 } .ct-topic .no { width: 2em; height: 2em; border-radius: 50%; border: .12em dashed #5b4f66; display: grid; place-items: center; font-weight: 900; color: #fff }
.ct-topic.on { border-color: var(--pink); background: rgba(233, 91, 147, .16); box-shadow: 0 0 0 .1em var(--pink), 0 .18em 0 #0d0a10 } .ct-topic.on .no { background: var(--pink); border-style: solid; border-color: var(--pink); color: #2a0c1a }
.ct-topic b { display: block; line-height: 1.2 } .ct-topic small { display: block; color: #a99db3; font-size: .84em; line-height: 1.3; margin-top: .15em } .ct-topic em { display: block; font-style: normal; font-size: .76em; color: var(--amber); margin-top: .25em; font-weight: 700 }
.ct-tl { display: grid; gap: .4em; align-content: start } .ct-tl > b { font-size: 1.1em }
.ct-ep { display: grid; grid-template-columns: 2em 1fr; gap: .6em; align-items: center; padding: .5em .7em; border-radius: .8em; background: #1c1721; border: .12em solid #2d2634; opacity: .65 }
.ct-ep .no { width: 1.8em; height: 1.8em; border-radius: 50%; background: #3a3340; display: grid; place-items: center; font-weight: 900; font-size: .9em } .ct-ep b { font-size: .9em; line-height: 1.2; display: block } .ct-ep small { color: #a99db3; font-size: .8em }
.ct-ep.done { opacity: 1; border-color: rgba(95, 176, 122, .5) } .ct-ep.done .no { background: #3a9a60; color: #fff } .ct-ep.now { opacity: 1; border-color: var(--pink) } .ct-ep.now .no { background: var(--pink); color: #2a0c1a }
.ct-binge { font-size: .84em; color: #a99db3; line-height: 1.35 } .ct-binge.ok { color: #7fd39a }
.ct-ep-edit { display: grid; gap: .6em; align-content: start } .ct-ep-edit h3 { margin: 0; font-size: 1.7em; font-weight: 900; font-stretch: 70%; line-height: 1.05 } .ct-ep-edit p { color: #cbbfd3 }
.ct-preps { display: grid; gap: .45em }
.ct-prep { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .15em; padding: .6em .8em; border-radius: .9em; background: #221c27; border: .12em solid #332b3a; box-shadow: 0 .18em 0 #0d0a10 }
.ct-prep:hover { background: #2d2535 } .ct-prep.on { border-color: var(--pink); background: rgba(233, 91, 147, .17); box-shadow: 0 0 0 .1em var(--pink), 0 .18em 0 #0d0a10 }
.ct-prep b { display: flex; justify-content: space-between } .ct-prep b em { font-style: normal; color: var(--amber); font-family: var(--mono); font-size: .85em } .ct-prep small { color: #a99db3 } .ct-prep span { font: 600 .78em var(--mono); color: #bdb0c6 }

/* ---- podcast ---- */
.ct-pod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2em; min-height: 0 } .ct-pl, .ct-pr { display: grid; gap: .6em; align-content: start; min-height: 0; overflow: auto; padding: .1em .3em .1em 0 }
.ct-kinds { display: grid; gap: .4em } .ct-kind { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .1em; padding: .55em .8em; border-radius: .9em; background: #221c27; border: .12em solid #332b3a; box-shadow: 0 .18em 0 #0d0a10 }
.ct-kind:hover { background: #2d2535 } .ct-kind.on { border-color: var(--pink); background: rgba(233, 91, 147, .17); box-shadow: 0 0 0 .1em var(--pink), 0 .18em 0 #0d0a10 } .ct-kind small { color: #a99db3; line-height: 1.3 }
.ct-forecast { display: grid; gap: .25em; padding: .7em .9em; border-radius: .9em; background: #1d1722; border: .1em solid var(--studio-line); font-size: .92em; color: #cbbfd3; line-height: 1.35 } .ct-forecast > b { color: var(--amber); font-size: .78em; text-transform: uppercase; letter-spacing: .1em; font-family: var(--mono) } .ct-forecast small { color: #9c91a5 } .ct-forecast.big { font-size: 1.05em }
.ct-q { display: grid; gap: .4em; padding: .6em .8em; border-radius: .9em; background: #1d1722; border: .1em solid var(--studio-line) }
.ct-qh { display: flex; align-items: center; gap: .5em } .ct-qh i { width: .8em; height: .8em; border-radius: 50%; display: block } .ct-qh small { color: #a99db3; margin-left: auto } .ct-q p { font-size: 1.02em; line-height: 1.3 } .ct-q .seg button { padding: .35em .6em; text-align: center }
.ct-run { padding: .8em 1em; border-radius: .9em; background: #1d1722; border: .1em solid var(--studio-line); display: grid; gap: .5em }
.ct-rec { display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: .9em; background: rgba(255, 59, 59, .12); border: .1em solid rgba(255, 59, 59, .5) } .ct-rec b { color: #ff7a7a }
.wave { display: inline-flex; gap: .2em; align-items: center; height: 2em } .wave i { width: .25em; height: 100%; background: #ff7a7a; border-radius: .2em; animation: wv .7s ease-in-out infinite alternate } .wave i:nth-child(2n) { animation-delay: .15s } .wave i:nth-child(3n) { animation-delay: .3s } @keyframes wv { from { transform: scaleY(.2) } to { transform: scaleY(1) } }

/* ---- compilation ---- */
.ct-comp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2em; min-height: 0 } .ct-cl, .ct-cr { display: grid; gap: .6em; align-content: start; min-height: 0 } .ct-cl { grid-template-rows: auto minmax(0, 1fr) }
.ct-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; overflow: auto; align-content: start; padding: .15em }
.ct-clip { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .1em; padding: .3em; border-radius: .7em; background: #1c1721; border: .12em solid #2d2634; position: relative; font-size: .86em }
.ct-clip:hover { background: #2a2231 } .ct-clip img, .ct-clip .noimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: .45em; display: block; background: #2d2634 } .ct-clip b { font-size: .95em; line-height: 1.15 } .ct-clip small { color: #a99db3; font-size: .82em }
.ct-clip .no { position: absolute; top: .45em; left: .45em; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #2a0c1a; background: transparent } .ct-clip.on .no { background: var(--pink) } .ct-clip.on { border-color: var(--pink); box-shadow: 0 0 0 .1em var(--pink) }
.ct-clip .fr { height: .3em; border-radius: .2em; background: #332b3a; overflow: hidden; margin-top: .2em } .ct-clip .fr u { display: block; height: 100% } .ct-clip em { position: absolute; top: .45em; right: .45em; font-style: normal; font-size: .72em; font-weight: 800; background: rgba(0, 0, 0, .65); color: #ffb09c; padding: .05em .5em; border-radius: 1em }
.ct-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; min-height: 6em }
.ct-sc { position: relative; border-radius: .6em; overflow: hidden; background: #1c1721; border: .12em solid #3a3340; display: grid; align-content: end; min-height: 5.2em; animation: pop .25s var(--ease-pop) } .ct-sc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75 }
.ct-sc span { position: absolute; top: .3em; left: .3em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--pink); color: #2a0c1a; font-weight: 900; display: grid; place-items: center; font-size: .85em } .ct-sc b { position: relative; font-size: .78em; background: rgba(15, 10, 14, .8); padding: .2em .4em; line-height: 1.1 }
.ct-sc button { all: unset; cursor: pointer; position: absolute; width: 1.7em; height: 1.7em; display: grid; place-items: center; background: rgba(15, 10, 14, .75); border-radius: 50%; font-weight: 900; top: .3em; right: .3em; font-size: .85em } .ct-sc button[data-mv] { top: auto; bottom: 1.9em; right: auto; left: .3em } .ct-sc button[data-mv$=":1"] { left: 2.2em } .ct-sc button:disabled { opacity: .3 } .ct-sc button:hover:not(:disabled) { background: var(--pink); color: #2a0c1a }
.ct-spark { width: 100%; height: 3.4em; display: block } .ct-spark-cap { font-size: .75em; color: #8f8398; margin-top: -.3em } .ct-q4 { display: flex; flex-wrap: wrap; gap: .35em } .ct-q4 span { font-size: .8em; font-weight: 700; padding: .15em .7em; border-radius: 1em; background: #221c27; border: .1em solid #332b3a; color: #bdb0c6 }
.ct-q4 span.ok { color: #7fd39a; border-color: rgba(127, 211, 154, .4) } .ct-q4 span.bad { color: #ff9c82; border-color: rgba(255, 156, 130, .4) }
.ct-win .tone { font-size: .76em; font-weight: 800; margin-right: .5em } .ct-win .tone-honest { color: #7fd39a } .ct-win .tone-story { color: var(--amber) } .ct-win .tone-clickbait { color: #ff9c82 }
.ct-win .ptitles button { text-align: left }

/* ---- collab ---- */
.ct-collab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2em } .ct-cp { display: grid; gap: .6em; align-content: start } .ct-cq { display: grid; gap: .8em; align-content: start } .ct-quote { margin: 0; padding: .8em 1em; border-radius: .9em; background: #1d1722; border-left: .25em solid var(--pink); color: #e8dcee; font-style: italic; line-height: 1.4 } .ct-quote small { display: block; font-style: normal; color: #a99db3; margin-top: .3em }
.ct-partners { display: grid; gap: .45em } .ct-partner { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 3.4em 1fr; gap: .8em; align-items: center; padding: .55em .8em; border-radius: .9em; background: #221c27; border: .12em solid #332b3a; box-shadow: 0 .18em 0 #0d0a10 } .ct-partner:disabled { opacity: .5; cursor: not-allowed }
.ct-partner.on { border-color: var(--pink); background: rgba(233, 91, 147, .17); box-shadow: 0 0 0 .1em var(--pink), 0 .18em 0 #0d0a10 } .ct-partner .pt { width: 3.4em; height: 3.4em; border-radius: 50%; overflow: hidden; background: #a06be0; display: grid; place-items: center } .ct-partner .pt img { width: 100%; height: 100%; object-fit: cover } .ct-partner .pt i { font-style: normal; font-weight: 900; font-size: 1.1em; color: #fff } .ct-partner small { display: block; color: #a99db3 }

/* ---- result ---- */
.ct-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2em; min-height: 0 } .ct-rl { display: grid; gap: .8em; align-content: start } .ct-rr { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .5em; min-height: 0 } .ct-rr .comments { overflow: auto }
.ct-big { display: flex; align-items: baseline; gap: .5em } .ct-big b { font-size: 4.2em; font-weight: 900; font-stretch: 66%; line-height: 1; color: #fff } .ct-big span { color: #b6a9bd; font-weight: 700 }
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em } .ct-grid > div { background: #1d1722; border: .1em solid var(--studio-line); border-radius: .8em; padding: .5em .7em; display: grid } .ct-grid i { font-style: normal; font-size: .7em; color: #a99db3; text-transform: uppercase; letter-spacing: .06em } .ct-grid b { font-family: var(--mono); font-size: 1.2em }
.ct-notes { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; color: #cbbfd3; font-size: .94em; line-height: 1.35 } .ct-notes li::marker { color: var(--pink) } .ct-notes li.ok { color: #7fd39a } .ct-notes li.bad { color: #ff9c82 }
.ct-win.result .cmt { color: #2b1e24 }
.ct-gcard { background: #fff8f1; color: #2b1e24; border-radius: 1em; padding: .7em .9em; display: grid; gap: .3em } .ct-gcard h5 { margin: 0; font-size: .85em; color: #8a7580 } .ct-gcard .lessons { font-size: .86em; color: #5c4a52 }

@media (max-width: 1000px) { .ct-mail, .ct-school, .ct-pod, .ct-comp, .ct-collab, .ct-result { grid-template-columns: 1fr } .ct-types { grid-template-columns: repeat(2, 1fr) } .ct-win { height: 98% } }
@media (prefers-reduced-motion: reduce) { .ct-reveal, .ct-stamp, .ct-sc, .ct-pick, .wave i { animation: none !important } }
@keyframes stampIn { from { transform: rotate(-3deg) scale(2.2); opacity: 0 } to { transform: rotate(-3deg) scale(1); opacity: 1 } }