/* Prompt Palette: Art Style Vault, Happy Hue Creative */
html,body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: garden-studio workbench. Controls on the left, a sticky live "easel" preview on the right; stacks on phones with a floating mini preview. */
:root{
  color-scheme:light;
  --bg:#FFF3E3;          /* warm ivory */
  --surface:#FFFFFF;
  --surface-2:#FCEBD6;
  --ink:#1D2A44;         /* deep navy */
  --muted:#596C7C;
  --line:rgba(29,42,68,.14);
  --outline:rgba(13,107,111,.32);
  --teal:#0D6B6F;
  --teal-ink:#FFF3E3;
  --honey:#F2B134;
  --terra:#E46A4A;
  --berry:#D94B6B;
  --berry-lip:#A8324F;
  --teal-lip:#08494C;
  --honey-lip:#B97F12;
  --terra-ink:#B8492C;
  --olive:#6B8A3D;
  --rose:#E8A6B1;
  --lav:#B8A7D6;
  --sky:#89C3D6;
  --wash-a:rgba(242,177,52,.22);
  --wash-b:rgba(137,195,214,.25);
  --wash-c:rgba(232,166,177,.25);
  --shadow:0 10px 30px -14px rgba(29,42,68,.35);
  --seg-subject:#B8304F;
  --seg-style:#0D6B6F;
  --seg-palette:#9A6A06;
  --seg-bg:#55702F;
  --seg-param:#596C7C;
  --f-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --f-body:"Nunito","Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-hand:"DM Serif Display",Georgia,serif; /* notes and sign-offs: headline serif in italic, no handwritten font */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;overflow-x:hidden}
.washes{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(38rem 26rem at 8% -4%, var(--wash-a), transparent 70%),
    radial-gradient(34rem 28rem at 100% 12%, var(--wash-b), transparent 70%),
    radial-gradient(40rem 30rem at 60% 110%, var(--wash-c), transparent 70%);}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding-block:20px 120px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;font-synthesis:none;text-wrap:balance;margin:0;line-height:1.1}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px;border-radius:10px}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand h1{font-size:clamp(32px,5.4vw,48px);font-weight:400;letter-spacing:0}
.brand h1 .p2{color:var(--berry)}
.brand .sub{font-family:var(--f-hand);font-style:italic;font-size:20px;color:var(--teal);line-height:1;margin-top:4px}
.brand .sub .by{font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--muted);margin-left:4px;white-space:nowrap}
.dragonfly{width:54px;height:54px;flex:0 0 auto;animation:hover 6s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);padding:5px;border-radius:999px;box-shadow:var(--shadow)}
.tab{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--teal);color:var(--teal-ink)}
.tab .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--honey);color:#1D2A44;font-size:12px}

/* Studio grid */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:22px;align-items:start}
.controls{display:flex;flex-direction:column;gap:16px;min-width:0}
.easel{position:sticky;top:max(16px, env(safe-area-inset-top, 0px));min-width:0}
@media (max-width:880px){
  .studio{grid-template-columns:minmax(0,1fr)}
  .easel{position:static;order:-1}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px 18px 20px;min-width:0}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel h2{font-size:23px;font-weight:400}
h2 em,h3 em{font-style:italic;color:var(--terra-ink)}
.brand h1 .p2{font-style:italic}
.panel h2 .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:2px}
.hint{color:var(--muted);font-size:13px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field + .field{margin-top:14px}
.label{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-ink)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > .field{flex:1 1 200px;margin-top:0}
input[type=text],input[type=search],textarea,select{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;outline:none}
textarea{resize:vertical;min-height:84px;line-height:1.45}
input[type=text]:focus,input[type=search]:focus,textarea:focus,select:focus{border-color:var(--teal)}

/* Style picker strip */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.pick-card{position:relative;min-width:0}
.pick{width:100%;display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1.5px solid var(--line);background:var(--bg);border-radius:18px;padding:8px;cursor:pointer;text-align:left;height:100%}
.pick .mini{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;max-width:100%}
.pick .mini svg,.pick .mini img{display:block;width:100%;height:100%;object-fit:cover}
.zoom{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,251,245,.92);color:#1D2A44;cursor:pointer;font-size:15px;font-weight:800;box-shadow:0 2px 8px rgba(29,42,68,.25);display:grid;place-items:center}
.zoom:hover{background:#F2B134}
.has-ex{position:absolute;left:13px;top:13px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(29,42,68,.75);color:#FFF3E3;border-radius:999px;padding:2px 7px}
.pick .nm{font-weight:700;font-size:13px;line-height:1.25}
.pick[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent)}
.pick.new{align-items:center;justify-content:center;border-style:dashed;color:var(--teal);font-weight:800;min-height:150px}
.pick.new span{font-size:30px;line-height:1}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--bg);padding:7px 13px;border-radius:999px;cursor:pointer;font-weight:700;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.chip .sw{width:10px;height:10px;border-radius:50%;display:inline-block}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:7px}
.tags:focus-within{border-color:var(--teal)}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px 6px 4px 11px;font-size:13px;font-weight:700}
.tag button{border:0;background:transparent;cursor:pointer;width:22px;height:22px;border-radius:50%;line-height:1;font-size:15px;color:var(--muted)}
.tag button:hover{background:var(--line)}
.tags input{flex:1 1 120px;min-width:100px;border:0;background:transparent;padding:4px;outline:none}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.suggest button{border:1px dashed var(--line);background:transparent;border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--muted);font-weight:700}
.suggest button:hover{border-color:var(--teal);color:var(--teal)}

