:root {
  color-scheme: dark;
  --bg: #111014;
  --surface: #17161c;
  --surface-raised: #1c1a22;
  --surface-hover: #211f28;
  --text: #f4f1f8;
  --muted: #9a96a4;
  --subtle: #706c78;
  --border: rgba(255, 255, 255, .075);
  --violet: #a78bfa;
  --violet-bright: #b59dff;
  --violet-soft: rgba(167, 139, 250, .12);
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -26%, rgba(111, 77, 177, .13), transparent 48%),
    var(--bg);
  color: var(--text);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.page-shell { width: min(100% - 64px, 1040px); margin: 0 auto; }

.site-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: Manrope, sans-serif; font-size: 16px; font-weight: 750; letter-spacing: -.5px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #c4aeff; background: linear-gradient(145deg, rgba(167,139,250,.2), rgba(108,80,164,.1)); border: 1px solid rgba(190,165,255,.16); border-radius: 10px; }
.brand-mark svg { width: 19px; height: 19px; }
.header-caption { color: #77727f; font-size: 12px; letter-spacing: .02em; }

.intro { padding: 78px 0 58px; text-align: center; }
.eyebrow, .section-kicker { display: flex; align-items: center; gap: 9px; color: #a69bb9; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.eyebrow { justify-content: center; }
.eyebrow-line { width: 19px; height: 1px; background: #9273cb; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 22px 0 14px; font-family: Manrope, sans-serif; font-size: clamp(38px, 5.3vw, 56px); font-weight: 600; letter-spacing: -.065em; line-height: 1.13; }
h1 span { color: #a996d4; }
.intro-copy { margin-bottom: 32px; color: #a29daa; font-size: 14px; line-height: 1.7; }

.save-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .92fr) auto;
  align-items: center;
  gap: 8px;
  width: min(100%, 730px);
  margin: 0 auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: 13px;
  background: rgba(25, 23, 30, .88);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .2), inset 0 1px rgba(255,255,255,.025);
  text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.save-form:focus-within { border-color: rgba(167, 139, 250, .42); box-shadow: 0 14px 45px rgba(0,0,0,.22), 0 0 0 3px rgba(167,139,250,.055); }
.input-wrap { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 9px; color: #77727f; }
.input-wrap svg { flex: 0 0 17px; width: 17px; height: 17px; }
.input-wrap input, .search-wrap input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.input-wrap input::placeholder, .search-wrap input::placeholder { color: #77727f; opacity: 1; }
.url-wrap { border-right: 1px solid rgba(255,255,255,.08); }
.save-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 39px; padding: 0 16px; border: 0; border-radius: 8px; color: #17131f; background: linear-gradient(135deg, #c0aaff, #a68bed); box-shadow: 0 3px 12px rgba(123, 93, 183, .22); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s, filter .18s, box-shadow .18s; }
.save-button svg { width: 15px; height: 15px; }
.save-button:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 6px 18px rgba(123, 93, 183, .3); }
.save-button:active { transform: translateY(0); }
.save-button:focus-visible, .delete-button:focus-visible, .open-button:focus-visible, .card-url:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: 3px; }
.form-message { position: absolute; top: calc(100% + 10px); left: 10px; margin: 0; color: #f2a5ac; font-size: 11px; }
.form-message:empty { display: none; }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; color: #77727f; font-size: 11px; }
.privacy-note svg { width: 14px; height: 14px; color: #81748e; }

.library { border-top: 1px solid rgba(255,255,255,.07); padding-top: 35px; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 21px; }
.section-kicker { color: #77727f; font-size: 9px; letter-spacing: .16em; }
.library-heading h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-family: Manrope, sans-serif; font-size: 20px; font-weight: 650; letter-spacing: -.04em; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 21px; padding: 0 6px; border: 1px solid rgba(167,139,250,.12); border-radius: 7px; color: #b8a4e5; background: rgba(167,139,250,.08); font: 600 10px "DM Sans", sans-serif; letter-spacing: 0; }
.search-wrap { display: flex; align-items: center; gap: 8px; width: 226px; padding: 0 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #77727f; background: rgba(24,22,28,.72); transition: border-color .2s; }
.search-wrap:focus-within { border-color: rgba(167,139,250,.4); }
.search-wrap svg { flex: 0 0 15px; width: 15px; height: 15px; }
.search-wrap input { padding: 9px 0; font-size: 11px; }
.search-wrap input::-webkit-search-cancel-button { cursor: pointer; }
.search-wrap kbd { display: grid; place-items: center; width: 18px; height: 19px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; color: #77727f; font: 10px "DM Sans", sans-serif; }

.links-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.link-card { position: relative; display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: linear-gradient(145deg, rgba(28,26,34,.96), rgba(23,22,28,.96)); box-shadow: 0 8px 20px rgba(0,0,0,.08); animation: card-in .28s ease both; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.link-card:hover { transform: translateY(-2px); border-color: rgba(167,139,250,.22); background: linear-gradient(145deg, rgba(33,30,41,.98), rgba(25,23,31,.98)); box-shadow: 0 13px 27px rgba(0,0,0,.15); }
.card-accent { flex: 0 0 3px; background: linear-gradient(180deg, #b7a0ee, rgba(117,88,167,.24)); opacity: .8; }
.card-main { min-width: 0; flex: 1; padding: 14px 14px 12px; }
.card-topline { display: flex; align-items: center; gap: 9px; min-width: 0; }
.site-icon { flex: 0 0 25px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(167,139,250,.13); border-radius: 7px; color: #b9a4e3; background: rgba(167,139,250,.08); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.card-url { overflow: hidden; color: #e7e2ee; font-size: 12px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: color .16s; }
.card-url:hover { color: #c9b6fb; }
.delete-button { flex: 0 0 27px; display: grid; place-items: center; width: 27px; height: 27px; margin-left: auto; border: 0; border-radius: 6px; color: #77727f; background: transparent; cursor: pointer; transition: color .16s, background .16s; }
.delete-button:hover { color: #f08f9b; background: rgba(240,143,155,.09); }
.delete-button svg { width: 16px; height: 16px; }
.card-note { display: -webkit-box; overflow: hidden; min-height: 18px; margin: 11px 0 13px 34px; color: #aaa5b0; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card-note:empty { display: none; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-left: 34px; }
.card-note:empty + .card-bottom { margin-top: 13px; }
.card-date { color: #77727f; font-size: 10px; }
.open-button { display: inline-flex; align-items: center; gap: 4px; color: #baa5ee; font-size: 10px; font-weight: 600; text-decoration: none; transition: color .16s; }
.open-button:hover { color: #d3c2ff; }
.open-button svg { width: 12px; height: 12px; }

.empty-state { padding: 18px 0 34px; text-align: center; }
.empty-art { position: relative; display: grid; place-items: center; width: 91px; height: 77px; margin: 0 auto 12px; }
.art-orbit { position: absolute; border: 1px solid rgba(167,139,250,.11); border-radius: 50%; }
.orbit-one { width: 72px; height: 72px; }
.orbit-two { width: 90px; height: 52px; transform: rotate(-31deg); border-color: rgba(167,139,250,.08); }
.art-card { position: relative; display: grid; place-items: center; width: 39px; height: 46px; border: 1px solid rgba(187,163,238,.23); border-radius: 9px; color: #baa3eb; background: linear-gradient(145deg, #26212f, #1b1922); box-shadow: 0 8px 22px rgba(0,0,0,.26); transform: rotate(-5deg); }
.art-card svg { width: 23px; height: 23px; }
.art-sparkle { position: absolute; color: #9d82d3; font-size: 13px; }
.sparkle-one { top: 7px; right: 11px; font-size: 11px; }
.sparkle-two { bottom: 9px; left: 8px; font-size: 10px; color: #766092; }
.empty-state h3, .no-results h3 { margin: 0 0 7px; font-family: Manrope, sans-serif; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.empty-state p, .no-results p { margin: 0; color: #817c89; font-size: 11px; line-height: 1.6; }
.no-results { padding: 35px 0 42px; text-align: center; }
.no-results-icon { display: block; margin-bottom: 8px; color: #a18ac9; font-size: 27px; line-height: 1; }
.no-results[hidden] { display: none; }
.empty-state[hidden] { display: none; }
.links-list:empty { display: none; }
.site-footer { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 71px; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.06); color: #696571; font-size: 10px; }
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #625a6d; }
.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; }

@keyframes card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 680px) {
  .page-shell { width: min(100% - 36px, 520px); }
  .site-header { height: 68px; }
  .intro { padding: 62px 0 48px; }
  h1 { font-size: clamp(37px, 9vw, 49px); }
  .intro-copy { max-width: 300px; margin: 0 auto 25px; font-size: 13px; }
  .save-form { grid-template-columns: minmax(0, 1fr) auto; gap: 0 7px; padding: 7px; }
  .url-wrap { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .url-wrap input, .note-wrap input { padding: 12px 0; }
  .note-wrap { grid-column: 1; }
  .save-button { grid-column: 2; grid-row: 2; height: 36px; padding: 0 12px; }
  .save-button svg { display: none; }
  .form-message { top: calc(100% + 8px); }
  .privacy-note { margin-top: 18px; }
  .library { padding-top: 27px; }
  .library-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 16px; }
  .search-wrap { width: 100%; }
  .links-list { grid-template-columns: 1fr; gap: 9px; }
  .empty-state { padding: 19px 0 29px; }
  .site-footer { margin-top: 10px; font-size: 9px; }
}

@media (max-width: 390px) {
  .page-shell { width: calc(100% - 28px); }
  .header-caption { font-size: 10px; }
  .brand { font-size: 15px; }
  .intro { padding-top: 52px; }
  .site-footer { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}