/* Faulty Stars - the look. Layout after Pajama (pajamamode.ai), the owner's choice of 14 Oct 2026: a sidebar on the left,
   a big character in the middle, a narrow conversation, a large rounded typing box at the bottom. Colours, LittleQuotes,
   the grey band and the starfield are Faulty Stars' own (prototype layout.php, from Moka Search's numbers). All fonts are
   served from this site (faulty1.md F10). */

@font-face{font-family:"LittleQuotes";font-weight:400 600;font-display:swap;src:url("/fonts/little-quotes.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Karla";font-weight:400;font-display:swap;src:url("/fonts/karla-400.woff2") format("woff2")}
@font-face{font-family:"Karla";font-weight:500;font-display:swap;src:url("/fonts/karla-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("/fonts/plex-mono-400.woff2") format("woff2")}

:root{
  --ink:#000; --ink-soft:#333; --ink-faint:#6b6b6b;
  --ground:#fff; --tint:#f7f6f3; --line:#d9d5cd; --line-soft:#ecebe6; --band:#eaeaea;
  --side:#f7f7f8; --bubble:#f1f2f4; --hover:#ececee;
  --blue:#0c4c7a; --blue-2:#1d6aa3; --blue-3:#6fa8dc; --blue-4:#d6e7f5; --navy:#062a45;
  --warn:#8f2f1c; --ok:#1d6b3a;
  --hero:"LittleQuotes",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  color-scheme:only light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

/* ---- the grey band; the logo (icon and words) sits 70% inside it and 30% below it (owner, 14 Oct 2026) ---- */
.sitetop{position:fixed;top:0;left:0;width:100%;height:50px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:var(--band);z-index:30}
.sitetop .brand{display:flex;align-items:center;gap:8px;height:100%;text-decoration:none}
.sitetop .brand .mark{height:48px;width:auto;display:block;transform:translateY(20px);transition:transform .35s var(--bounce)}
.sitetop .brand .words{height:26px;width:auto;display:block;transform:translateY(23px)}
.sitetop .brand:hover .mark{transform:translateY(20px) rotate(-8deg)}
.toplinks{display:flex;gap:22px;align-items:center}
.linkish{background:none;border:0;padding:4px 0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.linkish:hover{text-decoration-thickness:2px}
a.linkish{display:inline-block}
.menu{display:none;background:none;border:0;padding:6px;margin-right:6px;cursor:pointer;color:var(--ink)}
.sitefoot{position:relative;z-index:3;margin-top:80px;padding:0 37px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--band);font:400 12px/1 var(--mono);letter-spacing:.12em;color:var(--ink-soft)}
.sitefoot a{color:var(--ink-soft);text-decoration:none;font:400 12px/1 var(--mono);letter-spacing:.12em}
.sitefoot a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- two parts (owner, 14 Oct 2026): the opening screen is only the icon and the three lines; scrolling down brings the chat, with the "Ask Faulty" panel on its left ---- */
.workspace{position:relative;z-index:2;display:flex;flex-direction:column;width:50%;margin:0 auto;height:calc(100vh - 50px);height:calc(100dvh - 50px);scroll-margin-top:50px}
.sidebar{background:var(--side);border-right:1px solid var(--line-soft);display:flex;flex-direction:column;min-height:0;padding:22px 16px 16px;overflow-y:auto}
.side-head{display:flex;align-items:center;gap:12px;padding:0 6px 14px;border-bottom:1px solid var(--line-soft)}
.side-bot{width:52px;height:62px;flex:none;display:block}
.side-head b{display:block;font:600 17px/1.2 var(--sans)}
.side-head small{display:block;font:400 13px/1.35 var(--sans);color:var(--ink-faint)}
.side-title{margin:16px 6px 6px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.asks{list-style:none;margin:0;padding:0}
.asks li button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:14px;padding:10px 12px;cursor:pointer;font:400 15.5px/1.35 var(--sans);color:var(--ink-soft);transition:background .15s,color .15s,transform .3s var(--bounce)}
.asks li button:hover{background:var(--hover);color:var(--ink)}
.asks li button:active{transform:scale(.98)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:14px 6px 0;border-top:1px solid var(--line-soft)}
.side-foot a{color:var(--blue);font:500 14px/1.4 var(--sans);text-decoration:none}
.side-foot a:hover{text-decoration:underline}
.side-foot .linkish{text-align:left;font-size:14px}
.side-foot .quietlink{color:var(--ink-faint)}
.side-foot .copy{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.scrim{display:none}

.chat{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.messages{flex:1;min-height:0;overflow-y:auto;padding:28px 4px 16px;display:flex;flex-direction:column;align-items:center;scroll-behavior:smooth;scrollbar-width:thin}

/* ---- the opening screen: the Faulty Stars icon and the three lines, nothing else ---- */
.hero{position:relative;z-index:2;height:100vh;height:100svh;min-height:560px;text-align:center}
.herobot{width:clamp(170px,17vw,230px);height:clamp(182px,18.2vw,246px);margin:0 auto 6px;cursor:pointer;animation:arrive .95s var(--bounce) both}
.wordmark{font:500 clamp(15px,1.25vw,18px)/1.5 var(--sans);color:var(--ink-soft);margin:0 0 6px;animation:rise .6s var(--bounce) .15s both}
.tagline{font-family:var(--hero);font-weight:500;font-size:clamp(30px,4.3vw,76px);letter-spacing:-.03em;line-height:1.08;color:var(--blue);margin:0 0 10px;animation:rise .6s var(--bounce) .25s both}
@media (min-width:860px){.tagline{white-space:nowrap}}
.subline{font:500 clamp(15px,1.25vw,18px)/1.5 var(--sans);color:var(--ink-soft);margin:0;animation:rise .6s var(--bounce) .35s both}
.hero .wordmark,.hero .tagline,.hero .subline{background:var(--ground);display:table;margin-left:auto;margin-right:auto;padding:0 12px;border-radius:4px}

/* ---- the conversation: a narrow column ---- */
.thread{width:100%;display:flex;flex-direction:column;gap:12px}
.log{display:flex;flex-direction:column;gap:16px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:pop .45s var(--bounce) both;transform-origin:0% 100%}
.msg .avatar{width:36px;height:42px;flex:0 0 36px;margin-top:2px;display:block}
.msg .bubble{min-width:0;overflow-wrap:anywhere}
.msg.faulty .bubble{background:var(--bubble);padding:14px 20px;border-radius:24px;max-width:92%;font-size:17px;line-height:1.6}
.msg.faulty .bubble p{margin:0 0 10px}
.msg.faulty .bubble p:last-child{margin-bottom:0}
.msg.faulty .bubble .head{display:block;font:600 15px/1.3 var(--sans);color:var(--blue);margin-bottom:2px}
.msg.faulty .bubble .quick{color:var(--ink-soft)}
.msg.faulty .bubble .whyline{color:var(--ink-soft);font-size:15.5px}
.msg.faulty .bubble .askline{font:500 18px/1.4 var(--sans)}
.msg.person{justify-content:flex-end;transform-origin:100% 100%}
.msg.person .bubble{background:var(--blue);color:#fff;padding:12px 20px;border-radius:24px;max-width:80%;white-space:pre-wrap}
.msg .bubble a{color:var(--blue);text-underline-offset:3px}
.msg.person .bubble a{color:#fff}
.dots{display:inline-flex;gap:5px;padding:8px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:dot 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-6px);opacity:1}}

/* ---- the typing box: a big rounded pill with a round blue button (after Pajama's composer) ---- */
.composer-wrap{padding:12px 0 20vh;display:flex;justify-content:center;background:linear-gradient(rgba(255,255,255,0),var(--ground) 18px)}
.composer{width:100%;display:flex;align-items:flex-end;gap:10px;background:#fff;border:2px solid var(--blue);border-radius:40px;padding:10px 10px 10px 24px;transition:border-color .25s,box-shadow .3s}
.composer:focus-within{border-color:var(--blue)}
.composer textarea{flex:1;resize:none;border:0;outline:none;background:transparent;padding:13px 0;font:400 18px/1.45 var(--sans);max-height:180px;min-height:56px}
.send{width:56px;height:56px;flex:none;border-radius:50%;border:0;display:grid;place-items:center;background:var(--blue);color:#fff;cursor:pointer;transition:transform .3s var(--bounce),opacity .2s}
.send:hover{transform:scale(1.08)}
.send:active{transform:scale(.88)}
.send:disabled{opacity:.35;cursor:default;transform:none}

/* ---- the middle: the Faulty Stars icon itself ---- */
.heroicon{width:clamp(167px,16.7vw,251px);height:auto;display:block;margin:0;animation:arrive .95s var(--bounce) both,drift 4.5s ease-in-out 1s infinite}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* ---- Faulty: one star from the icon, nothing else. A click makes him hop once; while he works he jumps a little ---- */
.fb{display:block;width:100%;height:100%;overflow:visible;cursor:pointer}
.fb .fb-all{transform-box:view-box;transform-origin:580px 800px}
.fb.wave .fb-all{animation:jump .75s ease-in-out 1}
.fb.thinking .fb-all{animation:jump .75s ease-in-out infinite}
.fb.happy .fb-all{animation:jump .75s ease-in-out 2}
@keyframes jump{0%,100%{transform:none}45%{transform:translateY(-60px)}}
@keyframes arrive{0%{opacity:0;transform:translateY(50px) scale(.5)}65%{opacity:1;transform:translateY(-10px) scale(1.06)}100%{transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}

/* ---- phones and narrow windows: the sidebar slides in from the menu button ---- */
@media (max-width:900px){
  .workspace{width:calc(100% - 24px)}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(330px,86vw);z-index:40;transform:translateX(-102%);transition:transform .35s var(--bounce);padding-top:24px}
  .sidebar.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:35;opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.show{opacity:1;pointer-events:auto}
  .menu{display:grid}
  .sitetop{padding:0 14px}
  .messages{padding:44px 12px 10px}
  .composer-wrap{padding:6px 10px 12px}
  .msg.faulty .bubble{padding:12px 16px}
  .msg .bubble{font-size:16px}
}
@media (max-width:560px){
  .sitetop{height:45px}
  .workspace{height:calc(100vh - 45px);height:calc(100dvh - 45px);scroll-margin-top:45px}
  .sitetop .brand .mark{height:38px;transform:translateY(18px)}
  .sitetop .brand:hover .mark{transform:translateY(18px)}
  .sitetop .brand .words{height:21px;transform:translateY(22px)}
  .send{width:46px;height:46px}
}

/* ---- the step card ---- */
.card{margin:4px 20px 6px 62px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:6px;background:var(--ground);animation:drop .5s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:600px){.card{margin:4px 12px 6px 12px;padding:16px}}
.stepline{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stepcount{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.track{flex:1;height:2px;background:var(--line-soft);position:relative;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.field{margin:0 0 14px}
.field label,.sub{display:block;font:400 12px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 4px}
.card input[type=text],.card input[type=email],.card input[type=date],.card input[type=time],.card input[type=number],.card input[type=search],.card textarea{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--line);border-radius:0;font:400 18px/1.4 var(--sans);padding:10px 2px;transition:border-color .2s}
.card input:focus,.card textarea:focus{outline:none;border-bottom-color:var(--ink)}
.card textarea{resize:vertical;min-height:110px;line-height:1.55}
.card input::placeholder,.card textarea::placeholder{color:#9a958c}
.card input[type=date],.card input[type=time]{color-scheme:light}
.row{display:flex;gap:22px}.row>*{flex:1;min-width:0}
@media (max-width:520px){.row{flex-direction:column;gap:0}}
.code{letter-spacing:.5em;font-size:26px !important;text-align:center;max-width:220px}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{border:2px solid var(--line);background:#fff;padding:10px 18px;cursor:pointer;font:400 16px/1.2 var(--sans);transition:all .15s}
.choice:hover{border-color:var(--ink-faint)}
.choice[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}
.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;flex-wrap:wrap}
.go{background:var(--blue);color:#fff;border:0;border-radius:999px;padding:10px 22px;cursor:pointer;font:500 15px/1 var(--sans);transition:transform .15s,opacity .15s}
.go:hover{opacity:.9}.go:active{transform:scale(.97)}
.go:disabled{opacity:.35;cursor:not-allowed}
.quiet{background:none;border:0;padding:6px 0;cursor:pointer;color:var(--ink-faint);font:400 15px/1 var(--sans);text-decoration:underline;text-underline-offset:3px}
.quiet:hover{color:var(--ink)}
.field.gap{margin-top:18px;margin-bottom:6px}
.note.tight{margin:0 0 6px}
.card textarea.short{min-height:80px}
.choices+.actions,.pics+.picnotes{margin-top:14px}
.err{color:var(--warn);font:500 15px/1.4 var(--sans);margin:10px 0 0;min-height:0}
.err:empty{display:none}
.note{font-size:14px;color:var(--ink-soft);margin:8px 0 0}

/* place search */
.finder{position:relative}
.results{list-style:none;margin:4px 0 0;padding:0;border:1px solid var(--line);max-height:250px;overflow-y:auto;background:#fff}
.results:empty{display:none}
.results li{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line-soft);font:400 16px/1.35 var(--sans)}
.results li:last-child{border-bottom:0}
.results li:hover,.results li.on{background:var(--tint)}

/* pictures */
.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.pic{position:relative;aspect-ratio:3/4;border:2px dashed var(--line);background:var(--tint);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s}
.pic:hover{border-color:var(--ink-faint)}
.pic:active{transform:scale(.98)}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic .plus{font:300 38px/1 var(--sans);color:var(--ink-faint)}
.pic input{display:none}
.pic .badge{position:absolute;left:6px;bottom:6px;right:6px;font:600 11px/1.2 var(--sans);letter-spacing:.04em;padding:5px 7px;border-radius:3px;background:rgba(255,255,255,.94);text-align:center}
.pic.ok{border:2px solid var(--ok)}.pic.ok .badge{color:var(--ok)}
.pic.rejected,.pic.unchecked{border:2px solid var(--warn)}.pic.rejected .badge,.pic.unchecked .badge{color:var(--warn)}
.pic.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);background-size:250% 100%;animation:shimmer 1.2s linear infinite}
.picnotes p{margin:4px 0;font-size:14px;color:var(--warn)}

/* selfie */
.cam{position:relative;width:100%;max-width:340px;aspect-ratio:3/4;background:#111;border-radius:8px;overflow:hidden;margin:0 auto 12px}
.cam video,.cam img{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.cam img{transform:none}
.cam .oval{position:absolute;inset:12% 18% 18%;border:3px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none}

/* the non-faulty stamp */
.stamp{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ok);border:2px solid var(--ok);padding:7px 10px;border-radius:3px;transform:rotate(-6deg);animation:stampin .6s cubic-bezier(.3,1.6,.5,1) both}
.bigstamp{display:inline-block;margin-top:6px;font:600 15px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ok);border:3px solid var(--ok);padding:10px 14px;border-radius:4px;transform:rotate(-6deg);animation:stampin .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampin{0%{opacity:0;transform:scale(2.6) rotate(-18deg)}60%{opacity:1;transform:scale(.92) rotate(-4deg)}100%{transform:scale(1) rotate(-6deg)}}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .3s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}}
/* ---- the Terms and Privacy page ---- */
a.linkish{display:inline-block}
.legal{position:relative;z-index:2;padding:104px 0 0;max-width:760px}
.legal h1{font-family:var(--hero);font-size:clamp(34px,5vw,54px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--blue);margin:0 0 14px}
.legal h2{font:600 24px/1.3 var(--sans);margin:44px 0 10px;padding-top:12px;border-top:1px solid var(--line-soft);scroll-margin-top:72px}
.legal h3{font:600 18px/1.35 var(--sans);margin:24px 0 6px}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--ink-soft)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--ink)}
.legal code{font:400 14px var(--mono);background:var(--tint);padding:1px 5px;border-radius:3px}
.legal mark.gap{background:#fff1a8;color:var(--ink);padding:1px 4px;border-radius:2px}
.toc{margin:22px 0 8px;padding:16px 20px;background:var(--tint);border-left:3px solid var(--blue)}
.toc p{margin:0 0 6px;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.toc ul{margin:0;padding-left:18px}.toc li{font-size:16px;margin:2px 0}
.toc a{color:var(--blue)}
.agree{display:flex;gap:10px;align-items:flex-start;font:400 16px/1.5 var(--sans);margin:0 0 12px;cursor:pointer}
.agree input{width:20px;height:20px;margin:2px 0 0;flex:0 0 20px;accent-color:var(--blue)}
.agree a{color:var(--blue);text-underline-offset:3px}
.legal{padding-top:110px}
.card{margin:4px 0 6px 46px}
@media (max-width:600px){.card{margin:4px 0 6px 0}}
.legal.wrap{width:min(760px,92%);margin:0 auto}

/* home page: one star on screen at a time (owner, 14 Oct 2026). At the top, the big star in the middle and only the
   words top-left; once the middle star has scrolled away, the icon appears top-left beside the words. */
body.home .sitetop .brand .mark{display:none}
body.home.scrolled .sitetop .brand .mark{display:block;animation:markin .45s var(--bounce) both}
@keyframes markin{from{opacity:0;transform:translateY(20px) scale(.4) rotate(-40deg)}to{opacity:1;transform:translateY(20px)}}
@media (max-width:560px){@keyframes markin{from{opacity:0;transform:translateY(18px) scale(.4) rotate(-40deg)}to{opacity:1;transform:translateY(18px)}}}

/* the chat section: one centred column, half the screen wide, 25% margin each side (owner, 14 Oct 2026);
   the typing box sits at least 20% of the screen above the footer and is plainly the place to type */
@media (max-width:1200px) and (min-width:901px){.workspace{width:70%}}
.composer textarea::placeholder{color:#55606b}
.composer:focus-within{}
body.home .sitefoot{margin-top:0}
.toplinks .stamp{transform:rotate(-4deg)}
.toplinks .quietlink{color:var(--ink-faint)}
@media (max-width:560px){.toplinks{gap:12px}.toplinks .linkish{font-size:12.5px}}

/* the opening screen (owner, 14 Oct 2026): the icon at 80% and higher up; the headline about 40% from the bottom of the
   screen; an arrow button under the last line takes you down to the chat, gently */
.heroicon-wrap{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%)}
.hero-text{position:absolute;left:0;right:0;padding:0 16px;top:calc(60% - 33px - min(max(30px, 4.3vw), 76px) * .54)}
.godown{display:grid;place-items:center;width:42px;height:42px;margin:24px auto 0;border-radius:50%;border:2px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;animation:rise .6s var(--bounce) .5s both,bob 2.6s ease-in-out 1.2s infinite;transition:background .2s,color .2s}
.godown:hover{background:var(--blue);color:#fff}
.godown:active{transform:scale(.92)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (max-width:600px){.heroicon-wrap{top:28%}.godown{width:37px;height:37px;margin-top:18px}}
/* the arrow button at 80% (owner, 14 Oct 2026), and a shorter footer */
.godown svg{width:19px;height:19px}
@media (max-width:600px){.godown svg{width:16px;height:16px}}
@media (max-width:560px){.sitefoot{height:36px;padding:0 14px}}
/* bigger chat text (owner, 14 Oct 2026): 17 -> 19 px, the rest in step */
.msg.faulty .bubble{font-size:19px;line-height:1.6}
.msg.person .bubble{font-size:19px;line-height:1.5}
.msg.faulty .bubble .head{font-size:17px}
.msg.faulty .bubble .askline{font-size:20px}
.msg.faulty .bubble .whyline{font-size:17px}
.composer textarea{font-size:19px}
@media (max-width:900px){.msg.faulty .bubble,.msg.person .bubble{font-size:17.5px}.composer textarea{font-size:17.5px}}
/* the middle star sits on clean white (owner, 14 Oct 2026): the small flying stars stream out from the centre of the
   screen, right behind the logo, and their faint cloud read as grey. A soft white area behind the logo keeps them out. */
.heroicon-wrap{padding:70px 90px;border-radius:50%;background:radial-gradient(closest-side,#fff 78%,rgba(255,255,255,0) 100%)}
@media (max-width:600px){.heroicon-wrap{padding:44px 56px}}
/* the arrow button in the same colour as the text above it (owner, 14 Oct 2026) */
.godown{border-color:var(--ink-soft);color:var(--ink-soft)}
.godown:hover{background:var(--ink-soft);color:#fff}
/* the stars shine (owner, 14 Oct 2026): the stars stay pure white inside; the page behind them is 5% grey.
   Faulty's bubbles and the question boxes turn white so they still stand out on the grey. */
:root{--ground:#fafafa;--bubble:#ffffff}   /* 2% grey (owner, 14 Oct 2026) */
.heroicon-wrap{background:radial-gradient(closest-side,var(--ground) 78%,rgba(250,250,250,0) 100%)}
.composer-wrap{background:linear-gradient(rgba(250,250,250,0),var(--ground) 18px)}
.card{background:#fff}
/* phones and tablets too: the typing box sits 20% of the screen above the footer (owner's rule) */
@media (max-width:900px){.composer-wrap{padding:10px 0 20vh}}
/* a phone on its side (a short screen): the opening screen flows top to bottom so the arrow stays in view */
@media (max-height:520px){
  .hero{height:auto;min-height:0;padding:58px 16px 22px}
  .heroicon-wrap,.hero-text{position:static;transform:none}
  .heroicon-wrap{display:block;width:max-content;margin:0 auto 10px;padding:4px 30px}
  .heroicon{width:96px}
  .tagline{font-size:clamp(24px,3.6vw,34px)}
  .godown{margin-top:12px}
}