:root { color-scheme: dark; --bg: #08111b; --panel: rgba(16, 25, 37, 0.88); --line: rgba(159, 194, 255, 0.16); --text: #eef6ff; --muted: #aac1d8; --accent: #8be3cf; --accent2: #ffd98e; --shadow: 0 20px 60px rgba(0,0,0,0.32);} * { box-sizing: border-box; } body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--text); background: linear-gradient(180deg, #09131f 0%, #050914 100%); min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .noise { position: fixed; inset: 0; opacity: .05; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.7) .7px, transparent .7px); background-size: 18px 18px; } .shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; } .card { background: rgba(16, 25, 37, 0.88); border: 1px solid var(--line); border-radius: 24px; padding: 1.3rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); } .inner-card { background: rgba(255,255,255,.03); } .accent { background: linear-gradient(135deg, rgba(139,227,207,.14), rgba(255,217,142,.1)), rgba(16,25,37,.88); } .hero { margin-bottom: 1rem; } .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; } .badges span { border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: .35rem .7rem; background: rgba(255,255,255,0.05); } .grid { display: grid; gap: 1rem; margin-top: 1rem; } .two-up { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .trip-top-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .map-wrap { min-height: 420px; } #map { width: 100%; min-height: 420px; border-radius: 18px; overflow: hidden; } .marker { width: 28px; height: 28px; border-radius: 50%; background: #8be3cf; color: #04111a; display: grid; place-items: center; font-weight: 800; font-size: 12px; border: 2px solid rgba(4,17,26,.75); box-shadow: 0 4px 12px rgba(0,0,0,.35); } .plain-list { margin: 0; padding-left: 1.2rem; } .plain-list li { margin-bottom: .5rem; } .album-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .photo-card { margin: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; } .photo-thumb { display: block; width: 100%; padding: .75rem; border: 0; background: transparent; cursor: pointer; } .photo-card img { width: 100%; height: 140px; object-fit: contain; display: block; background: rgba(255,255,255,.04); border-radius: 12px; } .button { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: .8rem 1rem; font-weight: 700; background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,.12); } .button.small { padding: .45rem .8rem; font-size: .85rem; } .priority-head { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; align-items: center; justify-content: space-between; } .muted-line { color: var(--muted); } .overview-shell summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem; font-weight: 700; } .overview-shell summary::-webkit-details-marker { display: none; } .summary-left { display: inline-flex; align-items: center; gap: .65rem; } .collapse-icon { display: inline-block; transition: transform .18s ease; } details:not([open]) > summary .collapse-icon { transform: rotate(-90deg); } .summary-hint { color: var(--muted); font-weight: 500; font-size: .9rem; } .overview-shell .overview-body { padding: 0 1rem 1rem; } .viewer-dialog { border: 0; padding: 0; background: transparent; } .viewer-dialog::backdrop { background: rgba(0,0,0,.55); } .viewer-shell { position: relative; width: min(92vw, 1100px); max-height: 90vh; background: rgba(4, 11, 20, 0.96); border: 1px solid var(--line); border-radius: 24px; padding: 1rem; box-shadow: var(--shadow); display: grid; gap: .75rem; } .viewer-stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; } .viewer-shell img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 16px; background: rgba(255,255,255,.04); } .viewer-actions { display: flex; justify-content: space-between; gap: .75rem; } .viewer-nav { width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: var(--text); font-size: 2rem; line-height: 1; cursor: pointer; } @media (max-width: 900px) { .trip-top-row { grid-template-columns: 1fr; } }