/* The look is set in DESIGN.md. One rule a line without spaces: the album page must weigh under 100 KB (plan, stage "В"). */
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(/fonts/onest-latin.woff2);unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2DC,U+300-329,U+2000-2215,U+FEFF-FFFD}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(/fonts/onest-latin-ext.woff2);unicode-range:U+100-2BA,U+2BD-2FF,U+1D00-1EFF,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(/fonts/onest-cyrillic.woff2);unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Literata;font-weight:600;font-display:swap;src:url(/fonts/literata-latin-600.woff2);unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2DC,U+300-329,U+2000-2215,U+FEFF-FFFD}
@font-face{font-family:Literata;font-weight:600;font-display:swap;src:url(/fonts/literata-latin-ext-600.woff2);unicode-range:U+100-2BA,U+2BD-2FF,U+1D00-1EFF,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Literata;font-weight:600;font-display:swap;src:url(/fonts/literata-cyrillic-600.woff2);unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
/* Hex, not oklch: the contrast check in the tests reads rgb() only. The colours meet WCAG AA (PRD, "Принципы простоты", point 8). */
:root{--bg:#fcf7f0;--card:#fffdfa;--text:#291c15;--muted:#6f6056;--surface:#f4ebe1;--line:#e6dcd2;--field:#988d83;--primary:#bd4f2c;--on-primary:#fffbf4;--primary-soft:#ffe0d2;--ink:#140e0b;--on-ink:#f9f4ee;--error:#d02c2a;--success:#2f7a45;--glass:rgba(255,253,250,.72);--glass-dark:rgba(20,14,11,.55);--shadow-soft:0 1px 2px rgba(58,42,32,.06),0 8px 24px -8px rgba(58,42,32,.14);--shadow-lift:0 2px 4px rgba(58,42,32,.08),0 24px 48px -16px rgba(67,37,26,.28);--scrim:linear-gradient(180deg,transparent 40%,rgba(18,9,5,.75));--r:1rem;--r-xl:calc(var(--r) + 4px);--r-2xl:calc(var(--r) + 8px);--r-3xl:calc(var(--r) + 12px);--r-4xl:2rem;--top:4.5rem;--display:Literata,Georgia,serif;color-scheme:light}
*{box-sizing:border-box}
/* Sizes follow the font size set in the browser, and in Safari on iPhone the system text size (Dynamic Type):
   PRD, "Принципы простоты", point 8, "приложение подстраивается само". 17 of the usual 16 px. */
html{-webkit-text-size-adjust:100%;font-size:106.25%}
@supports (font:-apple-system-body){html{font:-apple-system-body}}
/* "Крупный текст": text and buttons grow, the grid shows fewer photos in a row (PRD, "Принципы простоты", point 8). */
html.large{font-size:131.25%}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.5 Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
/* Long words fit a phone with large text too. */
h1{font-size:min(2.25rem,10vw);line-height:1.1;margin:0 0 .5rem}
h2{font-size:1.5rem;line-height:1.25;margin:0 0 .5rem}
h3{font-size:1.25rem;line-height:1.3;margin:0}
p{margin:.5rem 0}
a{color:var(--primary)}
.muted{color:var(--muted)}
.error{color:var(--error);font-weight:600}
.notice{margin:1.25rem 0;padding:1rem 1.25rem;background:var(--surface);border-radius:var(--r-2xl)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stack{display:grid;gap:1rem;margin:1.25rem 0}
/* Margins add to the gap in a grid: a hint stood twice as far from its field as the button under it. */
.stack>p{margin:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.row>.secondary,.row>.button{width:auto}
/* Lucide icons (wwwroot/icons, ISC License); each style file adds the icons of its screens. */
.i{display:inline-block;flex:none;width:1.25rem;height:1.25rem;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-x{--i:url(/icons/x.svg)}
.i-plus{--i:url(/icons/plus.svg)}
.i-more{--i:url(/icons/ellipsis.svg)}
.i-back{--i:url(/icons/arrow-left.svg)}
.i-play{--i:url(/icons/play-fill.svg)}
.i-check{--i:url(/icons/check.svg)}
.i-settings{--i:url(/icons/settings.svg)}
.i-trash{--i:url(/icons/trash-2.svg)}
.i-download{--i:url(/icons/download.svg)}
.i-import{--i:url(/icons/cloud-download.svg)}
.i-share{--i:url(/icons/share-2.svg)}
/* A photo a person turned (architecture.md, decision 59). In a frame that is not square a quarter turn swaps the
   photo's sides, so it is laid out the other way round and still covers the frame; without container units it is
   still turned, only with gaps at the sides. */
.turn-90{rotate:90deg}
.turn-180{rotate:180deg}
.turn-270{rotate:270deg}
.frame{position:relative;display:block;overflow:hidden;container-type:size}
/* A cover is centred on its point (--fx, --fy, in percent) as far as the picture reaches; --w and --h are the picture's
   sides before any turn. Without them the declaration is dropped and the middle shows (architecture.md, decision 63). */
.frame>img{display:block;width:100%;height:100%;object-fit:cover;--W:max(100cqw,100cqh*var(--w)/var(--h));--H:max(100cqh,100cqw*var(--h)/var(--w));object-position:clamp(100cqw - var(--W),50cqw - var(--W)*var(--fx,50)/100,0px) clamp(100cqh - var(--H),50cqh - var(--H)*var(--fy,50)/100,0px)}
.frame>.turn-90,.frame>.turn-270{position:absolute;left:50%;top:50%;width:100%!important;width:100cqh!important;height:100%!important;height:100cqw!important;translate:-50% -50%;--W:max(100cqh,100cqw*var(--w)/var(--h));--H:max(100cqw,100cqh*var(--h)/var(--w));object-position:clamp(100cqh - var(--W),50cqh - var(--W)*var(--fx,50)/100,0px) clamp(100cqw - var(--H),50cqw - var(--H)*var(--fy,50)/100,0px)}
button,a.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.5rem 1.25rem;font:inherit;font-weight:500;line-height:1.25;text-align:center;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:border-color .15s,filter .15s}
button:hover,a.button:hover{border-color:rgba(41,28,21,.3)}
button.primary,a.button.primary{width:100%;color:var(--on-primary);background:var(--primary);border-color:transparent;box-shadow:var(--shadow-soft)}
button.primary:hover,a.button.primary:hover{filter:brightness(1.05)}
button.secondary,a.button.secondary{width:100%}
a.button.dark{color:var(--bg);background:var(--text);border-color:transparent}
button.link{padding:.5rem 0;color:var(--primary);background:none;border:0;text-decoration:underline;text-underline-offset:4px}
button.danger,a.button.danger{color:var(--error)}
button:disabled{opacity:.45;cursor:default;filter:none}
.round{display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;min-height:0;padding:0;color:inherit;background:none;border:0;border-radius:50%}
.round:hover{background:var(--surface)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Field borders are darker than card borders: the edge of an input needs 3:1 (WCAG 1.4.11). */
label{display:grid;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--muted)}
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],input:not([type]),input[inputmode],select,textarea{width:100%;min-height:3rem;padding:.625rem 1rem;font:inherit;font-size:1rem;color:var(--text);background:var(--card);border:1px solid var(--field);border-radius:var(--r-2xl);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
textarea{min-height:6rem;resize:vertical}
input::placeholder{color:var(--muted)}
/* Our cross, not the browser's blue one. */
input[type=search]{text-overflow:ellipsis}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:1.25rem;height:1.25rem;background:var(--muted);-webkit-mask:url(/icons/x.svg) center/contain no-repeat;mask:url(/icons/x.svg) center/contain no-repeat;cursor:pointer}
label.check{position:relative;display:flex;align-items:center;gap:1rem;min-height:3rem;font-size:1rem;font-weight:400;color:var(--text)}
label.check>span{flex:1}
input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;flex:none;order:1;width:2.75rem;height:1.5rem;margin:0;background:var(--field);border-radius:999px;cursor:pointer;transition:background-color .2s}
input[type=checkbox]::before{content:"";position:absolute;top:2px;left:2px;width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(20,14,11,.25);transition:transform .2s}
input[type=checkbox]:checked{background:var(--primary)}
input[type=checkbox]:checked::before{transform:translateX(1.25rem)}
.top{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(230,220,210,.6)}
.top-in{display:flex;align-items:center;gap:1.5rem;max-width:80rem;height:var(--top);margin:0 auto;padding:0 1.25rem}
.brand{display:flex;align-items:center;min-height:2.75rem;gap:.75rem;color:var(--text);font:600 1.5rem/1 var(--display);letter-spacing:-.025em;text-decoration:none}
.brand img{width:2.25rem;height:2.25rem}
.tabs{display:none;gap:.25rem}
.tabs a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1rem;font-weight:500;color:var(--muted);text-decoration:none;border-radius:999px}
.tabs a:hover,.tabs a[aria-current]{color:var(--text)}
.tabs a[aria-current]{background:var(--surface)}
.top-in>.round,.more{margin-left:auto}
.more{position:relative}
.more summary{list-style:none;cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{background:var(--surface)}
.menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:40;display:grid;min-width:15rem;padding:.375rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow-lift)}
.menu a,.menu button{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;width:100%;min-height:3rem;padding:.5rem .875rem;font-weight:500;color:var(--text);text-align:left;text-decoration:none;background:none;border:0;border-radius:var(--r)}
.menu a:hover,.menu button:hover{background:var(--surface)}
.menu .i{color:var(--muted)}
.menu hr{width:100%;margin:.375rem 0;border:0;border-top:1px solid var(--line)}
.page,.narrow{max-width:80rem;margin:0 auto;padding:2rem 1.25rem 10rem}
.narrow,.page-head{max-width:36rem}
.page-head{margin:0 auto;padding:2rem 1.25rem 0}
.page-head+.narrow{padding-top:.5rem}
.page-head.wide{max-width:80rem}
.back{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;min-height:2.75rem;margin-bottom:1rem;padding:.25rem 1rem .25rem .75rem;font-size:.9375rem;font-weight:500;color:var(--text);text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:999px}
/* One main button at the bottom (PRD, "Принципы простоты", point 1). */
.bar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:35;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(230,220,210,.6);border-radius:var(--r-3xl);box-shadow:var(--shadow-lift)}
.bar>*{flex:1 1 100%}
.bar .row>*{flex:1 1 auto}
.bar .primary{min-height:3.5rem;font-size:1.125rem}
.bar label.check{padding:0 .5rem}
.status{margin:0;padding:.25rem .5rem}
.status:empty{display:none}
@media (min-width:768px){
h1{font-size:3rem}
.top-in{padding:0 2rem}
.tabs{display:flex}
.page{padding:3rem 2rem 10rem}
.page-head.wide{padding:3rem 2rem 0}
.bar{left:0;right:0;bottom:0;flex-wrap:nowrap;justify-content:flex-end;padding:1rem max(2rem,calc(50% - 38rem));border-width:1px 0 0;border-radius:0;box-shadow:none}
.bar>*{flex:0 1 auto}
.bar .status{flex:1 1 auto}
.bar .primary{order:2;width:auto;padding:0 2rem}
}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:55;max-width:36rem;max-height:90vh;margin:0 auto;overflow-y:auto;padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));background:var(--card);border-radius:var(--r-4xl) var(--r-4xl) 0 0;box-shadow:0 0 0 100vmax rgba(20,14,11,.35),var(--shadow-lift)}
.choices{display:grid;gap:.25rem;margin:1rem 0}
.choices button{justify-content:space-between;gap:.75rem;width:100%;min-height:3.5rem;padding:.5rem 1rem;text-align:left;background:none;border:0;border-radius:var(--r-2xl)}
.choices button:hover{background:var(--surface)}
.choices .label{flex:1}
.choices .count{min-width:2rem;padding:.125rem .625rem;font-size:.875rem;color:var(--muted);background:var(--surface);border-radius:999px}
.providers{display:grid;gap:.75rem;margin:1.25rem 0}
.providers:empty{display:none}
.terms{font-size:.875rem}
.toast{position:fixed;left:50%;top:1rem;z-index:60;width:min(28rem,calc(100% - 2rem));margin:0;padding:.875rem 1.25rem;color:var(--on-ink);background:var(--ink);border-radius:var(--r-2xl);box-shadow:var(--shadow-lift);transform:translateX(-50%)}
.avatar{display:inline-grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;object-fit:cover;font-size:.875rem;font-weight:600;color:#fff;border-radius:50%}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
.chips.wrap{flex-wrap:wrap;align-items:center;overflow:visible}
.chips button{flex:none;min-height:2.75rem;padding:0 1rem;font-size:.9375rem}
.chips button[aria-pressed=true]{color:var(--bg);background:var(--text);border-color:var(--text)}
.drop{position:fixed;inset:.75rem;z-index:50;display:grid;place-items:center;padding:1rem;text-align:center;font:600 1.5rem/1.3 var(--display);color:var(--primary);background:rgba(255,224,210,.95);border:3px dashed var(--primary);border-radius:var(--r-4xl)}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}
@media print{.top,.bar,.dock,.back{display:none}}
[hidden]{display:none!important}