/* "Make it yours": copy + a scaled mini window whose wallpaper the app's effect engine (fx.wasm) draws, plus real controls.
   Window colours follow demo.css (the replica) so the two read as the same app. mine.js drives it. */
.mine { padding: 72px 0 40px; }
.mine h2 { max-width: none; font-size: clamp(28px, min(3.5vw, 6vh), 46px); }
.mine [hidden] { display: none !important; }
.mine-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.mine-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.mine-points li { color: var(--ink-2); font-size: .95rem; padding-left: 16px; border-left: 1px solid var(--border-hi); }
.mine-points strong { color: var(--ink-1); font-weight: 600; }
.mine-copy .note { margin-top: 22px; max-width: 56ch; font-size: .9rem; }

/* ---- the mini window: 700x440 design px, scaled by --fit (mine.js sets it from the box's width) */
.mw-box { --fit: .8; position: relative; width: 100%; aspect-ratio: 700 / 440; }
.mw {
  position: absolute; left: 0; top: 0; width: 700px; height: 440px; transform: scale(var(--fit)); transform-origin: 0 0;
  border-radius: 12px; overflow: hidden; isolation: isolate; background: #0e0e11; color: #f2f2f5; text-align: left;
  font: 400 12px/1.25 var(--font); user-select: none;
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .5);
  display: grid; grid-template-rows: 26px 1fr;
}
.mw-wall { position: absolute; inset: 0; z-index: 0; opacity: var(--o, .35); overflow: hidden; pointer-events: none; }
.mw-wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s ease; }
.mw-wall canvas.show { opacity: 1; }
.mw-fb { position: absolute; inset: -20px; background: #0e0e11 center / cover no-repeat; opacity: 0; transition: opacity .4s ease; }
.mw-wall.fb-on .mw-fb { opacity: 1; }
.mw-wall.fb-blur .mw-fb { filter: blur(16px) saturate(1.2); }
/* what the app lays over the picture with "Fade toward the bottom" (app/src/ui/backdrop.rs): clear at the top, solid background at the bottom */
.mw-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .3s ease;
  background: linear-gradient(180deg, rgba(14, 14, 17, 0) 0%, rgba(14, 14, 17, .15) 25%, rgba(14, 14, 17, .92) 70%, #0e0e11 100%); }
.mw.nofade .mw-fade { opacity: 0; }
.mw-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 15, .72); border-bottom: 1px solid #1f1f25; color: #a6a6b0; font-size: 11px; font-weight: 500; }
.mw-lights { position: absolute; left: 10px; display: flex; gap: 7px; }
.mw-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mw-lights i:nth-child(2) { background: #febc2e; } .mw-lights i:nth-child(3) { background: #28c840; }
.mw-body { position: relative; z-index: 2; display: flex; min-height: 0; }
.mw-side { flex: none; width: 150px; padding: 10px 7px; background: rgba(18, 18, 22, .92); border-right: 1px solid #1f1f25; }
.mw-brand { display: flex; align-items: center; gap: 7px; padding: 0 7px 10px; }
.mw-brand img { border-radius: 6px; }
.mw-brand b { font-size: 13px; font-weight: 700; }
.mw-side p { display: flex; align-items: center; gap: 8px; height: 24px; margin: 0; padding: 0 8px; border-radius: 7px; color: #b4b4bd; font-weight: 500; }
.mw-side p i { width: 11px; height: 11px; border-radius: 3px; background: #ff7a8a; opacity: .85; }
.mw-side p.on { background: #24242c; color: #f2f2f5; }
.mw-side h4 { margin: 9px 0 2px; padding: 0 8px; font-size: 10.5px; font-weight: 500; color: #8a8a94; }
.mw-main { flex: 1; min-width: 0; padding: 14px 22px 0; overflow: hidden; }
.mw-main h5 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #f2f2f5; }
.mw-main h6 { margin: 10px 0 8px; font-size: 13.5px; font-weight: 700; color: #f2f2f5; letter-spacing: -.01em; }
.mw-main ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 104px); justify-content: space-between; gap: 12px; }
.mw-art { aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: #1c1c22; margin-bottom: 6px; }
.mw-art img { width: 100%; height: 100%; object-fit: cover; }
.mw-main li b, .mw-main li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-main li b { font-size: 11px; font-weight: 600; color: #f2f2f5; }
.mw-main li span { font-size: 10.5px; color: #a6a6b0; margin-top: 1px; }
.mw-tag { position: absolute; right: 8px; top: 4px; z-index: 3; padding: 1px 8px; border-radius: 999px; background: rgba(14, 14, 17, .78); border: 1px solid var(--border-hi); color: var(--ink-2); font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; pointer-events: none; }
.mw-box.drop::after { content: "Drop a PNG or JPEG"; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; border-radius: 12px; background: rgba(14, 14, 17, .7); border: 2px dashed var(--accent); color: var(--ink-1); font-weight: 600; }

/* ---- controls */
.mine-ctl { margin-top: 18px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: grid; gap: 14px; }
.mine-row { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 9px; }
.mine-row legend, .mine-str > label { padding: 0; font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mine-row legend { margin-bottom: 9px; }
.mine-o { position: relative; display: block; }
.mine-o input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mine-o span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0 14px; color: var(--ink-2); font-size: .9rem; font-weight: 550; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mine-o input:checked + span { color: var(--ink-1); background: var(--accent-soft); border-color: var(--accent); }
.mine-o input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg .mine-o span { border: 1px solid var(--border-hi); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.seg .mine-o:hover input:not(:checked) + span { background: rgba(255, 255, 255, .06); color: var(--ink-1); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip span { min-height: 40px; border: 1px solid var(--border-hi); border-radius: 999px; background: rgba(255, 255, 255, .02); }
.chip:hover input:not(:checked) + span { background: rgba(255, 255, 255, .06); color: var(--ink-1); }
.mine-desc { margin: 0; color: var(--ink-3); font-size: .86rem; min-height: 1.4em; }
.mine-pic { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mine-file { position: relative; display: inline-flex; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: .9rem; }
.mine-file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 0; }
.mine-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mine-rm { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.mine-rm:hover { color: var(--ink-1); }
.mine-name { color: var(--ink-2); font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mine-priv { flex-basis: 100%; margin: 0; color: var(--ink-3); font-size: .84rem; }
.mine-two { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 28px; }
.mine-str { display: grid; gap: 4px; }
.mine-str label { display: flex; justify-content: space-between; }
.mine-str output { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.mine-str input { width: 100%; height: 36px; margin: 0; accent-color: var(--accent); cursor: pointer; touch-action: pan-y; }
.mine-sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-1); font-size: .9rem; font-weight: 550; cursor: pointer; }
.mine-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mine-sw .sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: #34343c; position: relative; transition: background .2s; }
.mine-sw .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f2f2f5; transition: transform .2s var(--e-enter); }
.mine-sw input:checked ~ .sw { background: var(--accent); }
.mine-sw input:checked ~ .sw::after { transform: translateX(16px); background: var(--accent-ink); }
.mine-sw input:focus-visible ~ .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.mine-status { margin: 0; min-height: 1.3em; color: var(--ink-3); font-size: .84rem; }
.mine-status:empty { display: none; }

@media (max-width: 899px) {
  .mine { padding-top: 56px; }
  .mine-grid { grid-template-columns: minmax(0, 1fr); }
  /* phone/tablet: intro text, then the preview with its controls, then the list of what can be changed */
  .mine-copy { display: contents; }
  .mine-copy > .eyebrow, .mine-copy > h2, .mine-copy > .lead { order: 1; }
  .mine-demo { order: 2; }
  .mine-copy > .mine-points, .mine-copy > .note { order: 3; }
  .mine-copy > .lead { margin-bottom: 4px; }
  .mine-copy > .mine-points { margin-top: 4px; }
  .mine-copy > .note { margin-top: 0; }
}
@media (max-width: 520px) {
  .mine-ctl { padding: 14px 12px 12px; }
  .seg .mine-o span { padding: 0 6px; font-size: .84rem; }
  .mine-two { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-wall canvas, .mw-fb, .mw-fade, .mine-sw .sw, .mine-sw .sw::after, .mine-o span { transition: none; }
}

/* ---- theme + shortcuts, below the background controls */
.mine-more { margin-top: clamp(56px, 8vw, 96px); align-items: center; }
.mine-text h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.mine-text p { margin-top: 14px; max-width: 56ch; }
.mine-text h3 + p { margin-top: 16px; }
.mine-text .seg.two { margin-top: 22px; max-width: 280px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mine-shot { margin: 0; }
.mine-frame { position: relative; aspect-ratio: 1400 / 1121; overflow: hidden; background: #0e0e11; border: 1px solid var(--border-hi); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9); }
.mine-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity .45s ease; }
.mine-frame .s-light { opacity: 0; }
.mine-shot[data-theme="light"] .s-light { opacity: 1; }
.mine-shot figcaption { margin-top: 12px; color: var(--ink-3); font-size: .88rem; }
.keys { list-style: none; margin: 0; padding: 4px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.keys li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 6px 0; border-top: 1px solid var(--border); color: var(--ink-2); font-size: .93rem; }
.keys li:first-child { border-top: 0; }
.keys-k { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.keys-k i { font: normal 500 12px var(--mono); color: var(--ink-3); padding: 0 2px; }
.keys kbd { min-width: 28px; padding: 3px 8px 4px; text-align: center; font: 500 12px/1.3 var(--mono); color: var(--ink-1); background: var(--surface-hi); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 7px; }
.keys .keys-num { color: var(--ink-1); }
.mine-keys .note { margin-top: 12px; }
@media (max-width: 899px) {
  .mine-more { margin-top: 56px; gap: 24px; }
  .mine-text .seg.two { max-width: none; }
}
@media (max-width: 520px) {
  .keys { padding: 2px 14px; }
  .keys li { font-size: .88rem; }
  .keys-num > span:first-child { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .mine-frame img { transition: none; } }