@import url('concepts/devices-plush/styles.css');

/* Plush remains canonical; only the public root grows into a project showcase. */
html.public-site{--site-header-height:100px;scroll-padding-top:var(--site-header-height)}
.header{grid-template-columns:1fr auto auto}
html[data-i18n-pending] body{visibility:hidden}
.header-controls{display:flex;align-items:center;gap:24px}
.segmented-control{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--stage)}
.segmented-control button{display:flex;align-items:center;justify-content:center;width:40px;min-height:38px;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font-size:11px;font-weight:650}
.segmented-control button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.segmented-control button:hover{border-color:var(--muted)}
.segmented-control button:active{opacity:.65}
.segmented-control button:focus-visible{outline-offset:2px}
.segmented-control svg{display:block;flex:none}
.projects-nav{display:inline-flex;align-items:center;min-height:44px;font-size:12px;font-weight:600}
.projects-nav:hover{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.projects-nav:active{opacity:.65}
main{display:block}
.hero{min-height:calc(100svh - 174px);display:flex;flex-direction:column;justify-content:center;margin-inline:auto}
.projects{max-width:1210px;margin-inline:auto;padding-block:48px 88px;scroll-margin-top:16px;outline:none}
.header--menu+main{scroll-margin-top:16px}
.projects-heading{display:grid;gap:8px;margin-bottom:28px}
.projects-heading h2{margin:0;font-family:Onest,Arial,sans-serif;font-size:clamp(34px,4.2vw,58px);font-weight:650;line-height:1.08;letter-spacing:-.055em}
.projects-heading>p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.project{min-width:0}
.project-identity{display:flex;align-items:center;gap:18px}
.project-icon{width:58px;height:58px;flex:none;border-radius:14px}
.project-category{margin:0 0 4px;color:var(--muted);font-size:12px;line-height:1.5}
.project h3{margin:0;font-family:Onest,Arial,sans-serif;font-size:32px;font-weight:650;line-height:1.1;letter-spacing:-.045em}
.project-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;min-height:118px}
.project-rating{--rating-gold:#edaa42;--rating-empty:#dbe1e5;--rating-leaf:var(--line);--rating-star-size:18px;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:6px;flex:0 0 184px;min-height:118px;margin:0;color:var(--muted);text-align:center}
@supports(background:color-mix(in srgb,black,white)){
  .project-rating{--rating-empty:color-mix(in srgb,var(--ink) 14%,var(--surface));--rating-leaf:color-mix(in srgb,var(--ink) 18%,var(--surface))}
}
:root[data-theme="dark"] .project-rating{--rating-gold:#f6b853}
.project-rating [hidden]{display:none}
.rating-body{display:grid;justify-items:center;gap:5px;min-width:0;padding-block:8px}
.rating-store{font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.rating-stars{display:flex;gap:4px}
.rating-star{display:block;position:relative;flex:none;width:var(--rating-star-size);height:var(--rating-star-size);background:var(--rating-empty);clip-path:polygon(50% 0,61.8% 35%,98% 35.6%,69% 57.4%,79.4% 92%,50% 71%,20.6% 92%,31% 57.4%,2% 35.6%,38.2% 35%)}
.rating-star::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,100%);background:var(--rating-gold)}
.project-rating strong{color:var(--ink);font-family:Onest,Arial,sans-serif;font-size:34px;font-weight:650;line-height:1.05;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rating-count{max-width:100%;color:var(--muted);font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.rating-laurel{display:block;width:28px;height:108px;background:var(--rating-leaf);-webkit-mask:url('assets/ratings/laurel.svg') center/contain no-repeat;mask:url('assets/ratings/laurel.svg') center/contain no-repeat}
.rating-laurel--right{transform:scaleX(-1)}
.project-rating[data-rating-empty="true"] .rating-body{grid-column:1/-1;align-content:center;min-height:118px}
.project-rating[data-rating-empty="true"] .rating-count{max-width:140px}
.project-description{max-width:440px;min-height:77px;margin:20px 0 4px;color:var(--muted);font-size:15px;line-height:1.7;letter-spacing:-.016em}
.project-link{min-height:66px;display:inline-flex;align-items:center;justify-content:center;padding:11px;margin-inline-start:-11px;border-radius:8px}
.project-link:hover{outline:1px solid var(--line)}
.project-link:active{outline:1px solid var(--accent)}
.project-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.app-store-badge{display:block;width:auto;height:44px}
html[lang="ru"] .app-store-badge--en,html:not([lang="ru"]) .app-store-badge--ru{display:none}
.project-preview{height:clamp(260px,35vw,448px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);align-items:center;justify-items:center;gap:16px;margin-top:20px;padding:28px;background:var(--stage);border-radius:24px}
.project-preview img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px}
.footer{border-top:1px solid var(--line)}
.footer-legal{max-width:540px;text-align:right}
:root[data-theme="dark"] .spark-button[data-contact-open]{--contact-fill:#2057e7;--contact-hover:#1947c8;--contact-ink:#ffffff;background:var(--contact-fill);color:var(--contact-ink)}
:root[data-theme="dark"] .spark-button[data-contact-open]:hover{background:var(--contact-hover)}
@media(forced-colors:active){
  :root[data-theme="dark"] .spark-button[data-contact-open]{--contact-fill:ButtonFace;--contact-hover:Highlight;--contact-ink:ButtonText}
  :root[data-theme="dark"] .spark-button[data-contact-open]:hover{color:HighlightText}
}
@media(forced-colors:active){.segmented-control button[aria-pressed="true"]{border-color:ButtonText}}
@media(min-width:801px) and (max-height:810px){html.public-site{--site-header-height:84px}.hero{min-height:calc(100svh - 148px)}}
@media(max-width:800px){
  .header{gap:22px}
  .projects-nav{font-size:11px}
  .hero{min-height:calc(100svh - 182px)}
  .projects{padding-block:40px 64px}
  .projects-heading{margin-bottom:24px}
  .projects-grid{grid-template-columns:1fr;gap:52px}
  .project-preview{height:clamp(280px,70vw,448px)}
  .project-description{min-height:0;max-width:510px}
}
@media(max-width:540px){
  .project-actions{column-gap:12px}
  .project-rating{--rating-star-size:16px;flex-basis:clamp(128px,calc(100vw - 192px),176px);grid-template-columns:22px minmax(0,1fr) 22px;gap:4px}
  .rating-laurel{width:22px;height:98px}
  .rating-stars{gap:3px}
  .project-rating strong{font-size:32px}
  .footer-legal{max-width:420px;text-align:center}
  .header{grid-template-columns:1fr auto;grid-template-rows:56px 44px;min-height:112px;padding:9px 0 3px;gap:0 18px}
  .header nav{grid-column:1;grid-row:2}
  .header-controls{display:contents}
  .language-control{grid-column:2;grid-row:1;justify-self:end}
  .theme-segment{grid-column:2;grid-row:2;justify-self:end}
  .hero{min-height:calc(100svh - 200px)}
  .project-preview{height:clamp(260px,76vw,380px);padding:18px;gap:12px;border-radius:20px}
  .project-identity{gap:14px}
  .project-icon{width:52px;height:52px;border-radius:12px}
  .project h3{font-size:29px}
  .project-description{font-size:14px}
}

/* Main-page disclosure reuses the same navigation and preference controls. */
.header--menu{--header-gutter:clamp(22px,4.4vw,72px);position:sticky;top:0;z-index:10;grid-template-columns:1fr auto;margin-inline:calc(-1 * var(--header-gutter));padding-inline:var(--header-gutter);background:var(--surface);box-shadow:inset 0 -1px var(--line)}
.header-menu{display:flex;align-items:center;gap:34px}
.header-setting{display:contents}
.control-caption,.menu-toggle{display:none}
.menu-toggle{align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--stage);color:var(--ink)}
.menu-toggle:hover{border-color:var(--muted);color:var(--accent)}
.menu-toggle:active{opacity:.65}
.menu-toggle .menu-icon-close,.menu-toggle[aria-expanded="true"] .menu-icon-open{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon-close{display:block}
@media(max-width:800px){
  html.public-site{--site-header-height:80px}
  html.public-site:has(.header--menu:not([data-menu-ready])){--site-header-height:132px}
  .header--menu{--header-gutter:26px;grid-template-columns:1fr;grid-template-rows:auto;gap:12px;padding-block:16px}
  .header--menu .header-menu{flex-wrap:wrap;justify-content:space-between;gap:16px}
  .header--menu .header-controls{display:flex}
  .header--menu[data-menu-ready]{grid-template-columns:1fr auto;grid-template-rows:auto;min-height:80px;padding:0 var(--header-gutter);gap:20px}
  .header--menu[data-menu-ready] .menu-toggle{display:inline-flex;grid-column:2;grid-row:1}
  .header--menu[data-menu-ready] .header-menu{position:absolute;z-index:10;top:calc(100% - 4px);right:var(--header-gutter);display:block;width:min(calc(100% - 2 * var(--header-gutter)),330px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
  .header--menu[data-menu-ready] .projects-nav{display:flex;min-height:44px;font-size:15px}
  .header--menu[data-menu-ready] .header-controls{display:grid;gap:12px;margin-top:12px;padding-top:18px;border-top:1px solid var(--line)}
  .header--menu[data-menu-ready] .header-setting{display:flex;align-items:center;justify-content:space-between;gap:18px}
  .header--menu[data-menu-ready] .control-caption{display:block;color:var(--muted);font-size:13px;font-weight:550}
  .header--menu[data-menu-ready]+main .hero{min-height:calc(100svh - 168px)}
}
@media(max-width:374px){.header--menu{--header-gutter:18px}.project-rating{--rating-star-size:14px;grid-template-columns:18px minmax(0,1fr) 18px}.rating-laurel{width:18px}.rating-stars{gap:2px}.rating-store{font-size:9px}.project-rating strong{font-size:30px}}

/* The translucent surface follows both themes; unsupported browsers stay opaque. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,white 78%,transparent)){
  .header--menu{background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
}
@media(prefers-reduced-transparency:reduce){.header--menu{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(forced-colors:active){.header--menu{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom:1px solid CanvasText}}
@media(forced-colors:active){.project-rating{--rating-gold:Highlight;--rating-empty:GrayText;--rating-leaf:CanvasText}.rating-star,.rating-laurel{forced-color-adjust:none}}