/* Generated by packages/design/sync.mjs. Edit tokens.json and controls.css. */
:root {
  --brand: #F8BD52;
  --brand-subtle: #FFF5DF;
  --on-brand: #202124;
  --text-primary: #2C2925;
  --text-secondary: #716B63;
  --background: #FBFAF8;
  --surface: #FFFEFC;
  --separator: #E8E3DB;
  --focus-ring: #74604D;
  --luvi-light: #B17A20;
  --radius-control: 12px;
  --radius-surface: 28px;
  --control-height: 36px;
  --control-touch-height: 48px;
  --motion-press: 100ms;
  --motion-feedback: 160ms;
  --motion-state: 180ms;
  --motion-travel: 360ms;
  --ease-settle: cubic-bezier(0.23,1,0.32,1);
  --ease-travel: cubic-bezier(.4,0,.2,1);
  --luvi-size: 3px;
  --error: #a83232;
}
@media (prefers-color-scheme: dark) { :root {
  --brand: #F8BD52;
  --brand-subtle: #3A3021;
  --on-brand: #202124;
  --text-primary: #FAF7F1;
  --text-secondary: #BDB6AC;
  --background: #1C1B19;
  --surface: #282623;
  --separator: #423D36;
  --focus-ring: #F2C578;
  --luvi-light: #F8BD52;
  --error: #f4a6a6;
} }
/* Shared controls. Tokens are generated from packages/design/tokens.json. */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--background);color:var(--text-primary);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--brand);color:var(--on-brand);text-shadow:none}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:4px}
button,summary{cursor:pointer}
button{min-height:var(--control-height);border-radius:var(--radius-control);transition:background-color 120ms,box-shadow 120ms}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
input:not([type=checkbox]):not([type=radio]),textarea,select{width:100%;min-height:var(--control-height);border:1px solid var(--separator);border-radius:var(--radius-control);background:var(--surface);padding:7px 12px;outline:none}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{border-color:var(--focus-ring);box-shadow:inset 0 0 0 1px var(--focus-ring)}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--focus-ring);width:18px;height:18px;flex-shrink:0}
textarea{resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23716b63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:16px;background-position:right 16px center;background-repeat:no-repeat;padding-right:48px}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--control-height);padding:7px 14px;border:1px solid #e9ae45;background:linear-gradient(180deg,#ffd57f,var(--brand));box-shadow:inset 0 1px 0 #ffffff80,0 3px 9px #d9a84714;color:var(--on-brand);font-weight:600;text-decoration:none;border-radius:var(--radius-control)}
.primary:hover:not(:disabled):not([aria-disabled=true]){background:linear-gradient(180deg,#ffdc94,#f7b73f)}
.quiet,.text-button,.secondary{background:var(--surface);border:1px solid var(--separator);padding:7px 12px;border-radius:var(--radius-control);color:var(--text-primary)}
.text-button:hover,.quiet:hover,.secondary:hover{background:var(--brand-subtle)}
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-.8px}
.brand-mark{display:block;width:50px;height:50px;object-fit:contain;flex-shrink:0}
.mascot{display:block;width:148px;height:148px;object-fit:contain}
.social-logo{display:inline-block;vertical-align:middle;width:20px;height:20px;object-fit:contain;flex-shrink:0}
.network-name{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.networks{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--text-secondary);font-size:13px}
.feedback{padding:16px 18px;background:var(--brand-subtle);border:1px solid var(--separator);border-radius:var(--radius-control);font-size:14px;overflow-wrap:anywhere}
.feedback:empty{display:none}
h1,h2,h3{color:var(--text-primary);font-weight:650;letter-spacing:-.04em}
h1{line-height:1.12}h2{line-height:1.3}
@media(prefers-color-scheme:dark){select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23bdb6ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.social-logo[data-platform=x],.social-logo[data-platform=tiktok]{filter:invert(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.primary{border:1px solid ButtonText;background:ButtonFace;color:ButtonText}input:focus,textarea:focus,select:focus{outline:2px solid Highlight;outline-offset:-2px}.social-logo{forced-color-adjust:none}.social-logo[data-platform=x],.social-logo[data-platform=tiktok]{filter:invert(1)}}
@media(forced-colors:active){::selection{background:Highlight;color:HighlightText}}

/* Compact by default; larger touch targets do not change the brand geometry. */
@media(max-width:600px),(pointer:coarse){
  :root{--control-height:var(--control-touch-height)}
  input:not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px;padding-top:11px;padding-bottom:11px}
  button,.primary,.quiet,.secondary,.text-button{padding-top:11px;padding-bottom:11px}
}
/* A browser popup is narrow but still uses a desktop pointer. */
html.popup-document{--control-height:36px}
.popup-document input:not([type=checkbox]):not([type=radio]),.popup-document select{font-size:14px;padding-top:7px;padding-bottom:7px}
.popup-document button{padding-top:7px;padding-bottom:7px}

button,.primary,.quiet,.secondary,.text-button,input:not([type=checkbox]):not([type=radio]),select{line-height:20px}
@media(max-width:600px),(pointer:coarse){button,.primary,.quiet,.secondary,.text-button,input:not([type=checkbox]):not([type=radio]),select{line-height:24px}}
.popup-document button,.popup-document input,.popup-document select{line-height:20px}

/* Lumi motion: small intentional movements, stable text and hit areas. */
button,.primary,.secondary,.quiet,.text-button,input,textarea,select{transition:background-color var(--motion-feedback) ease,border-color var(--motion-feedback) ease,box-shadow var(--motion-feedback) ease}
.luvi-action{position:relative}
.luvi-action::after{content:"";position:absolute;right:7px;top:7px;width:var(--luvi-size);height:var(--luvi-size);border-radius:50%;background:color-mix(in srgb,var(--on-brand) 65%,transparent);opacity:0;transform:translate(-5px,3px);transition:transform var(--motion-feedback) var(--ease-settle),opacity var(--motion-feedback) ease;pointer-events:none}
[data-luvi-icon]{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;vertical-align:middle;pointer-events:none}
.motion-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;transform-origin:center;transition:translate var(--motion-feedback) var(--ease-settle),rotate var(--motion-feedback) var(--ease-settle),scale var(--motion-press) var(--ease-settle);pointer-events:none}
svg.motion-icon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
@media(hover:hover) and (pointer:fine){
  .luvi-action:hover:not(:disabled):not([aria-disabled=true])::after{opacity:1;transform:translate(0,0)}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .motion-arrow{translate:2px 0}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .motion-clock{rotate:8deg}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .motion-settings{rotate:12deg}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .motion-shield{translate:0 -1px}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .motion-spark{rotate:8deg;scale:1.04}
}
/* Press movement is confined to the icon; labels and target geometry stay still. */
:is(button,a):active:not(:disabled):not([aria-disabled=true]) .motion-icon{scale:.94;transition-duration:var(--motion-press)}
.luvi-action:focus-visible::after{opacity:1;transform:none;transition:none}
.luvi-action:disabled:not([aria-busy=true])::after{opacity:0}
[data-luvi-space]{position:relative}
.luvi-courier{position:absolute;z-index:3;left:0;top:0;width:var(--luvi-size);height:var(--luvi-size);border-radius:50%;background:var(--luvi-light);box-shadow:none;pointer-events:none;opacity:0}
.luvi-state:where(:not([hidden])){animation:luvi-appear var(--motion-state) var(--ease-settle) both}
@keyframes luvi-appear{from{opacity:0}to{opacity:1}}
/* Existing selected controls share the same quiet feedback. */
:is(.days,.preview-days) label span,.site-option,.platforms label{transition:background-color var(--motion-feedback) ease,border-color var(--motion-feedback) ease}

@media(prefers-reduced-motion:reduce){.motion-icon{translate:none!important;rotate:none!important;scale:none!important}.luvi-action::after{transform:none!important}.luvi-state{animation:none!important}.luvi-courier{box-shadow:none}}
@media(forced-colors:active){.luvi-action::after,.luvi-courier{background:Highlight;box-shadow:none}}
/* Articulated icons: move one detail, preserving the silhouette. */
.motion-clock .clock-hand{transform-origin:12px 12px;transition:transform var(--motion-feedback) var(--ease-settle)}
.motion-settings .settings-knob{transition:transform var(--motion-feedback) var(--ease-settle)}
.motion-sites .site-line{transition:transform var(--motion-feedback) var(--ease-settle)}
@media(hover:hover) and (pointer:fine){
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) svg.motion-clock{rotate:none}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .clock-hand{transform:rotate(12deg)}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) svg.motion-settings{rotate:none}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .settings-knob{transform:translateX(2px)}
  :is(button,a):hover:not(:disabled):not([aria-disabled=true]) .site-line{transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){.clock-hand,.settings-knob,.site-line{transform:none!important}}
/* Focus feedback must be immediate, including under an inherited transition. */
input:focus,textarea:focus,select:focus{transition:none}
@media(prefers-contrast:more){.luvi-courier{box-shadow:none}button,input,textarea,select{border-color:var(--text-secondary)}}
/* Only an actual pending request gets a bounded flight. Long requests settle to a static dot. */
.luvi-action[aria-busy=true]::after{opacity:1;transform:none;animation:luvi-thinking 900ms var(--ease-travel) 300ms 3 both}
@keyframes luvi-thinking{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@media(prefers-reduced-motion:reduce){.luvi-action[aria-busy=true]::after{animation:none!important}}