/* LOOKIN’ FAMOUS — On Set
   One visual system. Environment and interface follow the same three-act sequence.
   Decorative layers never enter the 1080 × 1080 photo renderer. */
:root {
  color-scheme: dark;
  --ink: #10120f; --paper: #f8f3e7; --warm: #d7b782; --red: #c8493a;
  --muted: #d0c7b6; --rule: #f8f3e740;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --sans: 'DM Sans', Helvetica, Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --side: min(calc(100vw - 28px), calc(100dvh - 318px - var(--safe-top) - var(--safe-bottom)), 520px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body { color: var(--paper); background: #13110e; font-family: var(--sans); overflow: hidden; overscroll-behavior: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
/* flip camera: sits right of the shutter, same quiet style as the retake arrow */
.row .flipcam { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 48px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #10120f59; color: #f8f3e7; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.row .flipcam svg { width: 24px; height: 24px; }
.row .flipcam:active { transform: translateY(-50%) rotate(-180deg); }
#flipcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; filter: blur(14px) brightness(.85); transform-origin: 50% 50%; backface-visibility: visible; }
#flipcover.on { display: block; }
#flipcover.turn { animation: camturn .5s cubic-bezier(.45,.05,.35,1) both; }
#flipcover.out { opacity: 0; transition: opacity .25s ease; }
video.hiding { opacity: 0; }
.window { perspective: 900px; }
@keyframes camturn { from { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(90deg) scale(.92); } to { transform: rotateY(180deg) scale(1); } }
/* front-camera flash: the whole screen glows white while the photo is taken */
.flash.hold { display: block; opacity: 1; animation: none; background: #fffdf6; }
@media (prefers-reduced-motion: reduce) { #flipcover.turn { animation: none; } }
/* sign + final (upright phones): the photo stays put; the heading drops to sit ~20px above it.
   The rules that frame the pop-up flash belong to the camera screen only. */
.stagebox::before, .stagebox::after { display: none; }
header { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
@media not ((min-width: 1000px) and (min-height: 601px)) { @media not ((orientation: landscape) and (max-height: 600px)) {
  .app header { transform: translateY(30px); }
  @media (max-height: 620px) and (orientation: portrait) { .app header { transform: translateY(20px); } }
} }
button:focus-visible, a:focus-visible { outline: 2px solid #ffe0a3; outline-offset: 5px; }
button { cursor: pointer; }
/* The room is a separate layer, so its light and depth can change without moving the photo. */
.world { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background: #14100d; }
.world__room { position: absolute; inset: -1%; background: url('assets/famous-shoot-set.jpg') 50% 50% / 100% 100% no-repeat; transform: scale(1.01); filter: brightness(.87) saturate(.92); }   /* the room never moves or changes brightness between pages */
.world__light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, transparent 20%, #07080618 55%, #07080673 100%); transition: background .75s ease; }
.world__grain { position: absolute; inset: 0; opacity: .045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 104px auto 126px; justify-content: center; justify-items: center; align-content: center; gap: 10px; padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 14px); }
header { width: var(--side); height: 104px; display: grid; align-content: start; text-align: center; gap: 9px; position: relative; padding: 0 0 7px; }
h1 { margin: 0; font: 800 clamp(78px, 24vw, 112px)/.78 var(--display); text-transform: uppercase; letter-spacing: -.032em; color: var(--paper); }
/* the star rides at the end of the title itself, so it can never sit on a letter */
h1 { position: relative; justify-self: center; }
/* the star: same corner on every page */
.star { position: fixed; z-index: 2; top: calc(var(--safe-top) + 18px); right: max(20px, env(safe-area-inset-right, 0px)); width: 22px; height: 22px; background: var(--paper); clip-path: polygon(50% 0,58% 38%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 38%); pointer-events: none; }
header::after { display: none; }
.tag { margin: 0; color: #ece3d1; font: 400 13px/1.45 var(--sans); letter-spacing: .01em; }   /* sentence case, like the line under Famous. */
.tag .nb { white-space: nowrap; }
.inmag { margin: 0; text-align: center; justify-self: center; color: #ded4c1; font: 400 12px/1.45 var(--sans); text-wrap: balance; max-width: 100%; }
.inmag a { color: #fff7e6; font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
/* The square remains anchored to this slot through every state. */
.stagebox { width: var(--side); position: relative; padding-top: 40px; }
.stagebox::before, .stagebox::after { content: ''; position: absolute; top: 25px; height: 1px; width: calc(50% - 53px); background: linear-gradient(90deg, transparent, #f8f3e745); }
.stagebox::before { left: 0; }.stagebox::after { right: 0; transform: scaleX(-1); }
.print { position: relative; width: var(--side); height: var(--side); flex: none; background: var(--paper); box-shadow: 0 20px 55px #0008; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .65s ease; }
.print.live { background: transparent; box-shadow: none; transform: none; }
.print:not(.live) { transform: rotate(-.6deg); }
.window { position: absolute; inset: 0; overflow: hidden; z-index: 1; background: #0e140fb8; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.window::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg,#ffffff06,transparent 50%); }
video, .full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
video { object-fit: cover; filter: contrast(1.14) saturate(1.25) brightness(1.06); }
video.selfie { transform: scaleX(-1); }
.full { object-fit: contain; }
#result { -webkit-touch-callout: default; }
.zoomer { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
.zin { position: absolute; inset: 0; transform-origin: 0 0; }
#ink { z-index: 2; touch-action: none; cursor: crosshair; }
.frameline { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 1px 1px #fff8e840,inset -1px -1px #fff8e81f; }
.gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg,transparent 20%,#f8f3e70a 37%,transparent 47%); mix-blend-mode: screen; }
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks i { position: absolute; width: 24px; height: 24px; border: 0 solid #f8f3e7b3; }
.marks i:nth-child(1) { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.marks i:nth-child(2) { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.marks i:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.marks i:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.marks b { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; opacity: .55; }
.marks b::before,.marks b::after { content: ''; position: absolute; background: #fff; }
.marks b::before { left: 6.5px; top: 0; width: 1px; height: 14px; }.marks b::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
.topbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #fff; font: 500 9px/1 var(--sans); letter-spacing: .14em; }
.topbar span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 7px; border-radius: 50%; background: #fff; vertical-align: 1px; }
.start { position: absolute; inset: 0; z-index: 3; background: transparent; border: 0; display: grid; place-items: center; }
.start span { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 18px 31px; border: 1px solid #fff5df99; border-radius: 999px; color: #fff8e8; background: #f8f3e710; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .2s, transform .2s; }
.start:hover span { background: #f8f3e723; }.start:active span { transform: scale(.96); }
/* A real pop-up flash, rendered with a restrained equipment palette. */
.popflash { position: absolute; bottom: 100%; right: 0; left: auto; width: 76px; min-height: 44px; padding: 0; border: 0; color: #fff; background: none; }
.popflash .unit { display: block; position: relative; width: 76px; height: 44px; }
.popflash .base { position: absolute; left: 7px; right: 7px; bottom: 0; height: 6px; background: #252920; border: 1px solid #d4d2bf40; border-bottom: 0; }
.popflash .arm { position: absolute; left: 22px; right: 22px; bottom: 6px; height: 18px; background: linear-gradient(#a4a597,#626a59) left / 3px 100% no-repeat,linear-gradient(#a4a597,#626a59) right / 3px 100% no-repeat; transform-origin: bottom; transform: scaleY(0); transition: transform .32s cubic-bezier(.3,1.6,.5,1); }
.popflash .head { position: absolute; bottom: 6px; left: 0; right: 0; height: 17px; background: #2a2e25; border: 1px solid #e8e8d76b; border-radius: 3px 3px 0 0; display: grid; place-items: center; transition: transform .32s cubic-bezier(.3,1.6,.5,1); }
.popflash .bolt { grid-area: 1/1; width: 14px; height: 14px; color: #f8f3e7; transition: opacity .2s; }
.popflash .lens { grid-area: 1/1; width: 50px; height: 6px; opacity: 0; background: #fff4d8; transition: opacity .2s,box-shadow .2s; }
.popflash[aria-pressed='true'] .arm { transform: scaleY(1); }.popflash[aria-pressed='true'] .head { transform: translateY(-18px); }.popflash[aria-pressed='true'] .bolt { opacity: 0; }.popflash[aria-pressed='true'] .lens {
  opacity: 1; height: 8px;
  background: repeating-linear-gradient(90deg,#fffefa 0 3px,#f6eed5 3px 4px);
  box-shadow: 0 0 3px 2px #fffefa,0 0 13px 5px #fff7dab3,0 0 31px 11px #ffdf9266;
}
.popflash .head::after {
  content: ''; position: absolute; inset: -26px -30px; pointer-events: none;
  background: radial-gradient(ellipse,#fff9dc55 0%,#ffe6a52e 32%,transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
.popflash[aria-pressed='true'] .head { border-color: #fff3cd; background: #565443; box-shadow: 0 0 10px #ffe8a644; }
.popflash[aria-pressed='true'] .head::after { opacity: 1; }
.controls { width: var(--side); height: 126px; display: grid; justify-items: center; align-content: start; padding-top: 5px; }
.row { display: flex; justify-content: center; align-items: center; width: 100%; position: relative; }
.row::before,.row::after { content: ''; width: calc(50% - 65px); height: 1px; background: #f8f3e730; position: absolute; top: 50%; }
.row::before { left: 0; }.row::after { right: 0; }
.shutter { width: 74px; height: 74px; border: 0; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 0 4px #171b14,0 0 0 5.5px #fff8e8,0 6px 25px #0005; transition: transform .15s; }
.shutter:active { transform: scale(.9); }
.stack { display: flex; flex-direction: column; align-items: center; width: 100%; }
#signCtl { gap: 8px; }
/* optional @ for tagging + the one-line consent, in the set's cream-on-dark language */
/* just a line to write on, like the signature line */
.handle { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: min(100%,240px); height: 34px; padding: 0 6px 6px; border: 0; border-bottom: 1px solid #f8f3e766; background: none; transition: border-color .2s; }
.handle span { font: 400 17px/1 var(--sans); color: #f8f3e7cc; }
.handle input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; color: #fff8e8; font: 400 16px/1.2 var(--sans); text-align: left; padding: 0; }
.handle input::placeholder { color: #f8f3e799; font-style: italic; font-size: 14px; letter-spacing: .01em; }
.handle:focus-within { border-bottom-color: #fff8e8; }
.consent { margin: -2px 0 0; font: 500 7px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #f8f3e78c; text-align: center; white-space: nowrap; }
.primary { width: min(100%,280px); min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 18px 26px; border: 0; border-radius: 999px; color: #151611; background: #fff8e8; font: 600 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; box-shadow: 0 6px 22px #0004; transition: background .15s,transform .15s; }
.primary:hover { background: #fff; }.primary:active { transform: scale(.98); }.primary:disabled { opacity: .6; cursor: progress; }
/* retake: just the arrow, top-left corner (mirrors the star); full 44px tap area */
.redo { position: fixed; z-index: 3; top: calc(var(--safe-top) + 6px); left: max(8px, env(safe-area-inset-left, 0px)); width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: none; color: #f8f3e7b3; transition: color .15s, transform .25s; }
.redo:hover { color: #fff8e8; }
.redo:active { transform: rotate(-35deg); background: none; }
.redo svg { width: 20px; height: 20px; }
.eyebrow { font: 600 10.5px/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; text-decoration: none; color: #f8f3e7; width: min(100%,320px); min-height: 34px; display: flex; align-items: flex-end; justify-content: center; margin-top: -4px; padding-bottom: 8px; }
.eyebrow::after { display: none; }
.track { display: flex; align-items: center; gap: 12px; width: min(100%,320px); padding: 9px 11px 9px 9px; border-radius: 2px; color: #171812; background: #f8f3e7; text-decoration: none; box-shadow: 0 6px 22px #0004; }
.track img { width: 52px; height: 52px; display: block; object-fit: cover; }
.track .meta { flex: 1; min-width: 0; display: grid; gap: 7px; text-align: left; }
.track b { font: 800 34px/.8 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.track small { font: 500 12px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; padding-left: 2px; }   /* lines up with the F of FAMOUS */
.track .play { flex: none; width: 44px; height: 44px; border: 1px solid #171812; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; background: #fffdf6; color: #171812; }
.track:hover { background: #fffcf3; }
.signhint { position: absolute; z-index: 5; pointer-events: none; left: 13%; right: 13%; bottom: 12%; display: grid; justify-items: center; gap: 8px; color: #fff; filter: drop-shadow(0 2px 6px #0009); }
.signhint svg { width: 78%; height: auto; overflow: visible; }
.signhint path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: scribble 2.4s ease-in-out infinite; }
.xline { display: flex; align-items: flex-end; width: 100%; position: relative; }.xline span { position: absolute; right: calc(100% + 8px); bottom: -5px; font: 400 28px/1 var(--sans); }.xline i { flex: 1; height: 1px; background: #fff; }
.signhint p { margin: 0; font: 600 9px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.msg { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; text-align: center; padding: 20px; color: #fff8e8; background: #161b14; font: 400 13px/1.6 var(--sans); }
.offmsg { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 260px; }
.offmsg b { font: 800 40px/.9 var(--display); text-transform: uppercase; }.offmsg span { color: #ccc8b6; }
.openout { display: inline-block; text-decoration: none; border: 0; border-radius: 999px; padding: 15px 22px; min-height: 44px; background: #fff8e8; color: #171812; font: 600 10px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.flash { position: fixed; inset: 0; z-index: 50; background: #fff; pointer-events: none; opacity: 0; display: none; }.flash.go { display: block; animation: flash .7s ease-out; }
.develop { animation: develop .9s cubic-bezier(.2,.8,.2,1); }.pop { animation: title-reveal .4s cubic-bezier(.2,.8,.2,1); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes develop { from { opacity: 0; filter: brightness(2.2) blur(6px); } to { opacity: 1; filter: none; } }
@keyframes title-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scribble { 0% { stroke-dashoffset: 520; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 520; opacity: 0; } }
@media (min-aspect-ratio: 1/1) { .world__room { background-size: cover; background-position: 50% 53%; } }
/* Desktop is a shoot composition, with equal side columns keeping the square centered. */
@media (min-width: 1000px) and (min-height: 601px), (orientation: landscape) and (max-height: 600px) {
  :root { --edge: max(18px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --col: clamp(140px,23vw,240px); --side: min(calc(100dvh - 112px),calc(100vw - 2 * var(--edge) - 2 * var(--col) - 48px),560px); }
  .app { grid-template-columns: var(--col) auto var(--col); grid-template-rows: 1fr; gap: 24px; align-items: center; padding: 16px var(--edge); }
  header { width: var(--col); height: auto; padding: 0; align-content: center; gap: 18px; }
  /* title pinned in the same spot sideways; a longer line under it grows downward */
  header { align-self: stretch; align-content: start; padding-top: calc(50dvh - 16px - 0.5 * (clamp(49px,15vh,72px) * .84) - 24px); }
  h1 { font-size: clamp(62px,11vh,88px); line-height: .84; }
  .tag { font-size: 12px; line-height: 1.5; }
  .inmag { font-size: 12px; line-height: 1.7; }
  .stagebox { padding: 0; }.stagebox::before,.stagebox::after { top: -15px; }
  .controls { width: var(--col); height: auto; padding: 0; align-content: center; }
  .row::before,.row::after { width: calc(50% - 51px); }
  .primary { width: 100%; padding: 18px 21px; }
  .track { width: 100%; gap: 8px; padding: 8px; }
  .track img { width: 36px; height: 44px; }
  .track b { font-size: 26px; }.track small { font-size: 10px; }
  .eyebrow { width: 100%; font-size: 9.5px; }.eyebrow::after { width: 20px; }
}
@media (orientation: landscape) and (max-height:600px) {
  :root { --col: clamp(140px,23vw,210px); --side: min(calc(100dvh - 104px),calc(100vw - 2 * var(--edge) - 2 * var(--col) - 48px)); }
  .app { gap: 24px; }.signhint p { font-size: 8px; letter-spacing: .1em; }
  #signCtl { gap: 4px; }
  .handle { height: 30px; padding: 0 6px 2px; }
  #signCtl .primary { min-height: 42px; padding: 12px 20px; }
  .consent { font-size: 7px; letter-spacing: .1em; margin: 0; }
  .redo { width: 34px; height: 34px; }
  #signCtl .primary { min-height: 38px; padding: 10px 18px; }
  h1 { font-size: clamp(49px,15vh,72px); }
}
@media (max-height: 620px) and (orientation: portrait) {
  :root { --side: min(calc(100vw - 28px),calc(100dvh - 292px - var(--safe-top) - var(--safe-bottom))); }
  .app { grid-template-rows: 86px auto 122px; gap: 10px; padding-top: calc(var(--safe-top) + 14px); padding-bottom: calc(var(--safe-bottom) + 14px); }
  header { height: 86px; gap: 8px; padding-bottom: 4px; } h1 { font-size: 76px; }
  .inmag { font-size: 11px; }.tag { font-size: 12px; }
  .stagebox { padding-top: 32px; }.stagebox::before,.stagebox::after { top: 19px; }
  .controls { height: 122px; padding-top: 2px; }.shutter { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
/* The final sentence needs two lines without displacing the square. */
@media (orientation:landscape) and (max-height:600px) and (max-width:700px) {
  .track { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .track img { grid-column:1; grid-row:1; }
  .track .play { grid-column:2; grid-row:1; justify-self:end; }
  .track .meta { grid-column:1 / -1; grid-row:2; gap:5px; }
  .track b { font-size:27px; }
  .track small { font-size:10px; }
}
/* small phones: a touch narrower so the raised flash clears the tagline */
@media (max-width: 360px) { .popflash, .popflash .unit { width: 58px; } .popflash .arm { left: 17px; right: 17px; } .popflash .lens { width: 38px; } }
/* the original camera glare: a diagonal lens reflection + corner bloom over the LIVE view only.
   It is a page layer (hidden after capture), so it never appears in the photo. */
.gloss {
  background:
    linear-gradient(118deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.22) 33%, rgba(255,255,255,.06) 37%, rgba(255,255,255,0) 44%),
    radial-gradient(60% 40% at 10% 4%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; z-index: 1;
}
/* flip camera: a bare icon sitting dead centre on the right-hand line, with the line parted around it */
.row .flipcam { right: calc((50% - 65px) / 2 - 22px); width: 44px; height: 44px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #f8f3e7d9; }
.row .flipcam svg { width: 22px; height: 22px; }
.row::after { -webkit-mask-image: linear-gradient(90deg,#000 calc(50% - 26px),transparent calc(50% - 26px),transparent calc(50% + 26px),#000 calc(50% + 26px)); mask-image: linear-gradient(90deg,#000 calc(50% - 26px),transparent calc(50% - 26px),transparent calc(50% + 26px),#000 calc(50% + 26px)); }
@media (min-width: 1000px) and (min-height: 601px), (orientation: landscape) and (max-height: 600px) {
  .row .flipcam { right: 0; }
  .row::after { display: none; }
}
/* @ field: Instagram logo, @ and text on one centred row, brighter so people notice it */
.handle { align-items: center; justify-content: center; gap: 6px; width: min(100%,260px); padding: 0 6px 6px; border-bottom-color: #f8f3e7b3; }
.handle .ig { width: 17px; height: 17px; flex: none; color: #fff8e8; }
.handle span { font: 500 16px/1 var(--sans); color: #fff8e8; margin-right: -3px; }
.handle input { flex: none; width: auto; line-height: 1; height: 22px; text-align: left; color: #fff8e8; }
.handle input::placeholder { color: #f8f3e7e6; font-style: italic; font-size: 14px; }
/* no star; the retake arrow takes its corner (top right), same cream white, a bit bigger */
.star { display: none; }
.redo { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); top: calc(var(--safe-top) + 8px); width: 52px; height: 52px; color: var(--paper); }
.redo svg { width: 28px; height: 28px; }
/* feels like an app, not a web page: no text highlighting or link previews on long-press.
   Exceptions: the finished photo keeps its save menu, and the @ field can still be typed in. */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, a { -webkit-user-drag: none; }
#result { -webkit-touch-callout: default; }
#handle { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* flip icon: a touch bigger and brighter */
.row .flipcam { color: var(--paper); }
.row .flipcam svg { width: 26px; height: 26px; }
/* Take Photo: no boxed pill. A small cream shutter-ring that breathes softly, with the label under it,
   in the same language as the real shutter below, so it reads as part of the camera, not a pop-up. */
.start { align-content: center; justify-items: center; gap: 14px; grid-auto-flow: row; }
.start .cue { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--paper); display: block; }
.start .cue::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--paper); opacity: .92; transition: transform .2s; }
.start .cue::before { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--paper); animation: cue 2.2s ease-out infinite; }
@keyframes cue { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.start span { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--paper); font: 600 11px/1 var(--sans); letter-spacing: .17em; text-shadow: 0 1px 8px #0009; }
.start:hover span { background: none; }
.start:active .cue::after { transform: scale(.88); }
.start:active span { transform: none; }
@media (prefers-reduced-motion: reduce) { .start .cue::before { animation: none; opacity: 0; } }
/* refine: a thin focus ring, not a second shutter */
.start .cue { width: 54px; height: 54px; border-width: 1px; border-color: #f8f3e7cc; }
.start .cue::after { inset: 22px; opacity: 1; }
.start .cue::before { border-width: 1px; }
.window:has(#start:not([hidden])) .marks b { display: none; }
/* Publish: smaller button, bigger word */
#signCtl .primary { width: min(100%, 210px); min-height: 46px; padding: 12px 24px; font-size: 14px; letter-spacing: .16em; }
/* Take Photo: centred, bigger, a thin cream outline; the same soft wave ripples out in its own pill shape */
.start .cue { display: none; }
.start span { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 18px 34px; border: 1px solid #f8f3e7cc; border-radius: 999px; background: #f8f3e70d; font: 600 14px/1 var(--sans); letter-spacing: .18em; text-shadow: none; }
.start span::before, .start span::after { content: ''; position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--paper); pointer-events: none; animation: pillwave 2.4s ease-out infinite; }
.start span::after { animation-delay: 1.2s; }
@keyframes pillwave { 0% { transform: scale(1, 1); opacity: .6; } 75%, 100% { transform: scale(1.28, 1.7); opacity: 0; } }
.start:active span { background: #f8f3e722; transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .start span::before, .start span::after { animation: none; opacity: 0; } }
/* @ + text stay centred on the line; the Instagram logo is pinned at the right end and never moves */
.handle { position: relative; width: min(100%,280px); padding: 0 34px 6px; }
.handle .ig { position: absolute; right: 4px; bottom: 9px; width: 18px; height: 18px; }
/* bottom line on every screen: copyright, plus the publishing note while signing */
.foot { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 16px calc(var(--safe-bottom) + 8px); display: grid; justify-items: center; gap: 3px; pointer-events: none; text-align: center; }
.foot p { margin: 0; white-space: nowrap; }
.foot .consent { display: none; margin: 0; font: 500 7.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #f8f3e7a6; }
body:has(.app[data-state='sign']) .foot .consent { display: block; }
.foot .legal { font: 400 9px/1.3 var(--sans); letter-spacing: .02em; color: #f8f3e780; }
.app { padding-bottom: calc(var(--safe-bottom) + 28px); }
/* Take Photo: a little smaller, wave a little less often */
.start span { padding: 15px 28px; font-size: 12.5px; }
.start span::before, .start span::after { animation-duration: 3.4s; }
.start span::after { animation-delay: 1.7s; }
/* publishing note sits right under Publish, same width as the button */
#signCtl .consent { display: block; margin: 2px 0 0; overflow: hidden; white-space: nowrap; text-align: center; font: 500 10px/1.3 var(--sans); letter-spacing: .01em; text-transform: none; color: #f8f3e7c7; }
/* "your instagram" matches the @: same size, same colour */
.handle input::placeholder { color: #fff8e8; font-size: 16px; opacity: 1; }
/* the two fine-print lines share one colour and sentence case */
#signCtl .consent, .foot .legal { color: #f8f3e7a6; text-transform: none; }
/* publishing note tucked right under the Publish button */
#signCtl .consent { margin-top: -3px; line-height: 1.1; }
@media (orientation: landscape) and (max-height: 600px) { #signCtl .consent { margin-top: 1px; } }
/* publishing note lives in the footer, right above the copyright, identical size and colour (sign screen only) */
.foot .consent { display: none; font: 400 9px/1.3 var(--sans); letter-spacing: .02em; text-transform: none; color: #f8f3e7a6; margin: 0; width: auto; }
body:has(.app[data-state='sign']) .foot .consent { display: block; }
.foot .legal { font: 400 9px/1.3 var(--sans); letter-spacing: .02em; }
/* Instagram logo: a touch bigger, nudged up */
.handle .ig { width: 20px; height: 20px; bottom: 11px; right: 3px; }
/* retake arrow turns clockwise, the same way as the browser's reload arrow */
.redo svg { transform: scaleX(-1); }
.redo:active { transform: rotate(35deg); }
.handle .ig { bottom: 7.6px; }   /* optically centred on the @ */
/* Publish: a little more breathing room, and the faintest wave so it wants to be tapped */
#signCtl #add { position: relative; margin-top: 8px; overflow: visible; }
#signCtl #add::before { content: ''; position: absolute; inset: -1px; border-radius: 999px; border: 1px solid var(--paper); pointer-events: none; animation: pubwave 4.2s ease-out infinite; }
@keyframes pubwave { 0% { transform: scale(1, 1); opacity: .32; } 70%, 100% { transform: scale(1.12, 1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #signCtl #add::before { animation: none; opacity: 0; } }
@media (orientation: landscape) and (max-height: 600px) { #signCtl #add { margin-top: 4px; } }
/* retake: system-style reload arrow (open circle, chevron head), drawn the right way round */
.redo svg { transform: none; width: 27px; height: 27px; }
/* one thing moving at a time: the Publish wave waits until they've signed */
#signCtl #add::before { animation: none; opacity: 0; }
#signCtl #add.wave::before { animation: pubwave 4.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { #signCtl #add.wave::before { animation: none; opacity: 0; } }
/* retake feedback: a quick clockwise spin before the page refreshes */
.redo.spin svg { animation: redospin .45s cubic-bezier(.3,.7,.3,1) both; }
@keyframes redospin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.redo:active { transform: scale(.92); }
/* autograph hint: just the self-drawing signature and its label; no rule line, so it never echoes the @ line */
.signhint .xline { display: none; }
.signhint { gap: 10px; }
.signhint { gap: 4px; }
.signhint p { margin-top: 0; }
/* softer waves */
@keyframes pubwave { 0% { transform: scale(1, 1); opacity: .2; } 70%, 100% { transform: scale(1.12, 1.45); opacity: 0; } }
@keyframes pillwave { 0% { transform: scale(1, 1); opacity: .38; } 75%, 100% { transform: scale(1.18, 1.5); opacity: 0; } }
/* whole final line is tappable; the @ stays the obvious link */
.inmag { cursor: pointer; position: relative; z-index: 3; }
.inmag a { padding: 6px 2px; margin: -6px -2px; }
/* the heading block sits above the photo area so its links can be tapped */
header { position: relative; z-index: 3; }
/* refresh arrow: top right on the sign AND final screens (go again), hidden while shooting */
.app[data-state='live'] > .redo { display: none; }
/* the heading never blocks taps underneath it; only its link line is tappable */
header { pointer-events: none; }
header .inmag, header .inmag a { pointer-events: auto; }
/* Stream now matches the cream of the player; Kaleb Cohen starts exactly under the F */
.eyebrow { color: var(--paper); opacity: 1; }
.track small { padding-left: .5px; }
.eyebrow { font-weight: 700; color: #fffaf0; text-shadow: 0 0 .6px #fffaf0; }
/* Stream now: brighter still */
.eyebrow { color: #ffffff; font-weight: 700; text-shadow: 0 0 1px #fff, 0 0 10px #fff8e866; }
/* the same satisfying press as Publish: a quick, soft squeeze on touch */
.track, .eyebrow, .inmag { transition: transform .15s ease, background .15s ease, opacity .15s ease; }
.track:active { transform: scale(.97); background: #fffcf3; }
.track:active .play { transform: scale(.9); }
.track .play { transition: transform .15s ease; }
.eyebrow:active { transform: scale(.95); opacity: .85; }
.inmag:active { transform: scale(.97); }
.inmag a:active { opacity: .75; }
/* flip icon: no press-and-hold rotation; a single smooth half-turn on each tap */
.row .flipcam, .row .flipcam:active { transform: translateY(-50%); transition: none; }
.row .flipcam svg { transform-origin: 50% 50%; will-change: transform; }
.row .flipcam svg.turning { animation: flipturn .55s cubic-bezier(.4,0,.2,1); }
@keyframes flipturn { from { transform: rotate(0deg); } to { transform: rotate(-180deg); } }
@media (prefers-reduced-motion: reduce) { .row .flipcam svg.turning { animation: none; } }
/* Stream now: real bold weight (now loaded), a bit larger, steady white at rest — no dimming on tap */
.eyebrow { font-weight: 700; font-size: 12px; color: #ffffff; opacity: 1; text-shadow: 0 0 8px #fff8e855; -webkit-font-smoothing: antialiased; }
.eyebrow:active { opacity: 1; transform: scale(.96); }
/* Stream now: always drawn the "pressed" (crisp, bright) way; tapping only squeezes it */
.eyebrow { display: inline-flex; transform: translateZ(0) scale(1); will-change: transform; backface-visibility: hidden; color: #ffffff; opacity: 1; filter: none; transition: transform .15s ease; }
.eyebrow:active, .eyebrow:hover, .eyebrow:focus { color: #ffffff; opacity: 1; filter: none; text-shadow: 0 0 8px #fff8e855; }
.eyebrow:active { transform: translateZ(0) scale(.95); }
/* tapping the @ squeezes just the @; tapping anywhere else on the line squeezes the whole line */
.inmag a { display: inline-block; transition: transform .15s ease, opacity .15s ease; }
.inmag:has(a:active):active { transform: none; }
.inmag a:active { transform: scale(.94); opacity: .8; }
/* subheads in DM Sans' real italic (a gentle slant, not a faked one) */
.tag, .inmag { font-style: italic; }
/* sideways: the footer room isn't needed at the bottom, keep the photo dead centre */
@media (orientation: landscape) and (max-height: 600px) { .app { padding-bottom: 16px; } }
/* fine print may wrap to a second line on narrow phones rather than run off the edge */
.foot p { white-space: normal; max-width: min(92vw, 340px); text-wrap: balance; }