/* FORMA / Pearl Chrome — a quieter, more tactile editorial surface. */
:root { --serif: "Bodoni MT", "Didot", "Bodoni 72", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.wordmark { font-family: "Bodoni MT", Didot, "Bodoni 72", "Iowan Old Style", Georgia, serif; font-weight: 400; letter-spacing: -.045em; }
.sidebar-brand { font-size: 42px; }
.mobile-brand { font-size: 37px; }
.archive-search-bridge { align-self:flex-start; border:0; background:transparent; padding:4px 1px; color:var(--wine); font-size:11px; letter-spacing:.015em; text-align:left; }
.archive-search-bridge span { font-family:var(--serif); font-size:15px; }
.archive-search-bridge[hidden] { display:none; }
.archive-page { max-width: 1640px; }
.archive-hero { min-height:300px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:clamp(24px,4vw,56px); background:linear-gradient(112deg,#f5f0f0 0%,#e5dee0 60%,#d4c8cc 100%); border:1px solid #e4dadd; position:relative; overflow:hidden; }
.archive-hero::after { content:""; position:absolute; width:390px; height:390px; right:5%; top:-46%; border:1px solid #ffffffa6; border-radius:50%; box-shadow:0 0 0 32px #ffffff28,0 0 0 76px #ffffff20,0 0 0 124px #ffffff14; pointer-events:none; }
.archive-hero-copy { position:relative; z-index:1; max-width:700px; }
.archive-hero-copy h1 { margin:23px 0 13px; font:400 clamp(48px,7vw,90px)/.91 var(--serif); letter-spacing:-.065em; }
.archive-hero-copy h1 i { color:var(--wine); }
.archive-hero-copy>p:last-child { max-width:500px; color:#766a70; font-size:14px; line-height:1.7; }
.archive-hero-mark { position:relative; z-index:1; font:italic clamp(65px,10vw,125px)/.8 var(--serif); color:#9c697d; opacity:.8; letter-spacing:-.08em; white-space:nowrap; }
.archive-hero-mark span { color:#bda7af; font-style:normal; margin:0 .04em; }
.archive-source-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 1px; border-bottom:1px solid #ded8da; color:#8b7d83; font-size:10px; letter-spacing:.09em; }
.archive-live { display:flex; align-items:center; gap:8px; }
.archive-live i { width:7px; height:7px; border-radius:50%; background:#6f806e; box-shadow:0 0 0 4px #6f806e1c; }
.archive-source-row>a { color:var(--wine); font-size:11px; letter-spacing:0; }
.archive-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin:22px 0 14px; }
.archive-search-mode { display:flex; align-items:center; gap:7px; margin:0 0 16px; }
.archive-search-mode>span { margin-right:4px; color:#a08e97; font-size:8px; letter-spacing:.13em; }
.archive-search-mode button { min-height:31px; padding:0 10px; border:1px solid #e1d9dc; background:#fbf9f8; color:#7c6d74; font-size:10px; }
.archive-search-mode button.active { border-color:#7b324c; background:#7b324c; color:white; }
.archive-search-input { min-height:58px; border-color:#d8d1d4; border-radius:4px; }
.archive-search-input input { font-size:16px; }
.archive-search-input>button { width:32px; height:32px; border:0; background:transparent; color:#907d85; font-size:22px; }
.archive-submit { min-height:58px; padding:0 22px; border:1px solid var(--wine); background:var(--wine); color:#fff; font-size:12px; letter-spacing:.025em; transition:filter .18s,transform .18s; }
.archive-submit:hover { filter:brightness(1.1); }
.archive-submit:active { transform:scale(.98); }
.archive-submit span { margin-left:12px; font-size:16px; }
.archive-presets { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 28px; }
.archive-presets>span { margin-right:5px; color:#a08e97; font-size:9px; letter-spacing:.14em; }
.archive-presets button { min-height:34px; padding:0 12px; border:1px solid #ded6d9; border-radius:99px; background:#fbf9f8; color:#62545a; font-size:11px; transition:background .18s,border-color .18s,color .18s; }
.archive-presets button:hover { border-color:var(--wine); color:var(--wine); background:#fff; }
.archive-intro-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #e3dcdf; border-bottom:1px solid #e3dcdf; margin:30px 0 50px; }
.archive-intro-grid article { padding:23px clamp(13px,2.3vw,29px) 25px; border-right:1px solid #e3dcdf; }
.archive-intro-grid article:first-child { padding-left:0; }
.archive-intro-grid article:last-child { border-right:0; }
.archive-index { color:#a58190; font-size:9px; letter-spacing:.14em; }
.archive-intro-grid h2 { margin:12px 0 7px; font:400 25px/1.05 var(--serif); letter-spacing:-.03em; }
.archive-intro-grid p { max-width:320px; color:#887b81; font-size:11px; line-height:1.7; }
.archive-results-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 17px; }
.archive-results-head h2 { margin-top:7px; font:400 clamp(31px,4vw,48px)/1 var(--serif); letter-spacing:-.05em; }
.archive-results-head>span { color:#9e8b94; font-size:9px; letter-spacing:.1em; text-align:right; }
.archive-status { min-height:44px; margin-bottom:16px; padding:12px 15px; border:1px solid #e6dfe1; background:#f2edee; color:#74666e; font-size:11px; line-height:1.55; }
.archive-status.is-loading { background:linear-gradient(90deg,#f3edef 25%,#faf7f7 40%,#f3edef 65%); background-size:300% 100%; animation:archiveShimmer 1.4s linear infinite; }
.archive-status.is-error { border-color:#e5c8ce; background:#fbf0f0; color:#884859; }
@keyframes archiveShimmer { to { background-position:-150% 0; } }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.archive-profile { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 22px; align-items:end; margin:0 0 18px; padding:18px 20px; border:1px solid #ded3d8; background:linear-gradient(110deg,#f6f1f1,#ebe4e6); }
.archive-profile[hidden] { display:none; }
.archive-profile-kicker { color:#9f7c8a; font-size:8px; letter-spacing:.14em; }
.archive-profile h3 { margin:7px 0 5px; color:#3d2e36; font:400 clamp(24px,3vw,34px)/1 var(--serif); letter-spacing:-.035em; }
.archive-profile p { color:#766a70; font-size:10px; line-height:1.55; }
.archive-profile-count { align-self:center; color:#815168; text-align:right; font:italic 29px/.95 var(--serif); }
.archive-profile-materials { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; padding-top:5px; border-top:1px solid #dcd1d6; }
.archive-profile-materials span { padding:5px 8px; background:#fff9; color:#725e68; font-size:8px; letter-spacing:.035em; }
.archive-card { min-width:0; border:1px solid #e5dfe1; background:rgba(255,255,255,.76); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.archive-card:hover { transform:translateY(-3px); border-color:#d3c0c8; box-shadow:0 12px 30px #46303b14; }
.archive-card-image { display:block; width:100%; aspect-ratio:1.08/.9; position:relative; overflow:hidden; padding:0; border:0; background:linear-gradient(145deg,#e8e0e2,#d4c8cc); text-align:left; }
.archive-card-image>img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.archive-card:hover .archive-card-image>img { transform:scale(1.035); }
.archive-card-stamp,.archive-detail-photo>span { position:absolute; left:11px; bottom:11px; padding:7px 9px; background:#fbf9f4e8; color:#755d68; font-size:8px; letter-spacing:.12em; }
.archive-no-image { width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:17px; color:#775e6a; background:radial-gradient(ellipse at 68% 37%,#fff9 0 9%,transparent 42%),linear-gradient(140deg,#e8e1e3,#cdc2c6); }
.archive-no-image>span { font-size:8px; letter-spacing:.14em; }
.archive-no-image>b { font:italic 46px/.9 var(--serif); color:#87596f; }
.archive-no-image>small { font-size:9px; line-height:1.5; color:#806d76; }
.archive-card-body { padding:14px 15px 12px; }
.archive-card-meta { display:flex; justify-content:space-between; gap:6px; color:#a18390; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.archive-card-title { display:block; margin:9px 0 6px; padding:0; border:0; background:none; color:#362a30; font:400 22px/1 var(--serif); letter-spacing:-.035em; text-align:left; }
.archive-card-body>p { min-height:36px; overflow-wrap:anywhere; color:#7e7278; font-size:10px; line-height:1.6; }
.archive-card-actions { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:12px; padding-top:10px; border-top:1px solid #eee8ea; }
.archive-card-study,.archive-save { border:0; background:none; color:var(--wine); font-size:10px; font-weight:650; }
.archive-card-study span { padding-left:7px; font-size:14px; }
.archive-house-cover { min-height:218px; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 72% 22%,#fff9 0,transparent 38%),linear-gradient(145deg,#eee8e8,#d5c9cd 58%,#aa929c); color:#382a31; }
.archive-house-cover::before { content:"A"; position:absolute; top:-64px; right:10px; color:#fff8; font:italic 260px/.9 var(--serif); letter-spacing:-.1em; pointer-events:none; }
.archive-house-cover b { position:relative; font:400 33px/.98 var(--serif); letter-spacing:-.04em; max-width:245px; }
.archive-house-cover>span:last-child { position:relative; width:max-content; padding-bottom:3px; border-bottom:1px solid #573344; color:#573344; font-size:12px; }
.archive-house-cover .archive-card-stamp { top:15px;left:16px;bottom:auto; }
.archive-house-detail .archive-house-photo { display:flex; flex-direction:column; justify-content:flex-end; gap:12px; padding:26px; background:radial-gradient(ellipse at 72% 22%,#fff9 0,transparent 38%),linear-gradient(145deg,#eee8e8,#d5c9cd 58%,#aa929c); color:#382a31; }
.archive-house-photo b { font:400 clamp(38px,6vw,64px)/.98 var(--serif); letter-spacing:-.045em; }
.archive-house-photo span { font-size:9px;letter-spacing:.14em; }
.archive-study-prompt { margin:18px 0 0; padding:16px; border-left:2px solid var(--wine); background:#f7f3f2; color:#685861; font-size:13px; line-height:1.65; }
.archive-study-prompt b { display:block; margin-bottom:4px; color:var(--wine); font-size:9px; letter-spacing:.12em; }
.archive-save { min-height:34px; padding:0 11px; border:1px solid #ded2d8; color:#6f5e66; }
.archive-save.is-saved { border-color:#722640; background:#722640; color:#fff; }
.archive-footnote { display:grid; grid-template-columns:230px 1fr; gap:20px; margin-top:38px; padding:17px 0; border-top:1px solid #ddd5d9; color:#8f8188; }
.archive-footnote>span { color:#a47c8c; font-size:9px; letter-spacing:.11em; }
.archive-footnote p { max-width:720px; font-size:10px; line-height:1.6; }
.archive-fallback { display:inline-block; padding:15px; border:1px solid #cdbac3; color:var(--wine); font-size:12px; }
.archive-saved-wrap { margin:25px 0; }
.archive-saved-wrap[hidden] { display:none; }
.archive-modal { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:22px; }
.archive-modal-shade { position:absolute; inset:0; border:0; background:#241922a8; backdrop-filter:blur(5px); }
.archive-detail { position:relative; display:grid; grid-template-columns:minmax(280px,.85fr) minmax(340px,1.15fr); width:min(100%,950px); max-height:min(90dvh,880px); overflow:auto; background:#faf8f6; box-shadow:0 30px 100px #130c14a8; animation:archiveIn .24s ease-out; }
@keyframes archiveIn { from { opacity:0;transform:translateY(12px) scale(.99) } to { opacity:1;transform:none } }
.archive-close { position:absolute; z-index:3; top:12px; right:12px; width:39px; height:39px; border:1px solid #d9d0d3; border-radius:50%; background:#fbf9f6e8; color:#4c3741; font-size:24px; }
.archive-detail-photo { min-height:500px; position:relative; overflow:hidden; background:#e2dadd; }
.archive-detail-photo img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.archive-detail-photo .archive-no-image { position:absolute; inset:0; }
.archive-detail-content { padding:clamp(23px,4vw,42px); }
.archive-detail-content h2 { max-width:520px; margin:15px 0 8px; font:400 clamp(34px,4vw,54px)/.98 var(--serif); letter-spacing:-.05em; }
.archive-detail-author { color:#75656d; font-size:12px; line-height:1.6; }
.archive-detail-author span { color:#b398a3; padding:0 5px; }
.archive-facts { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:24px 0; border-top:1px solid #e3dbde; }
.archive-facts>div { display:flex; flex-direction:column; gap:5px; padding:11px 0; border-bottom:1px solid #e3dbde; }
.archive-facts span { color:#a1828e; font-size:8px; letter-spacing:.12em; }
.archive-facts b { color:#52454b; font-size:10px; font-weight:500; line-height:1.4; }
.archive-study-note { display:flex; flex-direction:column; gap:7px; }
.archive-study-note label { color:#977788; font-size:9px; font-weight:700; letter-spacing:.1em; }
.archive-study-note textarea { min-height:94px; resize:vertical; padding:12px; border:1px solid #ded4d8; background:#fffdfb; color:#463840; font:12px/1.6 var(--sans); }
.archive-study-note>span { min-height:15px; color:#9a8b92; font-size:9px; }
.archive-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.archive-detail-actions .btn { min-height:42px; font-size:10px; }
.archive-source-link { flex:1 0 100%; padding:8px 0; color:var(--wine); font-size:10px; }
.archive-credit { margin-top:10px; color:#9a8a91; font-size:9px; line-height:1.55; }
body.archive-modal-open { overflow:hidden; }
@media(max-width:820px) {
 .archive-page { padding-bottom:110px; }
 .archive-hero { min-height:260px; }
 .archive-hero-mark { font-size:76px; }
 .archive-intro-grid { margin:25px 0 35px; }
 .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .archive-detail { grid-template-columns:1fr; width:min(100%,560px); max-height:94dvh; }
 .archive-detail-photo { min-height:0; height:35dvh; max-height:340px; }
 .archive-detail-content { padding:25px; }
 .bottom-item { min-width:0; padding-inline:2px; }
}
@media(max-width:600px) {
 .archive-hero { min-height:220px; padding:20px 17px; }
 .archive-hero-copy h1 { margin:18px 0 10px; font-size:clamp(43px,11vw,60px); }
 .archive-hero-copy>p:last-child { max-width:290px; font-size:11px; }
 .archive-hero-mark { position:absolute; right:15px; bottom:20px; font-size:54px; opacity:.43; }
 .archive-source-row { align-items:flex-start; flex-direction:column; gap:8px; padding:13px 1px; font-size:8px; }
 .archive-source-row>a { font-size:10px; }
 .archive-search-form { grid-template-columns:1fr; gap:8px; margin-top:15px; }
 .archive-search-mode { margin-bottom:13px; }
 .archive-search-input { min-height:51px; }
 .archive-search-input input { font-size:13px; }
 .archive-submit { min-height:46px; text-align:left; }
 .archive-presets { gap:5px; margin-bottom:20px; }
 .archive-presets>span { width:100%; margin-bottom:1px; }
 .archive-presets button { min-height:31px; padding-inline:9px; font-size:9px; }
 .archive-intro-grid { grid-template-columns:1fr; margin:22px 0 30px; }
 .archive-intro-grid article,.archive-intro-grid article:first-child { display:grid; grid-template-columns:80px 1fr; gap:4px 10px; padding:12px 0; border-right:0; border-bottom:1px solid #e3dcdf; }
 .archive-intro-grid article:last-child { border-bottom:0; }
 .archive-intro-grid h2 { margin:0; font-size:20px; }
 .archive-intro-grid p { grid-column:2; max-width:none; font-size:10px; }
 .archive-index { grid-row:span 2; align-self:start; font-size:8px; }
 .archive-results-head { align-items:flex-start; flex-direction:column; }
 .archive-results-head>span { text-align:left; }
 .archive-results-head h2 { font-size:34px; }
 .archive-profile { grid-template-columns:minmax(0,1fr) auto; padding:14px; gap:8px; }
 .archive-profile-count { font-size:24px; }
 .archive-grid { gap:8px; }
 .archive-card-image { aspect-ratio:.8; }
 .archive-card-body { padding:10px 9px 9px; }
 .archive-card-meta { font-size:7px; }
 .archive-card-title { font-size:17px; }
 .archive-card-body>p { min-height:34px; font-size:9px; }
 .archive-card-actions { align-items:flex-start; flex-direction:column; }
 .archive-save { min-height:32px; }
 .archive-footnote { grid-template-columns:1fr; gap:7px; margin-top:25px; }
 .archive-modal { padding:0; align-items:end; }
 .archive-detail { width:100%; max-height:96dvh; border-radius:18px 18px 0 0; grid-template-columns:1fr; padding-bottom:env(safe-area-inset-bottom); }
 .archive-detail-photo { height:31dvh; max-height:250px; }
 .archive-detail-content { padding:20px 17px 22px; }
 .archive-detail-content h2 { font-size:39px; }
 .archive-facts { margin:17px 0; }
 .archive-detail-actions { gap:6px; }
 .archive-detail-actions .btn { flex:1 1 45%; padding:0 9px; }
 .archive-source-link { padding-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) {
 .archive-card,.archive-card-image img,.archive-presets button,.archive-submit { transition:none; }
 .archive-card:hover,.archive-card:hover .archive-card-image>img { transform:none; }
 .archive-status.is-loading { animation:none; }
 .archive-detail { animation:none; }
}
:root {
  --ink: #292326;
  --muted: #766d72;
  --wine: #702137;
  --wine2: #945569;
  --line: #dedadd;
  --paper: #f7f6f4;
  --paper-2: #efedef;
  --white: #fffefd;
  --shadow: 0 18px 45px rgba(43, 31, 37, .09);
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .72, .2, 1);
}
html { background: var(--paper); }
body { background: radial-gradient(ellipse at 72% -18%, #fff 0, transparent 42%), var(--paper); color: var(--ink); }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--wine2); outline-offset: 3px; }
.sidebar { background: linear-gradient(115deg, #f1f0ef, #f7f5f4 72%, #eceaeb); border-color: #dedbdd; }
.sidebar-tag { color: #706970; line-height: 1.9; }
.sidebar-section, .desktop-topbar, .results-header, .board-footer, .panel-section-header { color: #6d646a; }
.nav-item { min-height: 50px; border-radius: 4px; }
.nav-item.active { color: var(--wine); background: #e9e3e5; box-shadow: inset 2px 0 var(--wine); }
.nav-item:not(.active):hover { background: #eeebec; }
.desktop-topbar { background: rgba(248,247,245,.72); }
.page { padding-top: clamp(24px, 3.2vw, 52px); }
.discover-hero { height: clamp(270px, 27vw, 380px); border: 1px solid #dedbdd; border-radius: 3px; background: #eeebec; box-shadow: 0 14px 40px rgba(58,40,49,.055); }
.discover-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid rgba(255,255,255,.6); }
.hero-copy { background: linear-gradient(112deg, rgba(250,249,248,.97), rgba(240,237,238,.91)); }
.hero-copy h1 { letter-spacing: -.075em; }
.hero-caption { color: #5d5359; }
.hero-art { filter: saturate(.82); }
.hero-art img { transition: transform .8s var(--ease), filter .5s; }
.discover-hero:hover .hero-art img { transform: scale(1.025); filter: saturate(.95); }
.section-heading { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.section-heading h2 { letter-spacing: -.045em; }
.search-input { min-height: 54px; border: 1px solid #dcd8da; border-radius: 3px; background: rgba(255,254,253,.78); box-shadow: inset 0 1px rgba(255,255,255,.9); }
.search-input:focus-within { border-color: #a7828e; box-shadow: 0 0 0 3px rgba(112,33,55,.08); }
.search-input input { min-width: 0; font-size: 15px; }
.filter-chip { min-height: 42px; border-radius: 3px; color: #50484d; border-color: #dedadd; background: rgba(255,255,255,.6); }
.filter-chip { font-size: 12px; }
.filter-chip.active { color: white; background: var(--wine); border-color: var(--wine); }
.masonry { column-gap: clamp(12px, 1.6vw, 22px); }
.inspo-card { break-inside: avoid; margin-bottom: 24px; }
.inspo-image { position: relative; overflow: hidden; border-radius: 2px; background: #e6e1e3; box-shadow: 0 1px 0 rgba(255,255,255,.9); }
.inspo-image img { transition: transform .55s var(--ease), filter .3s; }
.inspo-card:hover .inspo-image img { transform: scale(1.025); filter: saturate(1.04); }
.inspo-kicker { border-radius: 2px; backdrop-filter: blur(12px); background: rgba(249,247,246,.88); color: #51474d; }
.bookmark-button { width: 42px; height: 42px; background: rgba(249,247,246,.92); color: #3b3036; border: 1px solid rgba(255,255,255,.88); }
.bookmark-button.saved { color: var(--wine); background: #fff; }
.card-title { font-size: clamp(16px, 1.3vw, 20px); }
.card-category { color: #70676d; }
.page-head h1, .studio-head h1 { letter-spacing: -.06em; }
.page-head>p:last-of-type, .studio-head>div>p:last-child { font-size: 15px; line-height: 1.6; color: #554c51; }
.btn { min-height: 46px; border-radius: 3px; }
.btn.primary { background: var(--wine); }
.btn.primary:hover { background: #57182b; }
.icon-outline, .circle-button { min-width: 44px; min-height: 44px; border-radius: 3px; background: rgba(255,255,255,.72); border-color: #d8d3d6; color: #483c43; }
.studio-board-header { border: 1px solid #dcd8da; border-bottom: 0; border-radius: 3px 3px 0 0; background: #faf9f8; }
.board-frame { border: 1px solid #dcd8da; background: linear-gradient(145deg,#e6e4e5,#f6f5f4 50%,#e1dfe1); }
.board-canvas { box-shadow: 0 7px 24px rgba(32,24,29,.15); }
.board-canvas { touch-action: none; }
.board-canvas[data-empty="true"]::after { content: "La tua tavola è pronta\A Aggiungi un’immagine o una nota dagli strumenti qui sotto."; white-space: pre-line; position: absolute; z-index: 1; left: 14%; top: 41%; width: 72%; padding: 16px; border: 1px solid rgba(255,255,255,.84); background: rgba(255,254,253,.76); color: #594950; text-align: center; font: 15px/1.6 var(--sans); box-shadow: 0 8px 25px rgba(48,34,42,.08); pointer-events: none; }
.resize-handle { width: 28px; height: 28px; right: -8px; bottom: -8px; border: 2px solid white; background: var(--wine); box-shadow: 0 1px 5px #321a23a0; }
.selection-bar { min-height: 54px; gap: 8px; flex-wrap: wrap; background: #f2eff0; border-color: #dedadd; }
.selection-bar>span { color: #51474d; line-height: 1.5; }
.selection-action, .tool-card, .preset, .layer-row { min-height: 44px; }
.tool-card { border-radius: 3px; background: #fbfaf9; border-color: #dedadd; }
.tool-card span { font-size: 13px; }
.tool-card small { font-size: 12px; color: #61575d; }
.tool-card:hover, .layer-row:hover { border-color: #bba8b0; background: #f4f0f1; }
.preset { border-radius: 3px; }
.bg-swatch { width: 42px; height: 42px; box-shadow: 0 0 0 1px #d0cbce; }
.studio-panel { border: 1px solid #e0dcde; border-radius: 3px; background: rgba(250,249,248,.85); }
.project-card { border-radius: 3px; background: #fbfaf9; }
.project-cover { min-height: 170px; }
.project-actions button { min-height: 44px; border-radius: 3px; }
.project-help { border-radius: 3px; background: #efebed; }
.overlay-panel { background: #f8f7f5; }
.overlay-photo { background: #e4e0e2; }
.detail-body { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.detail-description { font-size: 15px; line-height: 1.65; color: #51484d; }
.detail-body h2, .dialog-panel h2 { letter-spacing: -.045em; }
.tag { min-height: 40px; border-radius: 2px; color: #51474d; }
.color-swatch { width: 46px; height: 46px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(35,24,29,.11); }
.color-unit span { font-size: 10px; color: #51474d; }
.dialog-panel { border-radius: 4px; background: #fbfaf9; }
.dialog-close, .overlay-close { width: 44px; height: 44px; border-radius: 3px; }
.option-button { min-height: 48px; border-radius: 3px; }
.toast { bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 3px; background: #32282d; }
.bottom-nav { background: rgba(249,248,246,.97); border-top-color: #d9d5d7; box-shadow: 0 -4px 22px rgba(36,28,32,.055); }
.bottom-item { min-height: 52px; font-size: 12px; }
.bottom-item.active { background: transparent; }
.bottom-item.active:after { bottom: 0; width: 20px; left: calc(50% - 10px); height: 2px; }
.mobile-topbar { background: rgba(249,248,246,.96); border-color: #dedbdd; }
.page, .project-card, .inspo-card, .tool-card, .btn, .bottom-item { transition-timing-function: var(--ease); }
.filter-scroll { scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display:none; }
.empty-state { border: 1px solid #e0dcde; background: rgba(255,255,255,.55); }
.read-only-bar { background: #3b2931; }

@media (min-width: 1180px) {
  .page { padding-inline: clamp(40px, 5vw, 92px); }
  .masonry { columns: 4 205px; }
  .discover-hero { grid-template-columns: 54% 46%; }
  .hero-copy { padding-inline: clamp(32px, 4vw, 68px); }
}
@media (max-width: 820px) {
  .page { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .bottom-nav { height: calc(68px + env(safe-area-inset-bottom)); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .page { padding-inline: 15px; }
  .discover-hero { height: clamp(230px, 62vw, 266px); grid-template-columns: 64% 36%; }
  .hero-copy { padding: 16px 12px 15px 17px; }
  .hero-copy h1 { font-size: clamp(35px, 9.1vw, 40px); margin: 13px 0 7px; line-height: .98; }
  .hero-caption { font-size: 12px; }
  .hero-tail { font-size: 8px; }
  .section-heading { margin-top: 28px; }
  .section-heading h2 { font-size: clamp(31px, 8.4vw, 38px); }
  .masonry { columns: 2 0; column-gap: 12px; }
  .inspo-card { margin-bottom: 19px; }
  .card-title { font-size: 15px; }
  .card-category { font-size: 10px; }
  .studio-layout { gap: 14px; }
  .studio-head { display: block; }
  .studio-head-actions { justify-content: flex-end; margin-top: 8px; padding: 0; }
  .studio-head h1 { font-size: clamp(36px, 9.2vw, 42px); line-height: 1; }
  .studio-head>div>p:last-child { max-width: 34ch; }
  .board-frame { padding: 9px; }
  .studio-panel { padding: 15px; }
  .studio-panel .tool-card { min-height: 82px; }
  .studio-panel .tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .overlay { align-items: flex-end; }
  .overlay-panel { width: 100%; height: 94dvh; height: 94vh; border-radius: 12px 12px 0 0; }
  .overlay-photo { height: 40dvh; min-height: 230px; }
  .detail-body { padding: 20px 18px calc(104px + env(safe-area-inset-bottom)); }
  .detail-actions { position: sticky; bottom: 0; padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, #f8f7f5 22%); }
  .detail-actions .btn { flex: 1; }
  .dialog { align-items: flex-end; }
  .dialog-panel { max-height: 90dvh; padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
  .site-footer { display: none; }
  .project-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px; gap: 5px; }
  .project-actions button { min-width: 0; width: 100%; padding-inline: 4px; font-size: 10px; }
  .project-actions .open-project svg { display: none; }
}
@media (max-width: 370px) {
  .mobile-topbar { height: 62px; padding-inline: 13px; }
  .demo-pill { font-size: 8px; }
  .discover-hero { height: 230px; grid-template-columns: 64% 36%; }
  .hero-copy { padding: 14px 10px 13px 12px; }
  .hero-copy h1 { font-size: 32px; margin: 11px 0 8px; }
  .hero-caption { font-size: 11px; }
  .hero-tail { letter-spacing: .04em; }
  .masonry { column-gap: 9px; }
  .bookmark-button { width: 38px; height: 38px; }
  .studio-head { align-items: flex-start; }
  .studio-head h1 { font-size: 38px; }
  .studio-head-actions .export-btn span { display: inline; }
  .studio-head-actions .export-btn { padding-inline: 7px; font-size: 10px; }
  .projects-grid { grid-template-columns: 1fr; }
  .project-cover { height: 184px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}