/* A small scrapbook for the moments a fan wants to keep. */
:root {
  --paper: #fffaf3;
  --white: #fffefd;
  --ink: #31262d;
  --muted: #81717a;
  --line: #eadfe0;
  --coral: #dc3154;
  --orange: #dc3154;
  --rose: #ffe8ed;
  --lavender: #eee8ff;
  --lime: #edf2cd;
  --ticket-paper: #fffdf8;
}
body { background: var(--paper); color: var(--ink); }
.wrap { width: min(1180px, calc(100% - 72px)); }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.site-header { min-height: 92px; border-bottom: 0; }
.brand { gap: 9px; color: var(--ink); font-size: 23px; letter-spacing: -.075em; }
.brand-mark { width: 35px; height: 38px; color: var(--coral); transform: rotate(-13deg); }
.brand-mark svg { width: 32px; height: 32px; fill: currentColor; stroke-width: 1.3; }
.brand-period { display: none; }
.header-actions { gap: 9px; }
.header-actions .quiet-button, .header-actions .icon-button {
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4dadd;
  border-radius: 50%;
  color: #70616b;
  background: #fffdfa;
}
.header-actions .quiet-button:hover, .header-actions .icon-button:hover { background: var(--rose); border-color: #f0bdcb; color: var(--coral); }
.question-icon { display: grid; width: 19px; height: 19px; border: 1.5px solid currentColor; font-weight: 700; font-size: 11px; }
main.wrap { padding-top: 18px; }
.concept-intro { position: relative; padding: 6px 0 29px; margin-bottom: 12px; animation: page-enter .6s cubic-bezier(.2,.7,.3,1) both; }
.concept-copy { padding-right: 180px; }
.concept-copy h1 { color: var(--ink); font-size: 40px; font-weight: 900; line-height: 1.36; letter-spacing: -.06em; margin: 0; }
.concept-copy h1 span { display: inline-block; white-space: nowrap; }
.concept-copy h1 .concept-lead { color: var(--coral); }
.concept-focus { position: relative; }
.concept-focus > svg { position: absolute; left: -2px; bottom: -10px; width: 100%; height: 17px; overflow: visible; fill: none; stroke: var(--coral); stroke-width: 3.7; stroke-linecap: round; }
.concept-copy p { color: #77636f; font-size: 13px; line-height: 1.8; margin: 15px 0 0; }
.concept-scrap { position: absolute; top: -2px; right: 9px; width: 146px; height: 112px; pointer-events: none; transform: rotate(7deg); }
.scrap-frame { position: absolute; inset: 15px 9px 13px 11px; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--lavender); border: 5px solid #fffefd; border-radius: 5px; box-shadow: 1px 4px 0 #e6dce4; color: #695477; transform: rotate(-6deg); }
.scrap-frame::before { content: ''; position: absolute; inset: 4px; border: 1px solid #d6c9e6; border-radius: 2px; }
.scrap-frame b { position: absolute; bottom: 5px; right: 7px; font: 650 12px/1 var(--mono); color: #79658b; }
.scrap-play { width: 25px; height: 25px; margin: -4px 0 0 -10px; fill: #b9a3cf; stroke: none; }
.scrap-tape { position: absolute; width: 48px; height: 14px; top: 8px; left: 47px; background: #e3e9bbdb; transform: rotate(-5deg); z-index: 2; }
.scrap-heart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--coral); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-9deg); }
.scrap-heart path { animation: heart-draw .95s ease-out .15s both; }
.scrap-spark { position: absolute; right: -7px; top: 0; color: var(--coral); font: 36px/1 var(--sans); transform: rotate(13deg); }
@keyframes heart-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.workspace { grid-template-columns: minmax(0, 1.3fr) minmax(0, .96fr); gap: 42px; }
.player-column { top: 24px; }
.video-heading { min-height: 44px; gap: 14px; margin-bottom: 12px; }
.video-heading h2 { font-size: 18px; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-kicker, .video-heading p { display: none; }
#change-video { min-width: 44px; min-height: 44px; justify-content: center; gap: 6px; padding: 6px 12px; color: #796674; background: #eee7f8; border-radius: 25px; font-size: 11px; }
#change-video > span { font-size: 16px; }
#change-video:hover { background: #e5daf6; color: #594365; }
.media-card { border-radius: 22px; box-shadow: 0 7px 0 #e6dce4, 0 14px 30px #69516609; }
.youtube-screen, .demo-screen { min-height: 200px; }
.video-meta { margin: 17px 3px 13px; min-height: 17px; font-size: 10px; color: var(--muted); }
.video-meta > span:first-child { max-width: 75%; }
.status-dot { width: 4px; height: 4px; vertical-align: 2px; }
.video-meta b { font-size: 11px; color: #665660; }
.pick-button { min-height: 68px; gap: 13px; padding: 15px 21px; border-radius: 19px; background: var(--coral); font-size: 16px; font-weight: 750; box-shadow: 0 5px 0 #b82547; }
.pick-button > svg { width: 25px; height: 25px; fill: #fff7fa; stroke: #fff7fa; }
.pick-button:hover { background: #df385d; box-shadow: 0 7px 0 #b82547; }
.pick-button:active { box-shadow: 0 2px 0 #b82547; }
.pick-time { border-left: 1px solid #f89cb0; font-size: 23px; letter-spacing: -.055em; }
.pick-button:disabled { background: #e9e0e2; color: #887c83; box-shadow: none; }
.pick-button:disabled > svg { fill: currentColor; stroke: currentColor; }
.selected-summary { background: #ffe9ed; border: 1px solid #f1c2cc; border-radius: 19px; padding: 10px 14px; margin-top: 18px; gap: 10px; }
.selected-summary > span { color: #9e4b60; font-size: 12px; font-weight: 650; }
.selected-summary button { background: #fff8f7; border: 1px solid #f1d4db; border-radius: 12px; color: var(--coral); font-size: 24px; letter-spacing: -.06em; padding: 5px 12px; }
.local-note { display: inline-flex; align-items: center; gap: 5px; margin: 18px 2px 0; padding: 3px 8px; border-radius: 5px; background: #f1ebe7; color: #877980; font-size: 9px; line-height: 1.7; }
.local-note::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #b8a9b1; }
.selection-panel { padding: 23px; background: #f3ece8; border: 0; border-radius: 26px; box-shadow: none; }
.selection-panel::before { content: ''; position: absolute; width: 47px; height: 13px; background: #ddd3f2b0; top: -5px; right: 28px; transform: rotate(6deg); pointer-events: none; }
.panel-topline { margin-bottom: 18px; min-height: 31px; justify-content: flex-start; gap: 10px; }
.selection-panel h2 { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.count-pill { min-height: 25px; padding: 2px 8px; color: #a26b7b; background: #fffaf8; border: 1px solid #e7d7da; font-size: 12px; }
.count-pill > span { font-size: 10px; color: #99828d; }
.count-pill svg { width: 12px; height: 12px; fill: #b97488; stroke: #b97488; }
.panel-description { margin: -5px 0 15px; font-size: 11px; }
.empty-state { min-height: 225px; margin: 0; padding: 28px 15px; background: #fffcf8; border: 1px dashed #dfc7cd; border-radius: 21px; }
.empty-illustration { width: 140px; height: 105px; margin-bottom: 21px; }
.empty-frame { inset: 12px auto auto 19px; width: 103px; height: 71px; border-radius: 15px; background: #ffe8ed; border: 1.5px solid #efb1c1; box-shadow: 4px 7px 0 #eee7fc; gap: 6px; transform: rotate(-9deg); }
.empty-frame svg { width: 28px; height: 28px; fill: #e44365; stroke: #e44365; }
.empty-frame b { color: #ad5a70; font-size: 17px; letter-spacing: -.05em; }
.empty-cursor { right: -3px; bottom: -2px; font-size: 44px; color: #dc3154; -webkit-text-stroke: 2px #fffcf8; }
.empty-star { top: -11px; right: 9px; font-size: 34px; color: #bcb598; }
.empty-state p { color: #9a7181; font-size: 13px; font-weight: 650; }
.disclosure { color: #8d7a83; margin: 17px 0 13px; font-size: 11px; }
.commit-button { min-height: 55px; border-radius: 15px; background: var(--ink); padding-inline: 18px; font-size: 13px; }
.commit-button:disabled { background: #e5dadd; color: #a6929b; }
.draft-card { position: relative; margin-top: 0; padding: 17px; border: 1px solid #e4cbd3; border-radius: 20px; background: #fffdfa; box-shadow: 0 4px 0 #e8dce2; }
.draft-card-top { gap: 6px; }
.draft-index { display: none; }
.draft-time { width: 117px; color: var(--coral); font-size: 38px; letter-spacing: -.07em; }
.time-nudge { gap: 4px; }
.time-nudge button { min-width: 35px; min-height: 44px; background: #f2edf9; color: #81678a; border-radius: 10px; }
.time-nudge button:hover { background: #e9dff5; }
.delete-pick { min-width: 30px; width: 30px; min-height: 44px; color: #9c8893; }
.note-field { margin-top: 13px; }
.note-field textarea { min-height: 112px; border: 1px solid #efe3e5; border-radius: 13px; background: #faf5f3; color: #64535d; padding: 13px 12px 27px; font-size: 14px; }
.note-field textarea::placeholder { color: #ae97a3; }
.note-field textarea:focus { background: #fffafd; border-color: #e5aabd; }
.note-counter { right: 12px; bottom: 8px; color: #a68b97; }
.draft-card-bottom { gap: 5px; margin-top: 5px; }
.draft-card-bottom > span { font-size: 10px; color: #a18d97; }
.preview-pick { color: #906b7d; }
.community-view-tabs { display: flex; gap: 8px; width: fit-content; background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 16px; }
.community-view-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 91px; padding: 8px 17px; border: 1px solid #e6d9dd; border-radius: 28px; color: #96818e; background: #fffaf6; font-size: 12px; }
.community-view-tabs button svg { width: 15px; height: 15px; stroke-width: 1.8; }
.community-view-tabs button.active, .community-view-tabs button[aria-pressed='true'] { color: var(--coral); background: #ffe6ed; border-color: #f0b4c5; box-shadow: none; font-weight: 700; }
.community-view-tabs button[data-view='ranking'].active svg { fill: currentColor; }
.community-toolbar { gap: 8px; margin-bottom: 11px; }
.community-toolbar > span { font-size: 10px; color: #9b8893; }
.list-filters { background: #e9dfe1; border-radius: 20px; }
.list-filters button { min-height: 44px; border-radius: 20px; font-size: 10px; color: #95808b; }
.list-filters button.active { color: #8b526a; background: #fffaf8; box-shadow: none; }
.ranking-item { --ticket-paper: #fffdf9; position: relative; margin: 11px 0; border: 1px solid #e6d8d8; border-radius: 19px; background: var(--ticket-paper); box-shadow: 0 3px 0 #e6dcdf; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ranking-item:first-child { --ticket-paper: #ffe9ee; border-color: #f0bdca; box-shadow: 0 3px 0 #eec9d4; }
.ranking-item:nth-child(3n + 2) { --ticket-paper: #f2edfc; border-color: #e0d7ee; }
.ranking-item:nth-child(3n + 3) { --ticket-paper: #f3f5df; border-color: #e2e5c7; }
.ranking-item[open] { background: var(--ticket-paper); border-color: #d4b9c5; }
.ranking-row { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; gap: 5px 10px; min-height: 112px; padding: 18px 16px 17px; color: var(--ink); }
.ranking-position { align-self: center; padding: 0; color: #a88d99; font: 600 10px/1 var(--mono); letter-spacing: -.08em; }
.ranking-item:first-child .ranking-position { color: #ce5e80; }
.ranking-time { min-width: 0; color: #725966; font: 600 29px/1.2 var(--mono); letter-spacing: -.075em; }
.ranking-item:first-child .ranking-time { color: #b34d6c; }
.ranking-count { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #927382; font: 500 12px/1 var(--mono); }
.ranking-count svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ranking-item:first-child .ranking-count { color: #a46d82; }
.ranking-count strong { color: inherit; font: inherit; }
.ranking-count small { display: inline; font: 400 10px/1 var(--sans); color: inherit; }
.ranking-notes-toggle { display: none; }
.ranking-chevron { display: grid; place-items: center; color: #a48c99; font-size: 20px; line-height: 1; transition: transform .2s ease; }
.ranking-chevron svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ranking-item[open] .ranking-chevron { transform: rotate(180deg); }
.ranking-peek { position: relative; grid-column: 2 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; min-width: 0; margin: 7px 0 0; overflow: hidden; color: #49333f; font-size: 15px; font-weight: 600; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.ranking-peek::before { content: '“'; display: inline-block; margin-right: 4px; color: #b499a8; font: 700 20px/12px Georgia, serif; vertical-align: -3px; }
.ranking-peek:empty { display: none; }
.ranking-comments { margin: 0 16px; padding: 10px 0 13px; border-top: 1px dashed #d8c5ce; }
.ranking-comment { border-color: #e6d6df; padding: 8px 0 0; }
.ranking-comment-meta { color: #a18b96; font-size: 10px; }
.ranking-comment-meta .moment-time-button { color: #9a5e7c; font-size: 12px; }
.ranking-comment .moment-note { color: #49333f; font-size: 15px; font-weight: 500; line-height: 1.8; }
.ranking-comment .moment-author { color: #aa8f9d; font-size: 10px; }
.ranking-empty-note { color: #a18b98; font-size: 11px; }
.community-moment, .community-moment.is-mine, .community-moment.is-current { padding: 15px 17px 10px; margin: 11px 0; border: 1px solid #e4d6dc; border-radius: 19px; background: #fffdf9; box-shadow: 0 3px 0 #e8dee1; }
.community-moment:nth-child(3n + 2) { background: #f2edfc; border-color: #e0d7ee; }
.community-moment:nth-child(3n + 3) { background: #f3f5df; border-color: #e2e5c7; }
.community-moment.is-mine { background: #ffe9ee; border-color: #efbfcc; }
.community-moment.is-current { border-color: #d5799c; }
.moment-meta { margin-bottom: 3px; }
.moment-time-button { font-size: 29px; color: #725966; letter-spacing: -.075em; }
.moment-time-button:hover { color: var(--coral); }
.moment-time-button > svg { color: #ab8a9a; }
.moment-author { color: #a68d99; }
.moment-note { color: #49333f; font-size: 15px; font-weight: 500; line-height: 1.8; }
.moment-empty-note { color: #b09aa4; font-size: 12px; }
.moment-playing-label { color: #af879d; }
.note-like-button { color: #ac8c9b; min-width: 44px; min-height: 44px; }
.note-like-button[aria-pressed='true'] { color: var(--coral); border-color: #f3c1d1; background: #fff2f6; }
.note-like-count { font-size: 12px; }
.more-button { min-height: 46px; background: transparent; border: 1px dashed #dac7d1; border-radius: 15px; color: #9a788c; font-size: 11px; }
.more-button:hover { background: #faf1f6; }
.new-posts { min-height: 50px; border-radius: 15px; background: #eee7fc; border-color: #daceed; color: #8e6fa0; }
.new-posts span:last-child { color: #a18bac; }
.share-card { display: block; padding: 0; margin-top: 20px; border: 0; border-radius: 0; background: transparent; }
.share-card > p, .share-card > small { display: none; }
.share-button { width: 100%; min-height: 49px; padding: 11px 17px; background: var(--ink); border-radius: 28px; color: #fffcf9; font-size: 13px; gap: 10px; }
.share-button:hover { background: #4b3442; }
.share-button svg { width: 17px; height: 17px; }
.discovery-button, .delete-own-button { padding-top: 7px; margin-top: 12px; min-height: 44px; border-top: 0; color: #aa929f; font-size: 10px; }
.discovery-button:hover, .delete-own-button:hover { color: #85556e; }
.site-footer { margin-top: 42px; padding-top: 18px; border-top: 1px solid #e9dfe1; color: #a6919b; }
.site-footer > span:first-child { color: #b39ba7; font-size: 11px; }
.site-footer button { color: #ad95a1; font-size: 10px; }
.back-to-player { border-color: #e2c1cf; background: #fff9fbf5; color: #ab6382; border-radius: 25px; }
dialog { background: #fffaf5; border-color: #e7d6df; border-radius: 24px; }
dialog::backdrop { background: #392b355f; backdrop-filter: blur(6px); }
.dialog-header h2 { color: var(--ink); }
.dialog-primary { border-radius: 14px; background: var(--ink); }
.secondary-button { border-radius: 12px; background: #eee7f6; border-color: #e0d6ec; color: #8c6f9d; }
.url-input-row button { background: var(--coral); }
.share-moment-preview { border-radius: 19px; background: #ffe8ef; border-color: #efbed0; }
#share-title { color: #ad8195; }
#share-time { color: var(--coral); font-size: 48px; }
#share-note { color: #8d6176; }
.guide-list h3 { color: #775c6c; }
.guide-list p, .dialog-help, .share-mode-note, .share-compose-help { color: #957d8b; }
.mock-disclaimer { background: #f0e8f2; }
@media (hover: hover) {
  .ranking-item:hover { transform: translateY(-2px) rotate(-.2deg); box-shadow: 0 5px 0 #e4d6de; }
  .note-like-button:not(:disabled):hover { color: var(--coral); background: #fff0f5; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .wrap { width: calc(100% - 48px); }
  .workspace { gap: 26px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .selection-panel { padding: 19px; }
  .ranking-row { padding-inline: 13px; column-gap: 8px; }
  .ranking-time { font-size: 28px; }
  .draft-card { padding: 13px; }
  .draft-time { width: 97px; font-size: 33px; }
  .time-nudge button { min-width: 31px; }
}
@media (max-width: 800px) {
  .wrap { width: min(620px, calc(100% - 40px)); }
  .site-header { min-height: 78px; }
  .brand { font-size: 22px; }
  main.wrap { padding-top: 8px; }
  .concept-intro { padding: 5px 0 23px; margin-bottom: 8px; }
  .concept-copy { padding-right: 130px; }
  .concept-copy h1 { font-size: 34px; }
  .concept-copy p { font-size: 12px; }
  .concept-scrap { top: 4px; right: 3px; width: 115px; height: 100px; }
  .workspace { display: block; }
  .player-column { position: static; }
  .video-heading { min-height: 44px; margin-bottom: 10px; }
  .video-heading h2 { font-size: 17px; }
  .media-card { border-radius: 20px; }
  .selection-panel { margin-top: 30px; padding: 20px; border-radius: 24px; }
  .selection-panel h2 { font-size: 15px; }
  .panel-description { font-size: 11px; }
  .pick-button { min-height: 65px; }
  .note-field textarea, #share-text { font-size: 16px; }
  .draft-card { padding: 17px; }
  .draft-time { width: 124px; font-size: 39px; }
  .time-nudge button { min-width: 40px; }
  .ranking-row { grid-template-columns: 16px minmax(0, 1fr) auto 16px; padding: 17px 17px 16px; gap: 5px 11px; }
  .ranking-time { font-size: 30px; }
  .ranking-count { font-size: 12px; }
  .ranking-position { font-size: 10px; }
  .ranking-comments { margin-inline: 17px; }
  .ranking-peek { font-size: 15px; }
  .ranking-comment .moment-note { font-size: 15px; }
  .share-button { min-height: 50px; font-size: 13px; }
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { min-height: 73px; gap: 8px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand-mark { width: 29px; height: 34px; }
  .brand-mark svg { width: 28px; height: 28px; }
  .header-actions { gap: 6px; }
  .header-actions .quiet-button, .header-actions .icon-button { width: 44px; min-height: 44px; }
  .concept-intro { padding: 3px 0 23px; margin-bottom: 5px; }
  .concept-copy { padding-right: 0; }
  .concept-copy h1 { padding-right: 92px; font-size: 32px; line-height: 1.34; }
  .concept-copy p { max-width: 100%; margin-top: 15px; font-size: 12px; }
  .concept-scrap { top: 13px; right: 0; width: 91px; height: 86px; }
  .scrap-frame { inset: 12px 6px 12px 6px; border-width: 4px; }
  .scrap-frame b { font-size: 9px; bottom: 4px; right: 5px; }
  .scrap-play { width: 19px; height: 19px; margin-left: -8px; }
  .scrap-tape { width: 34px; height: 11px; top: 7px; left: 28px; }
  .scrap-heart { stroke-width: 5; }
  .scrap-spark { font-size: 25px; right: -3px; top: 0; }
  .video-heading h2 { font-size: 16px; }
  #change-video { padding-inline: 10px; font-size: 10px; }
  .media-card { border-radius: 17px; box-shadow: 0 5px 0 #e6dce4; }
  .video-meta { margin-top: 14px; margin-bottom: 11px; }
  .pick-button { min-height: 65px; padding: 14px 17px; border-radius: 18px; font-size: 15px; }
  .pick-time { font-size: 23px; padding-left: 14px; }
  .pick-button > svg { width: 23px; height: 23px; }
  .local-note { margin-top: 15px; font-size: 9px; }
  .selection-panel { margin-top: 25px; padding: 18px 15px 15px; border-radius: 22px; }
  .selection-panel::before { right: 26px; width: 40px; height: 11px; }
  .panel-topline { margin-bottom: 16px; gap: 8px; }
  .selection-panel h2 { font-size: 14px; }
  .count-pill { font-size: 11px; }
  .community-view-tabs { gap: 7px; margin-bottom: 15px; }
  .community-view-tabs button { min-width: 86px; min-height: 44px; font-size: 12px; padding-inline: 15px; }
  .community-toolbar > span { font-size: 9px; }
  .list-filters button { font-size: 10px; min-height: 44px; }
  .ranking-row { min-height: 106px; grid-template-columns: 14px minmax(0, 1fr) auto 14px; padding: 16px 13px 15px; gap: 4px 9px; }
  .ranking-time { font-size: 28px; }
  .ranking-count { font-size: 12px; gap: 4px; }
  .ranking-count svg { width: 13px; height: 13px; }
  .ranking-position { font-size: 10px; }
  .ranking-peek { margin-top: 7px; font-size: 15px; }
  .ranking-comments { margin-inline: 13px; }
  .ranking-comment .moment-note { font-size: 15px; }
  .draft-card { padding: 13px; }
  .draft-card-top { gap: 5px; }
  .draft-time { width: 110px; font-size: 36px; }
  .time-nudge button { min-width: 34px; }
  .delete-pick { min-width: 27px; width: 27px; }
  .draft-card-bottom > span { font-size: 9px; }
  .preview-pick { font-size: 10px; }
  .note-field textarea { padding-inline: 11px; font-size: 16px; }
  .empty-state { min-height: 210px; }
  .disclosure { font-size: 10px; }
  .commit-button { font-size: 12px; min-height: 54px; }
  .selected-summary { padding: 9px 12px; }
  .selected-summary > span { font-size: 11px; }
  .selected-summary button { font-size: 23px; }
  .community-moment, .community-moment.is-mine, .community-moment.is-current { padding: 13px 14px 9px; }
  .moment-time-button { font-size: 28px; }
  .moment-note { font-size: 15px; }
  .moment-author { font-size: 10px; }
  .discovery-button, .delete-own-button { font-size: 10px; }
  .site-footer { margin-top: 32px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 28px); }
  .brand { font-size: 18px; gap: 5px; }
  .brand-mark { width: 25px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .header-actions { gap: 4px; }
  .header-actions .quiet-button, .header-actions .icon-button { width: 44px; }
  .question-icon { display: grid; }
  .concept-copy h1 { padding-right: 82px; font-size: 29px; }
  .concept-copy p { max-width: 100%; font-size: 11px; }
  .concept-scrap { width: 80px; height: 80px; }
  .selection-panel { padding: 17px 12px 14px; }
  .ranking-row { grid-template-columns: 13px minmax(0, 1fr) auto 12px; gap: 4px 7px; padding-inline: 11px; }
  .ranking-time { font-size: 27px; }
  .ranking-count { font-size: 11px; }
  .ranking-peek { font-size: 15px; }
  .ranking-comments { margin-inline: 11px; }
  .draft-card { padding: 11px; }
  .draft-time { width: 89px; font-size: 31px; }
  .time-nudge button { min-width: 30px; }
  .delete-pick { min-width: 25px; width: 25px; }
  .pick-button { gap: 10px; font-size: 14px; padding-inline: 14px; }
  .pick-time { font-size: 21px; padding-left: 12px; }
  .selected-summary > span { font-size: 10px; }
  .selected-summary button { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ranking-item, .ranking-chevron { transition: none; }
  .ranking-item:hover { transform: none; }
}
/* A single, quiet hint sits beside the primary action. */
.pick-helper { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 13px 0 0; color: #a38b98; font-size: 10px; line-height: 1.6; }
.pick-helper svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pick-button[hidden] + .pick-helper { display: none; }
#commit-area { margin-top: 18px; }
.commit-button { justify-content: center; gap: 8px; }
.commit-button > svg { width: 16px; height: 16px; }
#community-count { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 5px; background: #e8e0df; color: #a18e95; font-size: 9px; line-height: 1.5; }
.ranking-comment-meta { margin-top: 3px; justify-content: space-between; }
.ranking-comment-meta .moment-author { margin-left: 0; }
.ranking-comment-meta .moment-note-footer { display: inline-flex; margin: 0 0 0 auto; }
.note-like-button { border: 1px solid #e3cbd5; background: #fffaf7b3; border-radius: 50%; width: 44px; height: 44px; padding: 5px; gap: 3px; }
.note-like-button svg { width: 15px; height: 15px; }
.note-like-count { font-size: 10px; }
.note-like-button[aria-pressed='true'] { border-color: #e998b2; background: #ffedf3; }
/* Icons and empty tickets use explicit dimensions outside buttons, too. */
#change-video > span { font-size: 11px; }
#change-video > svg { width: 15px; height: 15px; }
.pick-helper > svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.selected-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.selected-summary > span > svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.selected-summary > button { display: inline-flex; align-items: center; gap: 8px; }
.selected-summary > button > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.empty-state p { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.empty-state p > svg { width: 15px; height: 15px; fill: var(--coral); stroke: var(--coral); stroke-width: 1.5; }
.ghost-ticket { position: absolute; display: flex; align-items: center; justify-content: center; gap: 7px; width: 107px; height: 72px; border: 1.5px solid #dec9e7; border-radius: 14px; background: #eee7fa; }
.ghost-ticket > svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ghost-ticket-back { left: 0; top: 6px; color: #bdb0d2; transform: rotate(-13deg); }
.ghost-ticket-back > svg { width: 34px; height: 34px; fill: #e0d6ed; stroke: #b8a5cc; }
.ghost-ticket-front { left: 27px; top: 24px; color: #d8466a; background: #ffe8ef; border-color: #edb6c7; box-shadow: 2px 4px 0 #ddcbd65e; transform: rotate(8deg); }
.ghost-ticket-front > svg { width: 25px; height: 25px; fill: var(--coral); stroke: var(--coral); }
.ghost-ticket b { font: 650 18px/1 var(--mono); letter-spacing: -.07em; color: #bc7188; }
.empty-illustration > .empty-star { right: -5px; top: -10px; color: #c1bda0; }
.site-footer > .footer-heart:first-child { font-size: 25px; font-weight: 500; line-height: 1; color: #c7abb9; transform: rotate(-10deg); }
/* Small ticket cuts make each saved second feel collectible. */
.ranking-item::before, .ranking-item::after { content: ''; position: absolute; top: 46px; width: 13px; height: 13px; border: 1px solid #e0d0d7; border-radius: 50%; background: #f3ece8; z-index: 1; pointer-events: none; }
.ranking-item::before { left: -7px; }
.ranking-item::after { right: -7px; }
.ranking-item[open] .ranking-peek { display: none; }
.ranking-item[open] .ranking-row { min-height: 79px; }
#community-count:empty { display: none; }
/* Keep cancellation next to the chosen moment, even on narrow screens. */
.selected-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; }
.selected-summary > span { grid-column: 1; grid-row: 1; margin: 0; }
.selected-summary > [data-summary-time] { grid-column: 1; grid-row: 2; justify-self: start; min-height: 44px; margin-top: 3px; }
.cancel-pick, .selected-summary > .cancel-pick { min-height: 44px; padding: 8px 12px; border: 1px solid #e9bdc9; border-radius: 12px; background: #fffaf8; color: #9d4760; font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: 0; white-space: nowrap; }
.selected-summary > .cancel-pick { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.cancel-pick:hover { background: #ffe1e9; border-color: #d98da3; }
.draft-card-bottom { justify-content: space-between; gap: 12px; margin-top: 10px; }