/* Palette editor */
.ways{display:flex;gap:8px;flex-wrap:wrap}
.way{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer;font-weight:700;font-size:13px}
.way:hover{border-color:var(--teal)}
.way .strip{display:flex;border-radius:999px;overflow:hidden;height:18px}
.way .strip i{width:10px;height:18px;display:block}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:4px}
.swatch{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:6px 6px 6px 6px;min-width:0}
.swatch label.pot{position:relative;width:38px;height:38px;flex:0 0 auto;border-radius:50% 46% 52% 48%/48% 52% 46% 54%;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.swatch label.pot input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.swatch input[type=text]{padding:6px 8px;border-radius:10px;font-size:14px;min-width:0}
.swatch .x{border:0;background:transparent;width:26px;height:26px;border-radius:50%;cursor:pointer;color:var(--muted);flex:0 0 auto;font-size:16px}
.swatch .x:hover{background:var(--line)}
.add-sw{border:1.5px dashed var(--line);background:transparent;border-radius:16px;padding:10px;cursor:pointer;font-weight:800;color:var(--teal)}

/* Toggle */
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:700}
.toggle input{appearance:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .2s}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle input:checked{background:var(--teal)}
.toggle input:checked::after{transform:translateX(18px)}

/* Buttons */
.btn{border:0;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.primary{background:var(--teal);color:var(--teal-ink)}
.btn.warm{background:var(--honey);color:#1D2A44}
.btn.ghost{background:transparent;border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal)}
.btn.small{padding:7px 12px;font-size:13px}
.btn:active{transform:translateY(1px)}
.savebar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.pill.warn{background:color-mix(in srgb, var(--honey) 35%, transparent);color:var(--ink)}

/* Easel */
.easel-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:16px;box-shadow:var(--shadow)}
.easel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.live{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--berry)}
.live i{width:9px;height:9px;border-radius:50%;background:var(--berry);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,70,104,.5)}70%{box-shadow:0 0 0 8px rgba(217,70,104,0)}100%{box-shadow:0 0 0 0 rgba(217,70,104,0)}}
.canvas-wrap{display:flex;justify-content:center;align-items:center;background:var(--surface-2);border-radius:20px;padding:14px;min-height:220px}
.canvas{width:100%;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px -10px rgba(29,42,68,.5);transition:aspect-ratio .25s ease}
.canvas svg{display:block;width:100%;height:100%}
.motifs{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.motifs .chip{font-size:12px;padding:5px 10px}
.paletteline{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.paletteline span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 4px}
.paletteline span i{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.caption{font-family:var(--f-hand);font-style:italic;color:var(--muted);font-size:17px;text-align:center;margin-top:6px;line-height:1.2}
.prompt-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.prompt-head h3{font-size:18px}
.gens{display:flex;gap:6px;flex-wrap:wrap}
.gens .chip{font-size:12px;padding:5px 10px}
.prompt{background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}
.prompt .s-subject{color:var(--seg-subject);font-weight:800}
.prompt .s-style{color:var(--seg-style)}
.prompt .s-palette{color:var(--seg-palette);font-weight:700}
.prompt .s-bg{color:var(--seg-bg)}
.prompt .s-param{color:var(--seg-param);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend b{font-weight:800}
.prompt-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.note{margin-top:12px;background:color-mix(in srgb, var(--honey) 16%, transparent);border-radius:14px;padding:10px 12px;font-size:13.5px}
.note b{font-family:var(--f-hand);font-style:italic;font-weight:400;font-size:17px;color:var(--terra);margin-right:6px}

/* Vault */
.vault-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.vault-tools .field{flex:1 1 240px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card .mini{aspect-ratio:1;border-radius:16px;overflow:hidden;max-width:100%;background:#fff}
.card .mini svg{display:block;width:100%;height:100%}
.card h3{font-size:19px;font-weight:400}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .strip{display:flex;height:12px;border-radius:999px;overflow:hidden}
.card .strip i{flex:1;display:block}
.card .desc{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.star{border:0;background:transparent;font-size:20px;cursor:pointer;line-height:1;color:var(--muted);padding:4px}
.star[aria-pressed="true"]{color:var(--honey)}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
details.backup{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:14px 18px}
details.backup summary{cursor:pointer;font-weight:400;font-family:var(--f-display);font-size:18px}
.backup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:14px}
.backup textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;min-height:140px}

/* Mobile mini preview */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;
  padding:10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px))}
.dock-inner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:var(--shadow);max-width:560px;margin:0 auto}
.dock .thumb{width:58px;height:58px;border-radius:12px;overflow:hidden;flex:0 0 auto;border:0;padding:0;cursor:pointer;background:#fff}
.dock .thumb svg{display:block;width:100%;height:100%}
.dock .txt{flex:1;min-width:0;font-size:12px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dock .txt b{color:var(--ink);display:block;font-size:13px}
.dock.show{display:block}
@media (min-width:881px){.dock.show{display:none}}

/* Views, uploads, prompts */
.views{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.views .chip{font-size:13px;padding:6px 12px}
.views .chip:disabled{opacity:.45;cursor:not-allowed}
.canvas img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.result-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.upl{cursor:pointer}
.prompt-block + .prompt-block{margin-top:16px}
.prompt-block .prompt-head{margin-top:16px}
.prompt-block .prompt-head .tool{display:inline-flex;align-items:center;gap:8px}
.prompt-block .prompt-head .tool i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ex-field{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ex-thumb{width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center;flex:0 0 auto}
.ex-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.made{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.made .card .mini img{width:100%;height:100%;object-fit:cover;display:block}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:28px 0 12px}
.section-title h2{font-size:24px}
/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:40;background:rgba(29,42,68,.62);display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.lb-card{background:var(--surface);color:var(--ink);border-radius:28px;max-width:860px;width:100%;max-height:100%;overflow:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;box-shadow:var(--shadow)}
@media (max-width:700px){.lb-card{grid-template-columns:minmax(0,1fr)}}
.lb-art{border-radius:18px;overflow:hidden;background:#fff;aspect-ratio:1;max-width:100%}
.lb-art svg,.lb-art img{display:block;width:100%;height:100%;object-fit:contain}
.lb-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.lb-info h2{font-size:28px}
.lb-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:all .25s;z-index:30}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{margin-top:30px;text-align:center;font-family:var(--f-hand);font-style:italic;color:var(--muted);font-size:18px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* App modes: parts that belong to another app are switched off */
.mode-off{display:none!important}

/* Generate (Studio apps) */
.gen{margin-top:14px;background:var(--bg);border:1.5px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:12px}
.gen .label{display:block;margin-bottom:6px}
.key-row{display:flex;gap:8px;flex-wrap:wrap}
.key-row input{flex:1 1 180px;min-width:0;width:auto;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:9px 12px;outline:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
.key-row input:focus{border-color:var(--teal)}
.gen-key-form{display:flex;flex-direction:column;gap:8px}
.gen-key-form .hint{margin:0}
.gen-key-form a,.gen a{color:var(--teal);font-weight:700}
.gen-key-set{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill.ok{background:color-mix(in srgb, var(--teal) 18%, transparent);color:var(--teal)}
.toggle.small{font-size:13px;gap:8px}
.toggle.small input{width:38px;height:22px}
.toggle.small input::after{width:16px;height:16px}
.toggle.small input:checked::after{transform:translateX(16px)}
.gen-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:420px){.gen-opts{grid-template-columns:minmax(0,1fr)}}
.gen-opts .chip{font-size:13px;padding:6px 11px}
.gen-opts select{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:8px 10px}
.gen-go{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn.big{padding:13px 22px;font-size:16px}
.btn:disabled{opacity:.6;cursor:progress}
.gen-status{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--teal);font-size:14px}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid color-mix(in srgb, var(--teal) 25%, transparent);border-top-color:var(--teal);animation:spin 1s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-error{background:color-mix(in srgb, var(--berry) 12%, transparent);border:1px solid color-mix(in srgb, var(--berry) 40%, transparent);color:var(--ink);border-radius:14px;padding:10px 12px;font-size:14px}

/* Happy Hue touches: greeting, link back, painted details, a perched dragonfly */
.hello{font-family:var(--f-hand);font-style:italic;color:var(--terra-ink);font-size:19px;margin:0 0 6px;line-height:1.2}
.brand .sub .by a,footer a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--teal) 45%, transparent);text-underline-offset:3px}
.brand .sub .by a:hover,footer a:hover{color:var(--teal)}
.brand h1 .p2{position:relative;display:inline-block}
.brand h1 .p2::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-.05em;height:.32em;z-index:-1;border-radius:60% 40% 55% 45%/60% 50% 50% 40%;
  background:linear-gradient(100deg, color-mix(in srgb, var(--honey) 55%, transparent), color-mix(in srgb, var(--rose) 55%, transparent));transform:rotate(-1.5deg);opacity:.75}
.brand h1{position:relative;z-index:0}
.panel h2 .dot{width:14px;height:14px;border-radius:52% 48% 60% 40%/55% 45% 55% 45%;box-shadow:inset -2px -3px 0 rgba(0,0,0,.12);transform:rotate(-12deg)}
.vine{position:absolute;pointer-events:none;z-index:0}
.vine-top{top:0;right:0;width:clamp(140px,22vw,240px);height:auto}
.easel-card{position:relative}
.perch{position:absolute;top:-18px;right:22px;width:34px;height:34px;transform:rotate(14deg);animation:hover 7s ease-in-out infinite;pointer-events:none}
footer{display:flex;flex-direction:column;align-items:center;gap:6px}
footer .signoff{font-family:var(--f-hand);font-style:italic;font-size:22px;color:var(--teal);line-height:1.15}
footer .foot-tag{font-family:var(--f-body);font-style:normal;font-size:13px;color:var(--muted)}
footer .foot-links{font-style:normal;font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--muted)}
@media (max-width:600px){.vine-top{opacity:.6}.hello{font-size:17px}}
.btn{text-decoration:none}

/* Happy Hue brand kit: berry pill buttons with a darker lip, white cards with thin teal outlines */
.btn{box-shadow:0 4px 0 var(--btn-lip, transparent);transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-lip, transparent)}
.btn.primary{background:var(--berry);color:#FFF3E3;--btn-lip:var(--berry-lip)}
.btn.warm{background:var(--honey);color:#1D2A44;--btn-lip:var(--honey-lip)}
.btn.ghost{background:var(--surface);border:1.5px solid var(--outline);color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.panel,.easel-card,.card,details.backup{background:var(--surface);border:1.5px solid var(--outline)}
.pick{background:var(--surface);border-color:var(--outline)}
.tabs{background:var(--surface);border-color:var(--outline)}

/* ===== Happy Hue Option 1, Colorful frames (Lisa, 2026-11-03) =====
   Painted textures copied exactly from brand-source/freebie-optin-boho/1-HEADER-CODE-funnel-level.html
   and brand-source/OPTION-1-FOR-CLAUDE/KIANIS/FREE-SAMPLE-PACK-HEAD-ADDENDUM.html. Do not swap in plainer textures. */
:root{--o1-cream:#FFF4E4;--o1-navy:#1D2A44;--o1-teal:#0A5559;--o1-head-berry:#9E254A;--o1-btn:#B73559;--o1-btn-lip:#92213F}
body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75  0 0 0 0 .5  0 0 0 0 .3  0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 92% 8%,rgba(13,107,111,.16),transparent 45%),radial-gradient(ellipse at 4% 96%,rgba(242,177,52,.28),transparent 45%),#FFF4E4;background-attachment:fixed;background-size:100% 100%,auto,auto,auto;background-repeat:no-repeat;color:var(--o1-navy)}
.washes,.vine,.dragonfly{display:none!important}

/* painted bands: teal around Create, red around My vault, full width, wavy painted top edge */
.band{position:relative;margin-inline:calc(50% - 50vw);padding:72px calc(50vw - 50%) 64px;}
.band-teal{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 15% 20%,rgba(242,177,52,.25),transparent 45%),linear-gradient(135deg,#0D6B6F,#0A5559);background-size:100% 100%,auto,auto,auto;background-repeat:no-repeat}
.band-red{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 85% 15%,rgba(242,177,52,.30),transparent 45%),radial-gradient(ellipse at 10% 90%,rgba(228,106,74,.35),transparent 50%),linear-gradient(160deg,#C23A62,#A22B58);background-size:100% 100%,auto,auto,auto;background-repeat:no-repeat}
.band{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C70 14 130 34 220 24S380 6 470 18 620 40 730 26 900 4 1010 16 1140 36 1200 20V48Z'/%3E%3C/svg%3E") top/100% 48px no-repeat,linear-gradient(#000,#000) 0 47px/100% calc(100% - 47px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C70 14 130 34 220 24S380 6 470 18 620 40 730 26 900 4 1010 16 1140 36 1200 20V48Z'/%3E%3C/svg%3E") top/100% 48px no-repeat,linear-gradient(#000,#000) 0 47px/100% calc(100% - 47px) no-repeat}
@media(max-width:680px){.band{padding:60px 18px 40px;margin-inline:-16px}}

/* cream reading panels inset in the bands */
.band .panel,.band .easel-card,.vault-panel,.lb-card{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75  0 0 0 0 .5  0 0 0 0 .3  0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 92% 8%,rgba(13,107,111,.16),transparent 45%),radial-gradient(ellipse at 4% 96%,rgba(242,177,52,.28),transparent 45%),#FFF4E4;background-size:100% 100%,auto,auto,auto;background-repeat:no-repeat;border:0;border-radius:48px 18px 52px 24px;box-shadow:0 12px 0 #1D2A4422;color:var(--o1-navy)}
.band .panel{border-radius:36px 14px 40px 18px;padding:24px 26px 26px}
.band .easel-card{border-radius:48px 18px 52px 24px;padding:22px}
.vault-panel{padding:36px clamp(20px,4vw,52px)}
@media(max-width:680px){.band .panel,.band .easel-card{border-radius:32px 14px 36px 18px;padding:22px 18px}.vault-panel{border-radius:32px 14px 36px 18px;padding:28px 18px}}
.band h2 em,.vault-panel h2 em,.lb-card h2 em{color:var(--o1-head-berry)}
.band .label,.vault-panel .label{color:var(--o1-teal)}
.band a:not(.btn),.vault-panel a:not(.btn){color:var(--o1-teal)}
:focus-visible{outline:3px solid var(--o1-teal);outline-offset:3px}
/* inside panels, inputs and chips sit on white */
.band input[type=text],.band input[type=search],.band textarea,.band select,.band .tags,.band .chip,.band .way,.band .swatch,.band .prompt,.band .gen,.vault-panel input,.vault-panel textarea{background:#FFFFFF}
.band .chip[aria-pressed="true"]{background:var(--teal);color:#FFF4E4}
.band .canvas-wrap{background:rgba(13,107,111,.08)}
.band .pick,.vault-panel .card{background:#FFFFFF;border:1.5px solid rgba(13,107,111,.7)}
.band .pick[aria-pressed="true"]{border-color:var(--o1-head-berry);box-shadow:0 0 0 3px rgba(158,37,74,.22)}

/* berry pill buttons with a darker lower edge, cream lettering */
.btn.primary{background:var(--o1-btn);color:var(--o1-cream);--btn-lip:var(--o1-btn-lip)}
.btn.primary:hover{background:var(--o1-head-berry)}

/* logo and painted art */
.logo{display:block;flex:0 0 auto;line-height:0}
.logo img{display:block;height:64px;width:auto}
@media(max-width:600px){.logo img{height:46px}}
.top{position:relative;z-index:2}
.deco{position:absolute;pointer-events:none;z-index:0;height:auto}
.deco-flowers{top:6px;right:max(8px, calc(50% - 760px));width:200px;transform:rotate(8deg)}
.deco-jar{bottom:18px;left:max(4px, calc(50% - 780px));width:170px}
.deco-cottage{bottom:10px;right:max(4px, calc(50% - 790px));width:180px}
@media(max-width:1500px){.deco-jar,.deco-cottage{display:none}}
@media(max-width:1100px){.deco-flowers{width:140px;opacity:.9;right:6px;top:70px}}
@media(max-width:600px){.deco{display:none}}
.perch{width:58px;height:auto;top:-30px;right:26px;transform:rotate(10deg)}
footer{position:relative}
.wrap{position:static}
.site{position:relative;overflow:hidden}
/* the painted noise is drawn to tile seamlessly (stitchTiles), so tall app sections tile it at its drawn size instead of stretching it */
.band,.band .panel,.band .easel-card,.vault-panel,.lb-card{background-size:1600px 1000px,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat}
/* phones: logo on its own line at the top, title under it (as on the opt-in page) */
@media(max-width:600px){.brand{flex-direction:column;align-items:flex-start;gap:6px}.logo img{height:52px}.brand h1{font-size:40px}}