@font-face { font-family: Onest; src: url('./assets/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; --bg:#eef2f7; --card:#fff; --ink:#16202b; --muted:#6b7785; --line:rgba(30,41,59,.08); --accent:#2f6fed; --accent-bg:#eaf1ff; --pill:#eef1f6; --bad:#b23b32; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { color-scheme:dark; --bg:#141414; --card:#1c1c1e; --ink:#f2f2f3; --muted:#a2a5ac; --line:rgba(255,255,255,.07); --accent:#4f86f7; --accent-bg:rgba(79,134,247,.14); --pill:rgba(255,255,255,.07); --bad:#ee6b66; }
}
:root[data-theme="dark"] { color-scheme:dark; --bg:#141414; --card:#1c1c1e; --ink:#f2f2f3; --muted:#a2a5ac; --line:rgba(255,255,255,.07); --accent:#4f86f7; --accent-bg:rgba(79,134,247,.14); --pill:rgba(255,255,255,.07); --bad:#ee6b66; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.6 Onest,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { min-height:44px; padding:9px 16px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--card); font:inherit; font-size:13px; font-weight:550; cursor:pointer; }
button:hover { background:var(--pill); }
button:disabled { opacity:.4; cursor:default; }
button.primary { color:#fff; background:var(--accent); border-color:transparent; }
button.danger { color:var(--bad); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.topbar { min-height:96px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px max(24px,calc((100vw - 1200px)/2)); border-bottom:1px solid var(--line); background:var(--card); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:21px; font-weight:750; letter-spacing:-.04em; }
.brand-mark { color:var(--accent); font-size:30px; line-height:1; }
.brand-caption { margin-left:16px; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; }
.toolbar { display:flex; align-items:center; gap:8px; }
.toolbar button { flex:0 0 88px; width:88px; height:44px; padding:0 8px; white-space:nowrap; }
.pill { display:inline-block; border-radius:999px; padding:4px 10px; background:var(--pill); color:var(--muted); font-size:12px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
main { max-width:790px; padding:56px 24px max(32px,env(safe-area-inset-bottom)); margin:auto; }
.feed-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:36px; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:650; letter-spacing:.12em; margin:0 0 10px; }
h1 { font-size:30px; line-height:1.2; letter-spacing:-.035em; margin:0 0 12px; font-weight:700; }
h2 { margin:0; font-size:23px; letter-spacing:-.02em; }
.subtitle { color:var(--muted); margin:0; font-size:13px; }
.grid-caption { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.08em; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.tile { position:relative; aspect-ratio:3/4; min-width:0; border-radius:0; overflow:hidden; background:var(--card); border:0; content-visibility:auto; contain-intrinsic-size:auto 300px; }
.tile img,.photo-frame img { position:absolute; max-width:none; pointer-events:none; user-select:none; }
.tile .photo-hit { display:block; position:absolute; inset:0; border:0; border-radius:0; background:transparent; padding:0; }
.tile .photo-hit:hover { background:transparent; }
.tile .tile-crop { position:absolute; bottom:8px; right:8px; padding:0 12px; background:var(--card); opacity:0; }
.tile:hover .tile-crop,.tile:focus-within .tile-crop { opacity:1; }
.tile.empty { display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px dashed var(--line); }
.tile.empty button { border:0; background:none; color:var(--muted); font-size:24px; }
.tile.drag-over { outline:3px solid var(--accent); outline-offset:-3px; }
.feed-bottom { text-align:center; margin-top:24px; }
.feed-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.feed-actions>button { height:44px; }
.feed-bottom p,.small { color:var(--muted); font-size:12px; }
dialog { color:var(--ink); background:var(--card); border:1px solid var(--line); }
dialog::backdrop { background:rgba(0,0,0,.4); }
.library { position:fixed; left:auto; right:0; top:0; bottom:0; margin:0; height:100dvh; max-height:100dvh; width:360px; max-width:100%; padding:16px; z-index:10; transform:translateX(100%); transition:transform 220ms ease; border:0; border-left:1px solid var(--line); border-radius:0; overflow:auto; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.library.is-visible { transform:translate(0,0); }
.library::backdrop { background:transparent; }
.library .panel-head { gap:8px; margin-bottom:6px; }
.library .panel-head>div { margin-right:auto; }
.library .eyebrow { margin-bottom:2px; font-size:9px; }
.library h2 { font-size:21px; }
.library .panel-head button { min-height:32px; padding:4px 9px; }
.library>.subtitle { font-size:11px; margin-bottom:12px; }
.library .small { font-size:11px; margin:8px 0; }
.library #library-more { min-height:32px; padding:4px 10px; margin-top:10px; }
.library .tile-to-feed { position:absolute; top:4px; right:4px; width:28px; height:28px; min-height:28px; padding:4px; border-radius:7px; display:grid; place-items:center; opacity:0; }
.library .tile:hover .tile-to-feed,.library .tile:focus-within .tile-to-feed { opacity:1; }
.library .tile :focus-visible { outline-offset:-2px; }
.in-feed { position:absolute; top:4px; left:4px; padding:1px 6px; border-radius:999px; background:var(--card); color:var(--ink); font-size:9px; pointer-events:none; }
@media(pointer:coarse) { .library .tile-to-feed { opacity:1; } }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.library-month { grid-column:1 / -1; margin:18px 0 8px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.library-item { min-width:0; }
.library-item .tile { width:100%; }
.library-footer { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.project-actions { display:flex; gap:6px; }
.project-actions button { min-height:32px; padding:4px 10px; font-size:11px; }
.storage-warning { font-size:12px; color:var(--bad); }
.viewer { width:100vw; height:100dvh; max-width:none; max-height:none; padding:20px; margin:0; border:0; background:rgba(20,20,20,.97); color:#fff; }
.viewer-top { display:flex; justify-content:space-between; align-items:center; max-width:960px; margin:auto; font-size:12px; }
.viewer-stage { display:flex; align-items:center; justify-content:center; gap:28px; margin:20px auto; }
.photo-frame { height:min(68dvh,760px); aspect-ratio:3/4; position:relative; overflow:hidden; background:#1c1c1e; border-radius:12px; }
.photo-frame.cropping { overflow:visible; outline:1px dashed #fff; border-radius:0; touch-action:none; cursor:grab; }
.photo-frame.cropping img { clip-path:inset(var(--clip-top,0px) var(--clip-right,0px) var(--clip-bottom,0px) var(--clip-left,0px)); }
#crop-guides { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right,transparent 33.1%,#ffffff40 33.3%,transparent 33.5%,transparent 66.4%,#ffffff40 66.6%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#ffffff40 33.3%,transparent 33.5%,transparent 66.4%,#ffffff40 66.6%,transparent 66.8%); }
#crop-guides i { position:absolute; width:13px; height:13px; border:2px solid white; background:#141414; border-radius:50%; transform:translate(-50%,-50%); }
#crop-guides i:nth-child(1) { left:0; top:0; } #crop-guides i:nth-child(2) { left:50%; top:0; } #crop-guides i:nth-child(3) { left:100%; top:0; }
#crop-guides i:nth-child(4) { left:0; top:50%; } #crop-guides i:nth-child(5) { left:100%; top:50%; }
#crop-guides i:nth-child(6) { left:0; top:100%; } #crop-guides i:nth-child(7) { left:50%; top:100%; } #crop-guides i:nth-child(8) { left:100%; top:100%; }
.floating-bar { display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; margin:16px auto; padding:10px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; }
#crop-hint { text-align:center; color:#a2a5ac; font-size:12px; margin:12px 0; }
#zoom { width:190px; min-height:44px; accent-color:var(--accent); }
#crop-actions label { font-size:12px; }
#toast { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:20; width:max-content; max-width:calc(100% - 32px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:12px; font-size:13px; }
#progress-wrap { position:fixed; bottom:0; left:0; right:0; padding:8px 24px max(8px,env(safe-area-inset-bottom)); background:var(--card); z-index:21; font-size:12px; text-align:center; }
progress { display:block; height:3px; width:100%; accent-color:var(--accent); }
body.file-over main { outline:2px dashed var(--accent); outline-offset:-10px; }
@media(pointer:coarse) { .tile .tile-crop { opacity:1; } }
@media(max-width:650px) {
  .topbar { padding:16px; padding-top:max(16px,env(safe-area-inset-top)); flex-wrap:wrap; gap:14px; }
  .brand-caption { margin-left:8px; }
  .toolbar { width:100%; gap:6px; }
  .toolbar button { padding:0 8px; flex:1 1 0; width:auto; min-width:0; }
  main { padding:30px 16px; }
  h1 { font-size:25px; }
  .feed-heading { align-items:flex-start; margin-bottom:28px; }
  .feed-heading>.pill { margin-top:3px; font-size:10px; padding:4px 7px; }
  .subtitle { font-size:12px; }
  .grid { gap:2px; }
  .tile { border-radius:0; }
  .tile .tile-crop { right:3px; bottom:3px; padding:0 8px; font-size:11px; }
  .library { top:auto; height:60dvh; width:100%; border-radius:16px 16px 0 0; padding:16px 16px max(16px,env(safe-area-inset-bottom)); transform:translateY(100%); }
  .library.is-visible { transform:translateY(0); }
  .library .tile-to-feed { opacity:1; }
  .viewer { padding:16px; padding-top:max(16px,env(safe-area-inset-top)); }
  .viewer-stage { gap:8px; position:relative; margin:24px 0; }
  .photo-frame { width:min(calc(100vw - 64px),46dvh); height:auto; }
  #previous,#next { position:absolute; z-index:2; bottom:8px; padding:0; width:44px; opacity:.9; }
  #previous { left:24px; } #next { right:24px; }
  .viewer:has(.cropping) #previous,.viewer:has(.cropping) #next { display:none; }
  .floating-bar { flex-wrap:wrap; gap:6px; margin-top:24px; }
  .floating-bar button { padding:9px 12px; }
  #zoom { width:100px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } .library { transition:none; } }

.tile-move { display:none; position:absolute; bottom:3px; left:3px; padding:0 7px; font-size:11px; touch-action:none; }
@media(pointer:coarse) { .tile-move { display:block; } .tile .tile-crop { padding:0 7px; } }

#library-add { background:var(--card); color:color-mix(in srgb,var(--accent) 78%,var(--muted)); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
#library-add:hover { background:var(--accent-bg); }
.tile .tile-crop { width:28px; height:28px; min-height:28px; padding:4px; border-radius:7px; display:grid; place-items:center; }
.tile .empty-hit { position:absolute; inset:0; width:100%; height:100%; }
.inline-editing { outline:2px solid var(--accent); outline-offset:-2px; content-visibility:visible; }
.inline-crop-overlay { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; }
.inline-crop-overlay i { position:absolute; width:9px; height:9px; background:var(--card); border:2px solid var(--accent); border-radius:50%; }
.inline-crop-overlay i:nth-of-type(1) { top:0; left:0; }
.inline-crop-overlay i:nth-of-type(2) { top:0; right:0; }
.inline-crop-overlay i:nth-of-type(3) { bottom:0; left:0; }
.inline-crop-overlay i:nth-of-type(4) { bottom:0; right:0; }
.inline-crop-bar { position:fixed; z-index:11; flex-wrap:nowrap; gap:6px; margin:0; padding:5px; border-radius:10px; }
.inline-crop-bar button { flex:none; min-height:32px; padding:4px 7px; font-size:12px; }
#inline-zoom { flex:1 1 0; width:0; min-width:0; min-height:32px; margin:0; accent-color:var(--accent); }
.history-panel { width:min(790px,100%); max-height:95dvh; padding:24px; border-radius:16px; }
.history-entry { display:inline-flex; flex-direction:column; gap:8px; width:140px; padding:8px; margin:0 10px 12px 0; }
.history-entry .grid { width:100%; }
.history-entry .tile { contain-intrinsic-size:auto 50px; }
#history-detail>.grid { margin:16px 0; }
@media(max-width:650px) {
  .history-panel { position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-height:100dvh; padding:20px 16px max(20px,env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; }
}