:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; background: #2b1825; color: #fffdfc; }
* { box-sizing: border-box; }
html { min-width: 320px; background: #2b1825; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-x: hidden; }
main { width: min(100%, 42rem); min-width: 0; padding: clamp(1.25rem, 5vw, 2rem); }
.eyebrow { color: #e0b64a; font-weight: 700; letter-spacing: .08em; font-size: .75rem; }
h1 { font: italic 700 clamp(2rem, 8vw, 3.8rem) ui-serif, Georgia, serif; line-height: 1.04; margin-block: .3rem 1rem; }
h2 { font-size: 1.2rem; margin-top: 0; }
p { overflow-wrap: anywhere; line-height: 1.5; }
section { min-width: 0; margin-top: 1.25rem; padding: 1.25rem; border: 1px solid #ffffff3b; border-radius: 1rem; background: #ffffff10; }
button { appearance: none; width: 100%; min-height: 48px; border: 0; border-radius: .75rem; padding: .75rem 1rem; color: #2b1825; background: #ffe083; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.secondary { color: #fffdfc; background: #ffffff20; border: 1px solid #ffffff45; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-block: 1rem; }
.actions #record { grid-column: 1 / -1; }
.check { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.45; margin-block: 1rem; }
.check input { margin-top: .25rem; min-width: 1rem; min-height: 1rem; }
.hint, .status, .photos span { color: #f4d5df; }
.photos { display: grid; gap: .35rem; margin-block: 1rem; font-weight: 700; }
.photos span { font-size: .85rem; font-weight: 400; }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .4rem; }
audio { width: 100%; max-width: 100%; margin-bottom: .75rem; }
.photo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; padding: 0; list-style: none; }
.photo-list li { display: grid; gap: .4rem; min-width: 0; color: #f4d5df; font-size: .8rem; }
.photo-list img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid #ffffff45; border-radius: .65rem; background: #1f111b; }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: #160c14d9; backdrop-filter: blur(8px); }
.modal[hidden] { display: none; }
.modal-card { width: min(100%, 24rem); padding: 1.5rem; border: 1px solid #ffffff45; border-radius: 1rem; background: #2b1825; box-shadow: 0 1.5rem 4rem #0008; text-align: center; }
.modal-card h2 { margin-block: 1rem .5rem; }
.modal-card p { margin-block: 0 1.25rem; color: #f4d5df; }
.modal-progress { width: 2.5rem; aspect-ratio: 1; margin-inline: auto; border: .25rem solid #ffffff35; border-top-color: #ffe083; border-radius: 50%; animation: modal-spin .8s linear infinite; }
@keyframes modal-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .modal-progress { animation: none; border-color: #ffe083; } }
@media (max-width: 520px) { body { place-items: start center; } h1 { font-size: clamp(2rem, 11vw, 3rem); } section { padding: 1rem; border-radius: .9rem; } .actions, .photo-actions { grid-template-columns: 1fr; } .actions #record { grid-column: auto; } }