@charset "UTF-8";
:root {
  color-scheme:light;
  --bg:#f1f1f1;
  --panel:#ebebeb;
  --panel-raised:#e6e6e6;
  --line:#dcdcdc;
  --text:#0a0a0a;
  --muted:#4f4f4f;
  --accent:#101010;
  --silver:#353535;
  --graphite:#3b3b3b;
  --sidebar:216px;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  letter-spacing:-.15px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text)
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button,a {
  touch-action:manipulation
}
button {
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  border:0;
  background:none
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
input:focus,textarea:focus,select:focus {
  outline:1px solid var(--accent);
  border-color:var(--accent)
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
[hidden] {
  display:none!important
}
.app-shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:#ededed;
  border-right:1px solid var(--line);
  padding:42px 17px 17px;
  display:flex;
  flex-direction:column;
  z-index:5
}
.wordmark {
  font-size:48px;
  font-weight:900;
  letter-spacing:-4px;
  line-height:1.1;
  display:flex;
  align-items:baseline;
  width:max-content;
  padding:0 15px;
  margin-bottom:46px
}
.brand-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  margin-left:5px
}
.workspace-label {
  font-size:9px;
  font-weight:600;
  letter-spacing:1.6px;
  color:#6d6d6d;
  margin:0 15px 15px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  margin:3px 0;
  border-radius:8px;
  color:#464646;
  text-align:left;
  font-size:13px;
  transition:.16s
}
.nav-item.active {
  color:var(--accent);
  background:#dcdcdc
}
.nav-item:hover {
  background:#e1e1e1;
  color:var(--text)
}
.nav-item.active:hover {
  background:#d7d7d7;
  color:var(--accent)
}
.nav-item b {
  margin-left:auto;
  font-size:10px;
  background:#d8d8d8;
  color:#222222;
  min-width:21px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:5px;
  font-weight:500
}
.nav-item i {
  margin-left:auto;
  border-radius:50%;
  width:5px;
  height:5px;
  background:var(--accent)
}
.sidebar-divider {
  height:1px;
  background:var(--line);
  margin:23px 13px
}
.collection-link {
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  color:#464646;
  font-size:12px;
  text-align:left
}
.collection-link:hover {
  color:var(--text)
}
.collection-link svg {
  margin-left:auto;
  width:13px
}
.collection-dot {
  width:7px;
  height:7px;
  border-radius:2px
}
.graphite {
  background:var(--graphite)
}
.silver {
  background:var(--silver)
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:25px
}
.sidebar-note {
  border:1px solid #d6d6d6;
  background:linear-gradient(130deg,#e0e0e0,#e8e8e8);
  padding:18px 16px 13px;
  border-radius:10px;
  margin:0 3px 18px
}
.sidebar-note>svg {
  color:var(--accent);
  width:26px;
  height:26px;
  stroke-width:1.1
}
.sidebar-note p {
  font-size:11px;
  line-height:1.8;
  color:#4b4b4b;
  margin:10px 0 12px
}
.sidebar-note strong {
  font-weight:500;
  color:#181818
}
.sidebar-note button {
  padding:0;
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:11px;
  color:var(--accent)
}
.sidebar-note button span {
  font-size:19px
}
.local-status {
  font-size:9px;
  display:flex;
  gap:6px;
  align-items:center;
  margin:21px 14px 0;
  color:#6b6b6b
}
.local-status>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#4d4d4d
}
main {
  width:calc(100% - var(--sidebar));
  margin-left:var(--sidebar)
}
.topbar {
  height:88px;
  border-bottom:1px solid #dfdfdf;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 38px 0
}
.breadcrumb {
  font-size:11px;
  color:#616161
}
.breadcrumb>span {
  margin:0 12px;
  color:#c5c5c5
}
.breadcrumb strong {
  color:#202020;
  font-weight:500
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:20px
}
.search-box {
  display:flex;
  align-items:center;
  gap:10px;
  color:#656565
}
.search-box svg {
  width:16px;
  height:16px
}
.search-box input {
  width:169px;
  padding:8px 0;
  border:0;
  background:none;
  font-size:11px;
  color:var(--text)
}
.search-box input::placeholder {
  color:#616161
}
.search-box input:focus {
  outline:none
}
.search-box:focus-within {
  color:var(--accent)
}
kbd {
  font-size:9px;
  color:#626262;
  border:1px solid #d6d6d6;
  border-radius:4px;
  padding:3px 5px;
  white-space:nowrap
}
.profile-button {
  width:32px;
  height:32px;
  border-radius:50%;
  background:#303030;
  color:#e0e0e0;
  display:grid;
  place-items:center
}
.profile-button svg {
  width:20px;
  height:20px
}
.page-content {
  max-width:1600px;
  margin:0 auto;
  padding:32px 38px 20px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-bottom:28px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.7px;
  font-weight:600;
  color:#4c4c4c;
  margin-bottom:12px
}
h1 {
  font-size:30px;
  letter-spacing:-1.05px;
  line-height:1.15;
  font-weight:650;
  margin:0 0 10px
}
h1>span {
  color:var(--accent)
}
.page-heading p {
  margin:0;
  color:var(--muted);
  font-size:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:7px;
  padding:12px 15px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  min-height:38px;
  transition:background .15s,transform .15s
}
.button:hover {
  transform:translateY(-1px)
}
.button svg {
  width:15px;
  height:15px
}
.button.primary {
  background:var(--accent);
  color:#e4e4e4
}
.button.primary:hover {
  background:#090909
}
.button.secondary {
  background:#e7e7e7;
  border:1px solid #d3d3d3;
  color:#1e1e1e
}
.button.secondary:hover {
  background:#dbdbdb
}
.button.danger {
  background:#d4d4d4;
  color:#262626
}
.hero {
  min-height:290px;
  border:1px solid #d2d2d2;
  border-radius:14px;
  background:#e2e2e2;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  position:relative;
  margin-bottom:32px
}
.hero-copy {
  padding:29px 30px;
  z-index:2;
  position:relative
}
.hero-label {
  display:flex;
  align-items:center;
  gap:7px;
  letter-spacing:1.5px;
  font-size:8px;
  color:#2d2d2d
}
.hero-label>span {
  height:5px;
  width:5px;
  background:var(--accent);
  border-radius:50%
}
.hero h2 {
  font-size:45px;
  letter-spacing:-1.8px;
  line-height:1.02;
  font-weight:650;
  margin:20px 0 13px
}
.hero h2 em {
  font-style:normal;
  color:var(--accent)
}
.hero p {
  font-size:11px;
  line-height:1.7;
  color:#3a3a3a;
  margin:0 0 18px
}
.hero .button {
  font-size:10px;
  padding:11px 14px
}
.hero-footnote {
  font-size:8px;
  color:#5d5d5d;
  margin-top:13px
}
.hero-art {
  position:relative;
  min-height:314px;
  background:radial-gradient(ellipse at 55% 40%,#cccccc00 0%,#e5e5e500 65%)
}
.orbit {
  border:1px solid #c3c3c3;
  border-radius:50%;
  position:absolute;
  width:500px;
  height:500px;
  top:-90px;
  left:-14px;
  transform:rotate(-35deg) scaleX(.76)
}
.orbit-two {
  transform:rotate(-35deg) scaleX(.56);
  width:640px;
  height:640px;
  top:-160px;
  left:-83px;
  border-color:#d2d2d2
}
.ticket {
  position:absolute;
  border-radius:5px;
  box-shadow:0 15px 35px #00000033
}
.ticket-back {
  background:#404040;
  color:#dcdcdc;
  width:175px;
  height:248px;
  left:21px;
  top:25px;
  transform:rotate(-13deg);
  padding:17px 14px
}
.ticket-back>div:first-child {
  font-size:7px;
  letter-spacing:2px
}
.ticket-sun {
  font-size:75px;
  line-height:.95;
  margin:13px 0 8px
}
.ticket-back strong {
  font-size:28px;
  letter-spacing:-1.3px;
  line-height:.92;
  display:block
}
.ticket-back>span {
  position:absolute;
  bottom:16px;
  font-size:5px;
  letter-spacing:1px
}
.ticket-front {
  width:194px;
  height:257px;
  left:155px;
  top:36px;
  background:#3a3a3a;
  color:#e4e4e4;
  transform:rotate(10deg);
  padding:16px
}
.ticket-top {
  display:flex;
  justify-content:space-between;
  font-weight:800;
  font-size:17px;
  letter-spacing:-1px;
  align-items:center
}
.ticket-top span {
  font-size:5px;
  letter-spacing:.3px
}
.ticket-flower {
  position:relative;
  width:86px;
  height:86px;
  margin:16px auto 14px
}
.ticket-flower i {
  position:absolute;
  background:#111111;
  width:45px;
  height:45px;
  border-radius:50%;
  left:2px;
  top:2px
}
.ticket-flower i:nth-child(2) {
  left:39px
}
.ticket-flower i:nth-child(3) {
  top:39px
}
.ticket-flower i:nth-child(4) {
  top:39px;
  left:39px
}
.ticket-flower b {
  width:37px;
  height:37px;
  background:#e4e4e4;
  border-radius:50%;
  position:absolute;
  top:25px;
  left:25px
}
.ticket-front>strong {
  font-size:27px;
  line-height:.96;
  letter-spacing:-1px;
  display:block
}
.ticket-bottom {
  border-top:1px dashed #c0c0c0;
  margin:13px -16px 0;
  padding:9px 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.ticket-bottom>span {
  font-size:4.7px;
  letter-spacing:.6px;
  max-width:70px
}
.barcode {
  height:18px;
  width:52px;
  background:repeating-linear-gradient(90deg,#e4e4e4 0 1px,transparent 1px 3px,#e4e4e4 3px 5px,transparent 5px 7px)
}
.hero-spark {
  position:absolute;
  top:21px;
  left:351px;
  font-size:42px;
  color:var(--accent);
  transform:rotate(20deg)
}
.hero-sticker {
  position:absolute;
  background:var(--accent);
  color:#dbdbdb;
  top:226px;
  left:72px;
  width:83px;
  height:83px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:700;
  transform:rotate(-12deg);
  border:4px double #5e5e5e;
  z-index:2
}
.hero-sticker b {
  font-size:8px;
  font-weight:500
}
.art-caption {
  position:absolute;
  font-size:6px;
  letter-spacing:1.2px;
  color:#555555;
  right:22px;
  bottom:16px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:17px
}
.section-heading>div:first-child {
  display:flex;
  align-items:center;
  gap:13px
}
.section-heading h2 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.45px;
  margin:0
}
.section-heading #result-count {
  font-size:9px;
  color:#595959;
  border:1px solid #d8d8d8;
  border-radius:4px;
  padding:3px 5px
}
.view-switch {
  display:flex;
  border:1px solid #d9d9d9;
  border-radius:6px;
  padding:3px;
  gap:3px
}
.view-switch button {
  width:26px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:3px;
  color:#6e6e6e
}
.view-switch svg {
  width:13px;
  height:13px
}
.view-switch .selected {
  color:#202020;
  background:#d8d8d8
}
.filters {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap
}
.filter {
  border:1px solid #d7d7d7;
  border-radius:6px;
  color:#484848;
  font-size:10px;
  padding:8px 12px;
  display:flex;
  gap:7px;
  align-items:center
}
.filter svg {
  width:13px;
  height:13px
}
.filter:hover {
  background:#e2e2e2
}
.filter.active {
  background:var(--accent);
  border-color:var(--accent);
  color:#dbdbdb
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:19px
}
.idea-card {
  border:1px solid #d8d8d8;
  border-radius:11px;
  background:#eaeaea;
  overflow:hidden;
  transition:border-color .18s,transform .18s;
  position:relative;
  min-width:0
}
.idea-card:hover {
  border-color:#737373;
  transform:translateY(-3px)
}
.card-image-button {
  display:block;
  width:100%;
  padding:0;
  position:relative;
  text-align:left
}
.card-art {
  display:block;
  width:100%;
  aspect-ratio:1.75;
  object-fit:cover;
  background:#e1e1e1
}
.card-badge {
  position:absolute;
  left:13px;
  top:13px;
  background:#edededd9;
  color:#0c0c0c;
  border:1px solid #00000024;
  backdrop-filter:blur(8px);
  border-radius:5px;
  padding:5px 7px;
  font-size:8px;
  display:flex;
  gap:5px;
  align-items:center
}
.card-badge svg {
  width:10px;
  height:10px
}
.bookmark-button {
  position:absolute;
  right:11px;
  top:10px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e6e6e6a6;
  color:#070707;
  border:1px solid #00000020;
  backdrop-filter:blur(7px);
  z-index:1
}
.bookmark-button svg {
  width:14px;
  height:14px
}
.bookmark-button.saved {
  color:var(--accent)
}
.bookmark-button.saved svg {
  fill:var(--accent)
}
.card-body {
  padding:15px 15px 13px
}
.card-kicker {
  font-size:8px;
  color:#444444;
  letter-spacing:1.15px;
  text-transform:uppercase;
  margin:0 0 7px
}
.card-title {
  padding:0;
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.3px;
  text-align:left;
  line-height:1.25;
  margin-bottom:7px
}
.card-description {
  color:#555555;
  font-size:10px;
  line-height:1.5;
  margin:0 0 17px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.card-meta {
  border-top:1px solid #d8d8d8;
  display:flex;
  justify-content:space-between;
  gap:7px;
  padding-top:11px;
  color:#484848;
  font-size:9px
}
.card-meta span {
  display:flex;
  gap:5px;
  align-items:center
}
.card-meta svg {
  width:12px;
  height:12px
}
.card-meta>.card-price {
  color:#1c1c1c
}
.card-grid.list-layout {
  grid-template-columns:1fr
}
.list-layout .idea-card {
  display:grid;
  grid-template-columns:190px 1fr
}
.list-layout .card-art {
  height:100%;
  min-height:151px;
  aspect-ratio:auto
}
.list-layout .bookmark-button {
  right:15px;
  top:15px
}
.list-layout .card-body {
  padding:20px
}
.list-layout .card-description {
  margin:12px 0
}
.list-layout .card-meta {
  justify-content:flex-start;
  gap:30px
}
.empty-state {
  padding:65px 20px;
  text-align:center;
  border:1px dashed #d2d2d2;
  border-radius:14px
}
.empty-state>svg {
  width:37px;
  height:37px;
  color:var(--accent);
  margin-bottom:14px
}
.empty-state h3 {
  font-size:20px;
  margin:0 0 10px
}
.empty-state p {
  color:var(--muted);
  line-height:1.7;
  font-size:12px;
  max-width:360px;
  margin:0 auto 20px
}
.empty-state button {
  margin-top:4px
}
.muted {
  color:var(--muted);
  font-size:12px;
  line-height:1.7
}
dialog {
  color:var(--text);
  background:#e8e8e8;
  border:1px solid #c8c8c8;
  border-radius:17px;
  box-shadow:0 30px 120px #00000099;
  padding:28px;
  width:min(560px,calc(100% - 48px));
  max-height:calc(100vh - 60px);
  overflow:auto
}
dialog::backdrop {
  background:#f8f8f8b5;
  backdrop-filter:blur(7px)
}
dialog h2 {
  font-size:25px;
  letter-spacing:-.7px;
  margin:0
}
dialog label {
  display:block;
  font-size:11px;
  color:#262626;
  margin:18px 0 0
}
dialog input,dialog textarea,dialog select,.settings-input {
  display:block;
  width:100%;
  background:#ededed;
  border:1px solid #cbcbcb;
  border-radius:7px;
  color:var(--text);
  padding:11px 12px;
  margin-top:8px;
  font-size:12px
}
textarea {
  resize:vertical
}
input::placeholder,textarea::placeholder {
  color:#666666
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.dialog-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px
}
.icon-button {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:#0000000b;
  border-radius:50%;
  flex-shrink:0
}
.icon-button svg {
  width:16px;
  height:16px
}
.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:25px
}
.detail-dialog {
  padding:0
}
.detail-image {
  width:100%;
  display:block;
  aspect-ratio:2.2;
  object-fit:cover
}
.detail-close {
  position:absolute;
  top:16px;
  right:16px;
  background:#eeeeeebc
}
.detail-content {
  padding:25px
}
.detail-content .card-kicker {
  margin-bottom:10px
}
.detail-content h2 {
  font-size:30px;
  margin-bottom:13px
}
.detail-description {
  color:#3a3a3a;
  line-height:1.8;
  font-size:13px;
  white-space:pre-wrap
}
.detail-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:23px 0;
  padding:17px 0;
  border-block:1px solid #d1d1d1
}
.detail-facts span {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:#292929
}
.detail-facts svg {
  color:#4d4d4d;
  width:15px;
  height:15px
}
.tip {
  border-left:2px solid var(--accent);
  background:#dddddd;
  padding:12px 14px;
  font-size:11px;
  line-height:1.7;
  color:#333333;
  border-radius:0 6px 6px 0
}
.detail-actions {
  display:flex;
  gap:8px;
  margin:22px 0;
  flex-wrap:wrap
}
.schedule-box {
  border:1px solid #cacaca;
  border-radius:9px;
  padding:15px;
  margin:18px 0
}
.schedule-box label {
  margin:0
}
.schedule-fields {
  display:flex;
  gap:10px;
  align-items:flex-end
}
.schedule-fields input {
  flex:1;
  min-width:0
}
.schedule-fields .button {
  margin-top:8px
}
.small-action {
  padding:0;
  font-size:10px;
  color:#3d3d3d;
  margin-top:12px
}
.small-action:hover {
  color:var(--accent)
}
#toast {
  position:fixed;
  left:calc(50% + var(--sidebar)/2);
  bottom:27px;
  transform:translate(-50%,15px);
  background:var(--accent);
  color:#dfdfdf;
  border-radius:9px;
  padding:13px 21px;
  z-index:100;
  box-shadow:0 8px 30px #00000066;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  max-width:600px
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.week-controls {
  display:flex;
  gap:8px;
  align-items:center
}
.week-controls>button {
  border:1px solid #d1d1d1;
  border-radius:6px;
  padding:7px 10px;
  font-size:11px
}
.week-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border:1px solid #d1d1d1;
  border-radius:12px;
  overflow:hidden;
  margin:25px 0
}
.day {
  min-height:165px;
  background:#e9e9e9;
  border-right:1px solid #d5d5d5;
  padding:13px 8px
}
.day:last-child {
  border:0
}
.day.today {
  background:#dcdcdc
}
.day-name {
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:1px;
  color:#565656
}
.day-number {
  font-size:22px;
  margin:9px 0 18px;
  display:block;
  color:#1c1c1c
}
.today .day-number {
  color:var(--accent)
}
.calendar-event {
  display:block;
  text-align:left;
  width:100%;
  font-size:9px;
  line-height:1.5;
  background:#353535;
  color:#dedede;
  border-radius:4px;
  padding:7px;
  margin-top:5px;
  overflow-wrap:anywhere
}
.calendar-event time {
  display:block;
  font-size:8px;
  opacity:.7
}
.plans-list {
  display:flex;
  flex-direction:column;
  gap:10px
}
.plan-row {
  display:flex;
  align-items:center;
  gap:17px;
  border:1px solid #d2d2d2;
  padding:13px;
  border-radius:10px;
  background:#e8e8e8
}
.plan-row img {
  width:64px;
  height:51px;
  object-fit:cover;
  border-radius:5px
}
.plan-row .plan-info {
  flex:1
}
.plan-row h3 {
  font-size:13px;
  margin:0 0 7px
}
.plan-row p {
  font-size:10px;
  color:#414141;
  margin:0
}
.plan-row .icon-button {
  color:var(--accent)
}
.plan-row .plan-date {
  font-size:10px;
  color:#242424
}
.plan-section-label {
  margin:25px 0 14px;
  color:#2e2e2e;
  font-size:14px
}
.settings-card {
  border:1px solid #d0d0d0;
  border-radius:12px;
  background:#e8e8e8;
  margin-bottom:17px;
  padding:23px
}
.settings-card h2 {
  font-size:17px;
  margin:0 0 10px
}
.settings-card p {
  max-width:620px
}
.settings-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.settings-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px
}
.subtle-label {
  display:inline-block;
  background:#dadada;
  padding:5px 8px;
  font-size:9px;
  border-radius:4px;
  color:#1e1e1e
}
.file-input {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0
}
.settings-card .danger-link {
  font-size:11px;
  color:#3c3c3c;
  margin-top:8px;
  padding:0
}
.legal-page {
  max-width:760px;
  margin:80px auto;
  padding:0 30px
}
.legal-page .wordmark {
  padding:0
}
.legal-page h1 {
  margin:50px 0 25px;
  font-size:38px
}
.legal-page h2 {
  font-size:18px;
  margin:30px 0 12px
}
.legal-page p,.legal-page li {
  color:#383838;
  line-height:1.8;
  font-size:14px
}
.legal-page code {
  font-size:12px;
  color:var(--accent)
}
.legal-links {
  display:flex;
  gap:24px;
  margin-top:40px;
  color:var(--accent);
  font-size:12px
}
.data-warning {
  color:#2e2e2e;
  font-size:11px;
  border:1px solid #bebebe;
  padding:12px;
  border-radius:6px;
  margin-bottom:15px
}
@media(min-width:1500px) {
  .hero-art {
    margin-left:70px
  }
  .hero-copy {
    padding-left:38px
  }
  .hero h2 {
    font-size:52px
  }
  .hero-art .orbit {
    left:-50px
  }
  .card-art {
    aspect-ratio:1.95
  }
}
@media(max-width:1120px) {
  :root {
    --sidebar:188px
  }
  .sidebar {
    padding-inline:10px
  }
  .page-content {
    padding:27px
  }
  .topbar {
    padding-inline:27px
  }
  .hero-copy {
    padding:26px 23px
  }
  .hero h2 {
    font-size:39px
  }
  .ticket-back {
    left:3px
  }
  .ticket-front {
    left:108px
  }
  .hero-sticker {
    left:29px
  }
  .hero-spark {
    left:284px
  }
  .hero-art {
    min-height:305px
  }
  .hero {
    grid-template-columns:1.05fr 1fr
  }
  .page-heading h1 {
    font-size:26px
  }
  .card-grid {
    gap:13px
  }
  .card-body {
    padding:13px
  }
  .card-title {
    font-size:14px
  }
  .hero-label {
    font-size:7px
  }
  .hero .button {
    font-size:9px
  }
  .hero p {
    font-size:10px
  }
}
@media(max-width:800px) {
  :root {
    --sidebar:70px
  }
  .sidebar {
    padding-top:30px;
    align-items:center
  }
  .wordmark {
    font-size:25px;
    padding:0;
    letter-spacing:-2px
  }
  .brand-dot {
    width:4px;
    height:4px;
    margin-left:2px
  }
  .sidebar .workspace-label,.nav-item span,.nav-item b,.collection-link,.sidebar-note,.local-status {
    display:none
  }
  .sidebar nav {
    width:100%
  }
  .nav-item {
    justify-content:center;
    padding:14px 10px
  }
  .sidebar-divider {
    width:30px
  }
  .sidebar-bottom {
    width:100%
  }
  .page-content {
    padding:23px
  }
  .topbar {
    height:72px;
    padding:5px 23px 0
  }
  .breadcrumb {
    font-size:10px
  }
  .search-box input {
    width:120px
  }
  .search-box kbd {
    display:none
  }
  .topbar-right {
    gap:10px
  }
  .hero {
    grid-template-columns:1fr 1fr
  }
  .hero-copy {
    padding:23px 20px
  }
  .hero h2 {
    font-size:35px
  }
  .ticket-front {
    left:63px;
    transform:rotate(10deg) scale(.85);
    transform-origin:left center
  }
  .ticket-back {
    left:-22px;
    transform:rotate(-13deg) scale(.85)
  }
  .hero-sticker {
    left:5px;
    top:218px;
    transform:rotate(-12deg) scale(.8)
  }
  .hero-spark {
    left:226px
  }
  .art-caption {
    display:none
  }
  .page-heading {
    align-items:flex-start
  }
  .page-heading h1 {
    font-size:25px;
    max-width:300px
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .week-grid {
    overflow:auto;
    grid-template-columns:repeat(7,minmax(88px,1fr))
  }
  .settings-row {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }
}
@media(max-width:570px) {
  .breadcrumb {
    display:none
  }
  .topbar {
    justify-content:space-between
  }
  .search-box input {
    width:150px
  }
  .page-content {
    padding:20px 16px
  }
  .page-heading {
    gap:10px;
    flex-direction:column
  }
  .page-heading>.button {
    margin-top:9px
  }
  .hero {
    display:block
  }
  .hero-copy {
    padding:25px
  }
  .hero-art {
    display:none
  }
  .hero h2 {
    font-size:42px
  }
  .card-grid {
    grid-template-columns:1fr
  }
  .filter {
    font-size:9px;
    padding:7px 9px
  }
  .list-layout .idea-card {
    grid-template-columns:100px 1fr
  }
  .list-layout .card-body {
    padding:13px
  }
  .list-layout .card-meta {
    gap:10px
  }
  .list-layout .card-badge {
    display:none
  }
  .form-row {
    grid-template-columns:1fr
  }
  .detail-facts {
    grid-template-columns:1fr
  }
  .plan-row {
    flex-wrap:wrap
  }
  .plan-date {
    margin-left:81px
  }
  h1 {
    font-size:27px
  }
  .form-actions {
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Keep the first row within a typical laptop window. */
@media(min-width:801px) {
  .topbar {
    height:78px
  }
  .page-content {
    padding-top:25px
  }
  .page-heading {
    margin-bottom:22px
  }
  .hero {
    margin-bottom:27px;
    min-height:270px
  }
  .hero-copy {
    padding:23px 30px
  }
  .hero h2 {
    font-size:42px;
    margin-top:16px;
    margin-bottom:10px
  }
  .hero p {
    line-height:1.5;
    margin-bottom:15px
  }
  .hero-footnote {
    margin-top:10px
  }
  .hero-art {
    min-height:270px
  }
  .ticket-front {
    transform:rotate(10deg) scale(.88);
    transform-origin:top left;
    top:23px
  }
  .ticket-back {
    transform:rotate(-13deg) scale(.9);
    transform-origin:top left;
    top:35px;
    left:24px
  }
  .hero-sticker {
    top:190px;
    left:61px;
    width:73px;
    height:73px;
    font-size:20px
  }
  .hero-spark {
    left:326px;
    top:15px
  }
  .filters {
    margin-bottom:17px
  }
  .card-art {
    aspect-ratio:1.95
  }
  .card-description {
    font-size:11px
  }
  .card-meta {
    font-size:10px
  }
}
@media(min-width:801px) and (max-width:1120px) {
  .hero-copy {
    padding:23px
  }
  .hero h2 {
    font-size:37px
  }
  .hero-art {
    min-height:263px
  }
  .ticket-front {
    left:109px;
    top:30px;
    transform:rotate(10deg) scale(.8)
  }
  .ticket-back {
    left:5px;
    top:42px;
    transform:rotate(-13deg) scale(.8)
  }
  .hero-sticker {
    left:36px;
    top:190px
  }
  .hero-spark {
    left:270px
  }
  .hero p {
    font-size:10px
  }
}
.legal-page {
  width:auto
}

/* Fomo / monochrome light edition */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f7f7f7;
  --panel-raised: #eeeeee;
  --line: #e3e3e3;
  --text: #171717;
  --muted: #707070;
  --accent: #171717;
  --silver: #aaaaaa;
  --graphite: #444444;
  accent-color: #171717;
}
::selection { background: #242424; color: #ffffff; }
.sidebar { background: #fafafa; border-right-color: #e7e7e7; }
.wordmark { color: #111111; }
.workspace-label { color: #7b7b7b; }
.nav-item { color: #676767; }
.nav-item:hover { background: #eeeeee; color: #171717; }
.nav-item.active, .nav-item.active:hover { background: #191919; color: #ffffff; }
.nav-item b { background: #eaeaea; color: #555555; }
.nav-item.active b { background: #404040; color: #ffffff; }
.nav-item i { background: #171717; }
.nav-item.active i { background: #ffffff; }
.collection-link { color: #666666; }
.sidebar-note { background: #f0f0f0; border-color: #e2e2e2; }
.sidebar-note p { color: #737373; }
.sidebar-note strong, .sidebar-note button { color: #242424; }
.local-status { color: #777777; }
.local-status > span { background: #555555; }
.topbar { border-color: #ededed; }
.breadcrumb { color: #858585; }
.breadcrumb > span { color: #c5c5c5; }
.breadcrumb strong { color: #333333; }
.search-box, .search-box input::placeholder { color: #858585; }
.search-box input { color: #191919; }
kbd { color: #777777; border-color: #dedede; }
.profile-button { background: #eeeeee; color: #171717; border: 1px solid #dddddd; }
.eyebrow { color: #737373; }
.button.primary { background: #191919; color: #ffffff; }
.button.primary:hover { background: #363636; }
.button.secondary { background: #ffffff; border-color: #d9d9d9; color: #333333; }
.button.secondary:hover { background: #f0f0f0; border-color: #bcbcbc; }
.button.danger { background: #191919; color: #ffffff; }
.hero { background: #f3f3f3; border-color: #e2e2e2; }
.hero h2 { color: #151515; }
.hero h2 em { color: #656565; }
.hero-label { color: #686868; }
.hero p { color: #626262; }
.hero-footnote { color: #7c7c7c; }
.hero-art { background: none; }
.orbit { border-color: #d9d9d9; }
.orbit-two { border-color: #e3e3e3; }
.ticket { box-shadow: 0 14px 30px #00000018; }
.ticket-back { background: #242424; color: #ffffff; }
.ticket-front { background: #ffffff; color: #171717; border: 1px solid #dddddd; }
.ticket-flower i { background: #242424; }
.ticket-flower b { background: #ffffff; }
.ticket-bottom { border-top-color: #999999; }
.barcode { background: repeating-linear-gradient(90deg, #171717 0 1px, transparent 1px 3px, #171717 3px 5px, transparent 5px 7px); }
.hero-sticker { background: #ffffff; border-color: #333333; color: #171717; }
.art-caption { color: #888888; }
.section-heading #result-count { color: #777777; border-color: #e0e0e0; }
.view-switch { border-color: #dddddd; }
.view-switch button { color: #999999; }
.view-switch .selected { color: #222222; background: #eeeeee; }
.filter { color: #666666; border-color: #dedede; background: #ffffff; }
.filter:hover { background: #f3f3f3; }
.filter.active { background: #191919; border-color: #191919; color: #ffffff; }
.idea-card { background: #ffffff; border-color: #e1e1e1; }
.idea-card:hover { border-color: #a6a6a6; box-shadow: 0 5px 18px #00000007; }
.card-art { background: #eeeeee; }
.card-badge { background: #171717d9; color: #ffffff; border-color: #ffffff30; }
.bookmark-button { background: #ffffffdc; color: #303030; border-color: #ffffff70; }
.bookmark-button.saved { background: #ffffff; color: #171717; border-color: #171717; }
.bookmark-button.saved svg { fill: #171717; }
.card-kicker { color: #777777; }
.card-description { color: #757575; }
.card-meta { color: #737373; border-color: #eeeeee; }
.card-meta > .card-price { color: #3c3c3c; }
.empty-state { background: #fafafa; border-color: #d2d2d2; }
dialog { background: #ffffff; border-color: #dedede; box-shadow: 0 30px 120px #00000030; }
dialog::backdrop { background: #00000035; }
dialog label { color: #444444; }
dialog input, dialog textarea, dialog select, .settings-input { background: #fafafa; border-color: #d8d8d8; color: #202020; }
input::placeholder, textarea::placeholder { color: #999999; }
.icon-button { background: #f1f1f1; color: #333333; }
.detail-close { background: #ffffffeb; }
.detail-description { color: #555555; }
.detail-facts { border-color: #e5e5e5; }
.detail-facts span { color: #555555; }
.detail-facts svg { color: #777777; }
.tip { border-color: #333333; background: #f4f4f4; color: #565656; }
.schedule-box { border-color: #dedede; }
.small-action { color: #656565; text-decoration: underline; text-underline-offset: 3px; }
#toast { background: #191919; color: #ffffff; box-shadow: 0 8px 30px #00000020; }
.week-controls > button { border-color: #d9d9d9; background: #ffffff; }
.week-grid { border-color: #dddddd; }
.day { background: #fafafa; border-color: #e2e2e2; }
.day.today { background: #ededed; }
.day-name { color: #777777; }
.day-number, .today .day-number { color: #252525; }
.calendar-event { background: #252525; color: #ffffff; }
.plan-row { background: #ffffff; border-color: #dedede; }
.plan-row p { color: #737373; }
.plan-row .plan-date { color: #555555; }
.plan-section-label { color: #393939; }
.settings-card { background: #ffffff; border-color: #dedede; }
.subtle-label { background: #efefef; color: #555555; }
.settings-card .danger-link { color: #444444; text-decoration: underline; text-underline-offset: 3px; }
.legal-page p, .legal-page li { color: #626262; }
.data-warning { color: #333333; background: #f1f1f1; border-color: #bbbbbb; }

/* Desktop interaction: fixed chrome, ordinary arrow cursors, intentional selection. */
body {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
button, a, select, label { cursor: default; }
img, svg, a {
  -webkit-user-drag: none;
}
img, svg { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"],
.detail-description, .detail-facts, .tip, .selectable, .legal-page {
  -webkit-user-select: text;
  user-select: text;
}
input, textarea, [contenteditable="true"], .detail-description, .detail-facts, .tip, .selectable {
  cursor: text;
}
.legal-page a { cursor: pointer; }
input[type="file"], input[type="checkbox"], input[type="radio"], input[type="datetime-local"] { cursor: default; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #17171755;
  outline-offset: 2px;
}
.card-image-button:focus-visible { outline-offset: -4px; }
.idea-card, .button, .nav-item, .filter, .icon-button, .bookmark-button {
  transition: background-color .12s, border-color .12s, box-shadow .12s, opacity .12s;
}
.idea-card:hover, .button:hover { transform: none; }
.idea-card:hover { box-shadow: none; border-color: #bcbcbc; }
.button:active, .filter:active, .nav-item:active, .icon-button:active, .bookmark-button:active,
.collection-link:active, .view-switch button:active { opacity: .72; }
.card-image-button:active .card-art { opacity: .87; }
.search-box {
  padding: 6px 9px;
  gap: 7px;
  border: 1px solid #dddddd;
  border-radius: 7px;
  background: #f4f4f4;
  transition: background-color .12s, box-shadow .12s;
}
.search-box:focus-within {
  background: #ffffff;
  border-color: #a0a0a0;
  box-shadow: 0 0 0 3px #17171718;
}
.search-box input { width: 175px; min-width: 0; padding: 0; font-size: 12px; }
.search-box kbd { border: 0; padding: 0 2px; }
.profile-button { border-radius: 7px; }
.profile-button:hover { background: #e3e3e3; }
.profile-button:active { background: #d5d5d5; }
.view-switch { padding: 2px; gap: 2px; background: #eeeeee; border-color: #e2e2e2; }
.view-switch .selected { background: #ffffff; box-shadow: 0 1px 3px #00000020; }
.small-action, .settings-card .danger-link { text-decoration: none; }
.small-action:hover, .settings-card .danger-link:hover { text-decoration: underline; }
dialog { border-radius: 13px; overscroll-behavior: contain; }
dialog::backdrop { backdrop-filter: blur(3px); background: #00000026; }
dialog input:focus, dialog textarea:focus, dialog select:focus {
  outline: none;
  border-color: #999999;
  box-shadow: 0 0 0 3px #17171718;
}
.detail-close:focus-visible { outline-offset: 2px; }
@media (min-width: 801px) {
  html:has(.app-shell), body:has(.app-shell) { height: 100%; overflow: clip; }
  .app-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: clip; }
  .sidebar {
    position: relative;
    inset: auto;
    flex: 0 0 var(--sidebar);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell > main {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin-left: 0;
    overflow: clip;
  }
  .topbar { flex: 0 0 62px; height: 62px; padding-block: 0; background: #fafafa; }
  .breadcrumb strong { font-size: 13px; font-weight: 600; }
  .topbar-right { gap: 12px; }
  .page-content {
    flex: 1;
    width: 100%;
    min-height: 0;
    padding-bottom: 32px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 24px;
  }
  .page-content:focus-visible { outline: 2px solid #17171730; outline-offset: -2px; }
  body:has(dialog[open]) .page-content { overflow-y: hidden; }
}