@layer base, layout, components, responsive;

@layer base {
  :root { color-scheme: light; --bg:#f6f5f0; --surface:#fffefa; --sidebar:#eeeee7; --ink:#30372e; --muted:#72766c; --faint:#93978b; --line:#dcded4; --accent:#c85735; --accent-hover:#ad4427; --soft-accent:#f3e5da; --active:#e1e4d8; --shadow:0 18px 60px #34392b12; font-family:'Segoe UI',sans-serif; font-synthesis:none; }
  :root[data-theme="dark"] { color-scheme:dark; --bg:#20251f; --surface:#292f28; --sidebar:#1b201b; --ink:#f0f0e5; --muted:#a8afa0; --faint:#929989; --line:#3e463a; --accent:#ed9675; --accent-hover:#f5ac8f; --soft-accent:#49382e; --active:#343e30; --shadow:0 18px 60px #0003; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:32px; }
  body { margin:0; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  button,input,select,textarea { font:inherit; }
  button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; color:inherit; }
  a { color:inherit; text-decoration:none; }
  button { border:0; }
  h1,h2,h3,p { margin:0; }
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
  button:disabled { cursor:default; opacity:.5; }
  [hidden] { display:none !important; }
  ::selection { background:#e7bc92; color:#30372e; }
  .icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .skip-link { position:fixed; top:12px; left:12px; padding:10px 18px; background:var(--ink); color:var(--bg); border-radius:8px; z-index:20; transform:translateY(-150%); }
  .skip-link:focus { transform:none; }
}

@layer layout {
  .workspace { min-height:100dvh; display:grid; grid-template-columns:226px minmax(0,1fr); }
  .sidebar { position:sticky; top:0; height:100dvh; padding:37px 21px 22px; background:var(--sidebar); border-right:1px solid var(--line); display:flex; flex-direction:column; }
  .brand { display:flex; align-items:center; gap:10px; margin:0 10px 64px; font-size:26px; font-weight:700; letter-spacing:-1.3px; line-height:1; }
  .brand img { width:35px; height:35px; border-radius:11px; }
  .brand-light { font-weight:400; }
  .brand-dot { color:var(--accent); }
  .sidebar-label { font-size:10px; letter-spacing:1.5px; color:var(--muted); font-weight:600; padding:0 12px; margin-bottom:13px; }
  .nav { display:grid; gap:7px; }
  .nav-item { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px; border-radius:7px; background:transparent; color:var(--muted); font-size:13px; }
  .nav-item.active { background:var(--active); color:var(--ink); font-weight:600; }
  .nav-item:hover { background:var(--active); }
  .nav-item .icon { width:17px; height:17px; }
  .nav-count { margin-left:auto; font-size:11px; color:var(--muted); }
  .sidebar-bottom { margin-top:auto; padding:80px 11px 0; }
  .sidebar-note { padding-bottom:31px; }
  .tiny-spark { font-size:36px; display:block; color:var(--accent); line-height:1; margin-bottom:16px; }
  .sidebar-note p { font-size:12px; line-height:1.8; color:var(--muted); }
  .sidebar-utilities { display:flex; gap:20px; padding:18px 0; border-top:1px solid var(--line); }
  .local-label { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); margin-top:4px; }
  .main-wrap { min-width:0; }
  .topbar { height:89px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 48px; }
  .breadcrumb { font-size:12px; color:var(--muted); display:flex; gap:13px; }
  .breadcrumb span { opacity:.5; }
  .breadcrumb strong { color:var(--ink); font-weight:500; }
  .top-actions { display:flex; align-items:center; gap:23px; }
  .personal-label { font-size:9px; font-weight:600; letter-spacing:1.5px; display:flex; align-items:center; gap:8px; }
  main { max-width:1320px; margin:0 auto; padding:0 48px; }
  .hero { display:grid; grid-template-columns:1.22fr 1fr; align-items:center; min-height:397px; padding:38px 0 39px; gap:20px; }
  .eyebrow { font-size:9px; font-weight:600; letter-spacing:2px; color:var(--muted); display:flex; align-items:center; gap:10px; }
  .eyebrow-line { width:22px; height:1px; background:var(--accent); }
  h1 { font-size:clamp(45px,4.6vw,76px); line-height:1.06; letter-spacing:-3.3px; font-weight:500; margin:22px 0 20px; }
  h1>span { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-style:italic; color:#747f67; letter-spacing:-3px; }
  [data-theme="dark"] h1>span { color:#b0bba2; }
  .hero-copy>p { font-size:13px; color:var(--muted); line-height:1.85; }
  .hero-link { display:inline-flex; align-items:center; gap:14px; margin-top:24px; font-size:11px; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:5px; }
  .hero-link span { color:var(--accent); font-size:19px; line-height:1; }
  .hero-link:hover { border-color:var(--accent); }
  .hero-art { position:relative; width:100%; max-width:390px; justify-self:end; color:#7a816c; }
  .hero-art>svg { width:100%; height:auto; display:block; }
  .art-caption { display:block; text-align:center; margin-top:-2px; font-family:monospace; font-size:8px; letter-spacing:1.3px; color:var(--muted); }
  .collection { padding-top:8px; }
  .collection-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; }
  .section-title { display:flex; align-items:center; gap:12px; }
  h2 { font-size:22px; font-weight:500; letter-spacing:-.6px; }
  .count-badge { font-size:11px; border:1px solid var(--line); border-radius:6px; min-width:24px; padding:1px 6px; text-align:center; color:var(--muted); }
  .collection-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid var(--line); }
  .filters { display:flex; gap:5px; flex-wrap:wrap; }
  .filter { font-size:11px; background:transparent; color:var(--muted); border-radius:5px; padding:7px 11px; white-space:nowrap; }
  .filter.active { background:var(--active); color:var(--ink); font-weight:600; }
  .filter:hover { color:var(--ink); background:var(--active); }
  .search { display:flex; align-items:center; gap:8px; width:205px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; color:var(--faint); background:var(--surface); }
  .search .icon { width:15px; height:15px; }
  .search input { width:100%; min-width:0; border:0; padding:0; background:none; color:var(--ink); font-size:11px; }
  .search input:focus-visible { outline:0; }
  .search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
  .search input::placeholder { color:var(--muted); }
  kbd { font-family:inherit; font-size:9px; border:1px solid var(--line); border-radius:3px; padding:0 4px; white-space:nowrap; font-weight:400; }
  .collection-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:19px 0; font-size:10px; color:var(--muted); }
  .collection-bottom>span:first-child { display:flex; align-items:center; gap:7px; }
  .keyboard-hint { display:flex; align-items:center; gap:6px; }
  footer { display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding:23px 0 28px; font-size:10px; color:var(--muted); margin-top:16px; }
  .footer-brand { color:var(--ink); font-size:12px; font-weight:600; letter-spacing:-.3px; }
  .footer-brand>span { font-size:10px; color:var(--muted); font-weight:400; letter-spacing:0; margin-left:11px; }
}

@layer components {
  .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 16px; border-radius:6px; font-size:12px; font-weight:500; min-height:40px; transition:background .15s,transform .15s; white-space:nowrap; }
  .button:hover { transform:translateY(-1px); }
  .button .icon { width:16px; height:16px; }
  .button-primary { background:var(--ink); color:var(--bg); border:1px solid var(--ink); }
  .button-primary:hover { background:var(--accent); border-color:var(--accent); color:var(--bg); }
  .button-outline { background:var(--surface); border:1px solid var(--line); color:var(--ink); }
  .button-outline:hover { border-color:var(--muted); }
  .icon-button { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:transparent; color:var(--muted); }
  .icon-button:hover { background:var(--active); color:var(--ink); }
  .icon-button .icon { width:17px; height:17px; }
  .theme-toggle { border:1px solid var(--line); }
  .text-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:transparent; padding:0; font-size:11px; color:var(--muted); }
  .text-button .icon { width:13px; height:13px; }
  .text-button:hover { color:var(--accent); }
  .status-dot { display:inline-block; height:5px; width:5px; border-radius:50%; background:#8b9c78; flex-shrink:0; }
  .empty-state { position:relative; min-height:330px; margin-top:20px; border:1px dashed #cdd1c2; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:28px 20px; background:radial-gradient(ellipse at center,var(--surface) 0%,transparent 75%); }
  .empty-illustration { width:100px; height:71px; position:relative; margin-bottom:19px; }
  .empty-tile { position:absolute; width:48px; height:48px; border:1px solid #bdc6af; background:#e6e9dd; border-radius:11px; top:8px; left:18px; }
  .tile-back { transform:rotate(-14deg); }
  .tile-front { transform:rotate(9deg); left:37px; top:16px; border-color:#cdb799; background:#f6eddb; display:grid; place-items:center; color:#a48861; box-shadow:0 4px 12px #63573d0c; }
  .empty-spark { position:absolute; right:1px; top:0; font-size:23px; color:var(--accent); }
  .empty-state h3 { font-size:21px; font-weight:500; letter-spacing:-.5px; }
  .empty-state p { font-size:12px; color:var(--muted); line-height:1.85; margin:9px 0 19px; }
  .empty-state .button { font-size:11px; min-height:37px; gap:22px; }
  .empty-state .button>span { color:var(--accent); font-size:15px; line-height:1; }
  .empty-footnote { font-size:9px; color:var(--muted); margin-top:12px; }
  .apps-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
  .apps-grid:empty { display:none; }
  .app-card { background:var(--surface); border:1px solid var(--line); border-radius:9px; min-height:225px; display:flex; flex-direction:column; position:relative; transition:transform .2s,box-shadow .2s,border-color .2s; }
  .app-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--faint); }
  .card-link { padding:22px 22px 0; display:block; flex:1; border-radius:8px; }
  .card-link::after { content:''; position:absolute; inset:0; border-radius:8px; }
  .card-icon { display:inline-grid; place-items:center; width:43px; height:43px; border-radius:11px; margin-bottom:20px; }
  .card-icon .icon { width:22px; height:22px; }
  .terracotta { background:#f4ded3; color:#b35e40; }
  .sage { background:#e1e7d6; color:#647751; }
  .gold { background:#f3e8c5; color:#9d7d30; }
  .blue { background:#dce9ec; color:#477887; }
  .lavender { background:#e7e0ef; color:#81649b; }
  .card-link h3 { font-size:16px; font-weight:600; letter-spacing:-.4px; margin-bottom:7px; overflow-wrap:anywhere; }
  .card-description { color:var(--muted); font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .card-controls { position:absolute; top:22px; right:14px; z-index:1; display:flex; gap:1px; }
  .favorite-button[aria-pressed="true"] { color:var(--accent); }
  .favorite-button[aria-pressed="true"] .icon { fill:var(--soft-accent); }
  .card-bottom { display:flex; align-items:center; justify-content:space-between; padding:17px 22px; margin-top:10px; }
  .category-label { color:var(--muted); font-size:9px; background:var(--bg); padding:3px 7px; border-radius:4px; }
  .card-bottom>.icon { width:17px; height:17px; color:var(--faint); }
  dialog { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:13px; width:min(490px,calc(100% - 32px)); padding:30px; max-height:calc(100dvh - 32px); box-shadow:var(--shadow); }
  dialog::backdrop { background:#17201565; backdrop-filter:blur(4px); }
  body:has(dialog[open]) { overflow:hidden; }
  .dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:24px; }
  .dialog-heading .eyebrow { font-size:8px; margin-bottom:9px; }
  .dialog-heading h2 { font-size:28px; }
  .field { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:500; margin-bottom:17px; }
  .field input,.field textarea,.field select { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px 12px; width:100%; color:var(--ink); font-size:12px; font-weight:400; min-height:41px; }
  .field textarea { resize:vertical; }
  .field input::placeholder,.field textarea::placeholder { color:var(--muted); }
  .field-help,.optional { color:var(--muted); font-size:10px; font-weight:400; }
  .field .optional { display:contents; }
  .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .color-field { border:0; padding:0; margin:0 0 20px; }
  .color-field legend { font-size:12px; font-weight:500; margin-bottom:10px; }
  .color-options { display:flex; gap:12px; }
  .color-options label { cursor:pointer; position:relative; }
  .color-options input { position:absolute; width:100%; height:100%; margin:0; opacity:0; }
  .swatch { display:block; width:26px; height:26px; border-radius:50%; border:2px solid transparent; }
  .color-options input:checked+.swatch { outline:1.5px solid currentColor; outline-offset:3px; }
  .color-options input:focus-visible+.swatch { outline:2px solid var(--accent); outline-offset:4px; }
  .dialog-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:20px; }
  .dialog-footer .danger { margin-right:auto; color:var(--accent); }
  .storage-note { font-size:10px; color:var(--muted); line-height:1.7; text-align:center; margin-top:17px; }
  .form-error { color:var(--accent); font-size:12px; margin:0 0 16px; }
  .toast { display:flex; gap:18px; align-items:center; position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:13px 20px; border-radius:8px; z-index:10; font-size:12px; box-shadow:var(--shadow); max-width:calc(100% - 32px); width:max-content; }
  .toast button { background:none; color:var(--bg); font-size:12px; text-decoration:underline; padding:3px; }
  .noscript { padding:20px; background:var(--soft-accent); position:fixed; bottom:0; width:100%; text-align:center; }
}

@layer responsive {
  @media(min-width:1600px) { .hero { min-height:440px; } .hero-art { max-width:420px; } main { padding-top:14px; } }
  @media(max-width:1150px) { .workspace { grid-template-columns:200px minmax(0,1fr); } .sidebar { padding-left:15px; padding-right:15px; } .topbar { padding:0 32px; } main { padding:0 32px; } .hero { min-height:370px; } h1 { font-size:55px; } .collection-toolbar { flex-wrap:wrap; } .search { flex:1; min-width:180px; } .filters { flex:1; } .apps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media(max-width:850px) { .workspace { grid-template-columns:175px minmax(0,1fr); } .sidebar { padding:28px 11px 18px; } .brand { margin:0 6px 53px; font-size:23px; gap:8px; } .brand img { width:31px; height:31px; } .nav-item { font-size:12px; gap:9px; padding:11px 9px; } .sidebar-label { font-size:9px; padding:0 9px; } .sidebar-bottom { padding-left:9px; padding-right:9px; } .topbar { height:78px; padding:0 25px; } main { padding:0 25px; } .personal-label { display:none; } .hero { gap:0; grid-template-columns:1.4fr 1fr; min-height:335px; } h1 { font-size:48px; letter-spacing:-2.5px; } h1>span { letter-spacing:-2px; } .hero .eyebrow { font-size:8px; letter-spacing:1.2px; } .hero-copy>p { font-size:12px; } .hero-art { opacity:.9; } .art-caption { display:none; } .hero-link { font-size:10px; } .desktop-break { display:none; } .filters { flex-basis:100%; } .search { max-width:none; } }
  @media(max-width:650px) { .workspace { display:block; } .sidebar { height:auto; position:relative; padding:19px 20px 0; border-right:0; border-bottom:1px solid var(--line); } .brand { margin:0 0 21px; font-size:25px; } .brand img { width:34px; height:34px; } .sidebar-label,.sidebar-bottom { display:none; } .nav { display:flex; gap:10px; } .nav-item { width:auto; flex:1; justify-content:center; font-size:11px; padding:12px 5px; border-radius:6px 6px 0 0; gap:7px; white-space:nowrap; } .nav-item .icon { width:15px; height:15px; } .nav-count { margin-left:1px; font-size:10px; } .topbar { height:54px; padding:0 22px; border:0; } .top-actions { position:absolute; top:20px; right:22px; } .breadcrumb { font-size:10px; } main { padding:0 22px; } .hero { min-height:295px; padding:21px 0 32px; grid-template-columns:1.7fr 1fr; position:relative; } h1 { font-size:48px; margin:17px 0; } .hero-copy>p { font-size:11px; max-width:260px; } .hero-art { width:150px; align-self:center; margin-left:-20px; opacity:.85; } .hero .eyebrow { font-size:7px; letter-spacing:1.3px; white-space:nowrap; } .eyebrow-line { width:13px; } .hero-link { margin-top:20px; } h2 { font-size:20px; } .collection-heading { margin-bottom:19px; } .collection-heading .button { padding:8px 12px; font-size:11px; min-height:35px; } .filter { padding:7px 9px; font-size:10px; } .filters { gap:2px; } .collection-toolbar { gap:12px; } .search { padding:9px; } .search input { font-size:12px; } .empty-state { min-height:325px; } .collection-bottom { font-size:9px; } .keyboard-hint { display:none; } footer { font-size:9px; align-items:center; margin-top:8px; } .footer-brand { font-size:11px; } .footer-brand>span { margin-left:4px; font-size:9px; } .apps-grid { gap:12px; } .card-link { padding:18px 16px 0; } .card-link h3 { font-size:15px; } .card-controls { top:13px; right:7px; flex-direction:column; } .card-controls .icon-button { width:29px; height:29px; } .card-icon { margin-bottom:16px; } .card-bottom { padding:15px 16px; } dialog { padding:23px; } }
  @media(max-width:650px) {
    .sidebar-bottom { display:block; padding:0; margin:0; }
    .sidebar-note,.local-label { display:none; }
    .sidebar-utilities { position:absolute; right:67px; top:22px; padding:0; border:0; gap:5px; }
    .sidebar-utilities .text-button { font-size:0; width:30px; height:30px; border-radius:5px; }
    .sidebar-utilities .text-button:hover { background:var(--active); }
    .sidebar-utilities .icon { width:16px; height:16px; }
    .hero { display:block; min-height:325px; }
    .hero-art { position:absolute; right:-4px; top:148px; width:130px; margin:0; }
    .hero-copy>p { max-width:205px; }
    .apps-grid { grid-template-columns:1fr; }
    .app-card { min-height:210px; }
    .card-controls { flex-direction:row; top:18px; right:14px; }
  }
  @media(max-width:380px) { main { padding:0 17px; } h1 { font-size:43px; } .hero-art { width:110px; right:-5px; top:137px; } .hero-copy>p { max-width:190px; } .nav { gap:3px; } .nav-item { font-size:10px; gap:5px; } footer { gap:10px; } footer>span:first-child { max-width:155px; } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
}