@layer dh-reset, dh-kit, dh-motion;

@layer dh-reset {
  .dh-kit, .dh-kit *, .dh-kit *::before, .dh-kit *::after { box-sizing: border-box; }
  .dh-kit button, .dh-kit input { font: inherit; }
  .dh-kit button { color: inherit; }
}

@layer dh-kit {
  .dh-kit {
    --dh-paper: #f7efe4;
    --dh-paper-deep: #eadfce;
    --dh-panel: #fffaf3;
    --dh-pink: #edb7ae;
    --dh-peach: #f4c88f;
    --dh-blue: #b7c5dc;
    --dh-ink: #553522;
    --dh-line: #9b3f08;
    --dh-muted: #826a58;
    --dh-shadow: rgba(85, 53, 34, .16);
    --dh-grid: rgba(155, 63, 8, .075);
    --dh-radius: 20px 17px 22px 16px;
    --dh-stroke: 3px;
    color: var(--dh-ink);
    font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  }

  .dh-kit[data-dh-theme="pastel"] {
    --dh-paper: #f8dfd0; --dh-paper-deep: #f4d2c1; --dh-panel: #fff9f2;
    --dh-pink: #f4b9b0; --dh-peach: #ffc98c; --dh-blue: #b9c8e1;
    --dh-ink: #67340f; --dh-line: #a94305; --dh-muted: #945b39;
    --dh-shadow: rgba(115, 51, 13, .18); --dh-grid: rgba(255,255,255,.34);
  }

  .dh-kit[data-dh-theme="night"] {
    --dh-paper: #1e1b25; --dh-paper-deep: #282331; --dh-panel: #332b3a;
    --dh-pink: #8f5f72; --dh-peach: #aa784d; --dh-blue: #586986;
    --dh-ink: #f3e7d8; --dh-line: #e1a16f; --dh-muted: #c6b3a1;
    --dh-shadow: rgba(0,0,0,.36); --dh-grid: rgba(243,231,216,.055);
  }

  .dh-grid {
    background-color: var(--dh-paper);
    background-image: linear-gradient(var(--dh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--dh-grid) 1px, transparent 1px);
    background-size: 36px 36px;
  }

  .dh-window {
    position: relative;
    overflow: hidden;
    border: var(--dh-stroke) solid var(--dh-line);
    border-radius: var(--dh-radius);
    background: var(--dh-panel);
    box-shadow: 7px 8px 0 var(--dh-shadow);
  }

  .dh-window::after {
    position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--dh-line) 22%, transparent);
    border-radius: 14px 16px 13px 18px; pointer-events: none; content: "";
  }

  .dh-titlebar {
    position: relative; z-index: 1; min-height: 52px; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; padding: .55rem .75rem .45rem 1rem;
    border-bottom: var(--dh-stroke) solid var(--dh-line); background: var(--dh-blue);
    font-weight: 700; letter-spacing: .08em;
  }

  .dh-titlebar__tools { display: flex; align-items: center; gap: .4rem; }
  .dh-window__body { position: relative; z-index: 1; padding: clamp(1.1rem, 4vw, 2rem); }

  .dh-icon-button {
    width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0;
    border: var(--dh-stroke) solid var(--dh-line); border-radius: 50% 46% 52% 44%;
    background: var(--dh-panel); font-size: 1.35rem; font-weight: 700; cursor: pointer;
    box-shadow: 2px 3px 0 var(--dh-shadow); transition: transform .16s ease, background .16s ease;
  }

  .dh-icon-button:hover { background: var(--dh-peach); transform: rotate(-2deg) translateY(-1px); }
  .dh-icon-button:active { transform: translate(2px, 2px); box-shadow: none; }
  .dh-icon-button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.5); }

  .dh-button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .65rem 1.05rem; border: var(--dh-stroke) solid var(--dh-line);
    border-radius: 13px 16px 12px 15px; background: var(--dh-peach); color: var(--dh-ink);
    font-weight: 700; letter-spacing: .06em; text-decoration: none; cursor: pointer;
    box-shadow: 3px 4px 0 var(--dh-shadow); transition: transform .16s ease, filter .16s ease;
  }

  .dh-button:hover { filter: saturate(1.08) brightness(1.03); transform: translateY(-2px) rotate(-.5deg); }
  .dh-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dh-shadow); }
  .dh-button--quiet { background: var(--dh-panel); }
  .dh-button--blue { background: var(--dh-blue); }
  .dh-button--pink { background: var(--dh-pink); }
  .dh-button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.65); transform: none; }

  .dh-button:focus-visible, .dh-icon-button:focus-visible, .dh-search input:focus-visible,
  .dh-tab:focus-visible, .dh-folder:focus-visible {
    outline: 3px dashed var(--dh-ink); outline-offset: 4px;
  }

  .dh-browserbar { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; }
  .dh-browserbar__nav { display: flex; gap: .3rem; font-size: 1.4rem; }
  .dh-address {
    min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 .9rem;
    border: var(--dh-stroke) solid var(--dh-line); border-radius: 999px 970px 999px 940px;
    background: var(--dh-panel); color: var(--dh-muted); overflow: hidden; white-space: nowrap;
  }

  .dh-scene {
    min-height: 260px; position: relative; overflow: hidden; display: grid; place-items: center;
    border: var(--dh-stroke) solid var(--dh-line); border-radius: 7px 11px 6px 9px;
    background: linear-gradient(180deg, var(--dh-pink), color-mix(in srgb, var(--dh-pink) 60%, var(--dh-paper)));
  }

  .dh-scene__sun { width: 48px; height: 48px; position: absolute; top: 15%; left: 25%; border: var(--dh-stroke) solid var(--dh-line); border-radius: 50%; background: var(--dh-peach); box-shadow: 0 0 0 11px color-mix(in srgb, var(--dh-panel) 35%, transparent); }
  .dh-scene__cloud { position: absolute; width: 140px; color: var(--dh-panel); }
  .dh-scene__cloud--one { top: 18%; right: 10%; }
  .dh-scene__cloud--two { bottom: 10%; left: 9%; transform: scale(.78); }
  .dh-scene__message { position: relative; z-index: 2; max-width: 25rem; padding: 1rem; text-align: center; }
  .dh-scene__message strong { display: block; font-family: Georgia, serif; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 400; }

  .dh-search { display: grid; grid-template-columns: 1fr auto; }
  .dh-search input { min-width: 0; height: 52px; padding: 0 1rem; border: var(--dh-stroke) solid var(--dh-line); border-right: 0; border-radius: 16px 0 0 13px; background: var(--dh-panel); color: var(--dh-ink); }
  .dh-search button { min-width: 58px; border: var(--dh-stroke) solid var(--dh-line); border-radius: 0 15px 17px 0; background: var(--dh-blue); cursor: pointer; font-size: 1.35rem; }

  .dh-dialog { max-width: 34rem; padding: 1.3rem; border: var(--dh-stroke) solid var(--dh-line); border-radius: 18px 15px 20px 14px; background: var(--dh-panel); box-shadow: 6px 7px 0 var(--dh-shadow); }
  .dh-dialog h2 { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: .08em; }
  .dh-dialog__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

  .dh-folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; }
  .dh-folder { position: relative; min-height: 118px; display: grid; place-items: end center; padding: 1rem; border: 0; background: transparent; color: var(--dh-ink); text-decoration: none; cursor: pointer; transition: transform .18s ease; }
  .dh-folder::before { position: absolute; inset: 25px 4px 4px; border: var(--dh-stroke) solid var(--dh-line); border-radius: 5px 8px 13px 10px; background: var(--dh-peach); box-shadow: 4px 5px 0 var(--dh-shadow); content: ""; transition: transform .18s ease; }
  .dh-folder::after { position: absolute; top: 10px; left: 10px; width: 54%; height: 35px; border: var(--dh-stroke) solid var(--dh-line); border-bottom: 0; border-radius: 8px 12px 0 0; background: var(--dh-peach); content: ""; }
  .dh-folder span { position: relative; z-index: 2; display: flex; align-items: center; gap: .35em; padding: .25rem .5rem; font-weight: 700; text-align: center; }
  .dh-folder:hover { transform: translateY(-2px) rotate(-.6deg); }
  .dh-folder:hover::before { transform: perspective(200px) rotateX(-8deg) translateY(2px); }

  .dh-document { min-height: 150px; position: relative; display: grid; align-content: end; padding: 1rem; border: var(--dh-stroke) solid var(--dh-line); border-radius: 5px 5px 10px 7px; background: var(--dh-panel); box-shadow: 4px 5px 0 var(--dh-shadow); }
  .dh-document::before { position: absolute; top: -3px; right: -3px; width: 38px; height: 38px; border-left: var(--dh-stroke) solid var(--dh-line); border-bottom: var(--dh-stroke) solid var(--dh-line); background: var(--dh-paper-deep); clip-path: polygon(0 100%, 0 0, 100% 100%); content: ""; }
  .dh-document__lines { display: grid; gap: .45rem; }
  .dh-document__lines i { display: block; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--dh-line) 45%, transparent); }

  .dh-envelope { position: relative; width: min(220px, 100%); aspect-ratio: 1.45; border: var(--dh-stroke) solid var(--dh-line); border-radius: 6px 8px 11px 7px; background: var(--dh-peach); box-shadow: 5px 6px 0 var(--dh-shadow); cursor: pointer; }
  .dh-envelope::before, .dh-envelope::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
  .dh-envelope::before { clip-path: polygon(0 0, 50% 57%, 100% 0); background: var(--dh-paper-deep); }
  .dh-envelope::after { clip-path: polygon(0 100%, 0 24%, 50% 70%, 100% 24%, 100% 100%); background: color-mix(in srgb, var(--dh-peach) 82%, var(--dh-panel)); }
  .dh-envelope__badge { position: absolute; z-index: 3; top: -18px; right: -18px; min-width: 42px; height: 42px; display: grid; place-items: center; border: var(--dh-stroke) solid var(--dh-line); border-radius: 50%; background: var(--dh-pink); font-weight: 700; }
  .dh-envelope.is-open::before { transform-origin: top; transform: rotateX(180deg); z-index: 3; }

  .dh-notice { position: relative; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: var(--dh-stroke) solid var(--dh-line); border-radius: 14px 18px 15px 17px; background: var(--dh-panel); }
  .dh-notice::after { position: absolute; left: 28px; bottom: -17px; width: 24px; height: 24px; border-right: var(--dh-stroke) solid var(--dh-line); border-bottom: var(--dh-stroke) solid var(--dh-line); background: var(--dh-panel); transform: rotate(45deg); content: ""; }

  .dh-rating { display: flex; gap: .35rem; }
  .dh-heart { width: 42px; aspect-ratio: 1; border: 0; background: transparent; color: var(--dh-pink); cursor: pointer; font-size: 2rem; filter: drop-shadow(1.5px 1.5px 0 var(--dh-line)); }
  .dh-heart[aria-pressed="true"] { color: var(--dh-peach); transform: rotate(-4deg) scale(1.08); }

  .dh-tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: var(--dh-stroke) solid var(--dh-line); }
  .dh-tab { margin-bottom: calc(var(--dh-stroke) * -1); padding: .65rem 1rem; border: var(--dh-stroke) solid var(--dh-line); border-radius: 13px 15px 0 0; background: var(--dh-paper-deep); cursor: pointer; }
  .dh-tab[aria-selected="true"] { border-bottom-color: var(--dh-panel); background: var(--dh-panel); font-weight: 700; }
  .dh-tabpanel { padding: 1.2rem 0 .25rem; }

  .dh-status-dot { width: 12px; height: 12px; display: inline-block; border: 2px solid var(--dh-line); border-radius: 50%; background: var(--dh-peach); }
  .dh-status-dot--live { background: #8ebc8a; }
  .dh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  @media (max-width: 600px) {
    .dh-titlebar { align-items: flex-start; }
    /* was 220px (shorter than the 260px default) — backwards for this box: the centered
       title+tagline text doesn't get any smaller on mobile (clamp() floors at 1.8rem), so a
       shorter box left the sun/cloud decorations — positioned by percentage offsets of the
       box's own height — sitting right on top of the text instead of clear of it. Taller box
       plus dropping the two decorations most likely to collide (sun top-left, second cloud
       bottom-left, both near the centered text's own footprint) fixes the overlap; the first
       cloud in the top-right corner has room to stay. */
    .dh-scene { min-height: 300px; }
    .dh-scene__sun, .dh-scene__cloud--two { display: none !important; }
    .dh-window__body { padding: 1rem; }
    .dh-dialog__actions .dh-button { flex: 1; }
  }
}

@layer dh-motion {
  @keyframes dh-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
  @keyframes dh-arrive { from { opacity: 0; transform: translateY(12px) rotate(.5deg); } to { opacity: 1; transform: none; } }
  .dh-float { animation: dh-float 5s ease-in-out infinite; }
  .dh-arrive { animation: dh-arrive .45s ease-out both; }
  @media (prefers-reduced-motion: reduce) { .dh-kit *, .dh-kit *::before, .dh-kit *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
}