@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,500&display=swap');

:root {
  --cream: #f4f0e7;
  --paper: #fbf9f3;
  --ink: #252421;
  --muted: #77736a;
  --coral: #f05d44;
  --acid: #dbe86d;
  --blue: #76a8e8;
  --purple: #8469aa;
  --line: rgba(37, 36, 33, 0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: Manrope, sans-serif; }
button { color: inherit; font: inherit; }
.is-hidden { display: none !important; }
.landing-screen { min-height:100svh; overflow:hidden; padding-bottom:56px; position:relative; }
.landing-screen::before,.belly-screen::before { background-image:radial-gradient(rgba(37,36,33,.18) .6px,transparent .6px); background-size:5px 5px; content:''; inset:0; opacity:.13; pointer-events:none; position:absolute; }
.landing-nav { align-items:center; display:flex; height:76px; justify-content:space-between; padding:0 22px; position:relative; z-index:3; }
.nav-login { background:transparent; border:1px solid var(--ink); border-radius:999px; cursor:pointer; font-size:11px; font-weight:700; padding:10px 17px; }
.landing-main { display:grid; min-height:calc(100svh - 132px); padding:25px 22px 40px; place-items:center; position:relative; }
.landing-copy { max-width:520px; position:relative; z-index:2; }.landing-copy .eyebrow{justify-content:flex-start}
.landing-copy h1 { font-size:clamp(54px,16vw,86px); font-weight:600; letter-spacing:-.075em; line-height:.79; margin:28px 0 25px; }.landing-copy h1 em{color:var(--coral);font-family:Newsreader,serif;font-weight:500}
.landing-copy>p{color:var(--muted);font-size:14px;line-height:1.65;max-width:410px}.primary-cta{background:var(--ink);border:0;border-radius:999px;color:white;cursor:pointer;font-size:12px;font-weight:700;margin-top:18px;padding:15px 20px}.primary-cta span{color:var(--acid);margin-left:16px}.landing-copy small{color:var(--muted);display:block;font:400 8px DM Mono;margin-top:13px;text-transform:uppercase}
.landing-visual{display:none}.landing-footer{bottom:19px;color:var(--muted);display:flex;font:500 8px DM Mono;justify-content:space-between;left:22px;position:absolute;right:22px;text-transform:uppercase}.landing-footer span:nth-child(2){display:none}
.login-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:30px 30px 30px 8px;box-shadow:12px 14px 0 rgba(37,36,33,.12);display:none;max-width:400px;padding:34px 28px 27px;position:absolute;width:calc(100% - 36px);z-index:8}.login-card.open{display:block}.login-close{background:none;border:0;cursor:pointer;font-size:26px;line-height:1;position:absolute;right:18px;top:13px}.login-card .eyebrow{justify-content:flex-start}.login-card h2{font-size:38px;letter-spacing:-.055em;line-height:1;margin:20px 0 25px}.login-card label{display:block;font:500 9px DM Mono;margin-top:14px;text-transform:uppercase}.login-card input{background:transparent;border:0;border-bottom:1px solid var(--ink);display:block;font:500 14px Manrope;outline:0;padding:10px 0;width:100%}.login-submit{background:var(--coral);border:1px solid var(--ink);border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;margin-top:25px;padding:13px 18px;width:100%}.login-submit span{float:right}.demo-link{background:none;border:0;color:var(--muted);cursor:pointer;display:block;font-size:10px;margin:13px auto 0;text-decoration:underline}
.app-shell { min-height: 100svh; overflow: hidden; position: relative; padding-bottom: 118px; }
.app-shell::before { background-image: radial-gradient(rgba(37,36,33,.16) .6px, transparent .6px); background-size: 5px 5px; content: ''; inset: 0; opacity: .14; pointer-events: none; position: absolute; }
.topbar { align-items: center; display: flex; height: 72px; justify-content: space-between; padding: 0 22px; position: relative; z-index: 5; }
.brand, .text-button, .avatar { background: none; border: 0; cursor: pointer; }
.brand { align-items: center; display: flex; font-size: 14px; font-weight: 700; gap: 10px; letter-spacing: -.02em; padding: 0; }
.brand-mark { background: var(--ink); border-radius: 46% 54% 45% 55%; display: block; height: 25px; position: relative; transform: rotate(-5deg); width: 24px; }
.brand-mark i { background: var(--cream); border-radius: 50%; height: 4px; position: absolute; top: 8px; width: 4px; }
.brand-mark i:first-child { left: 6px; }.brand-mark i:last-child { right: 6px; }
.top-actions { align-items: center; display: flex; gap: 10px; }
.text-button { font-size: 12px; font-weight: 600; }
.count-badge { background: var(--coral); border-radius: 20px; color: white; display: inline-grid; font: 500 9px DM Mono; height: 18px; margin-left: 2px; place-items: center; width: 18px; }
.avatar { background: var(--ink); border-radius: 50%; color: var(--cream); font: 500 10px DM Mono; height: 34px; width: 34px; }
.home-screen { min-height: calc(100svh - 190px); padding: 30px 22px 10px; position: relative; }
.intro-copy { margin: 0 auto; max-width: 420px; position: relative; text-align: center; z-index: 2; }
.eyebrow { align-items: center; display: flex; font: 500 9px DM Mono; gap: 7px; justify-content: center; letter-spacing: .15em; margin: 0 0 13px; text-transform: uppercase; }
.eyebrow span { background: var(--coral); border-radius: 50%; height: 6px; width: 6px; }
.intro-copy h1 { font-size: clamp(29px, 7.6vw, 44px); font-weight: 600; letter-spacing: -.055em; line-height: .98; margin: 0; }
.intro-copy h1 em { color: var(--coral); font-family: Newsreader, serif; font-weight: 500; }
.intro-copy > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px auto 0; max-width: 270px; }
.monster-stage { height: 370px; margin: -5px auto 0; max-width: 450px; position: relative; }
.monster { background: none; border: 0; cursor: pointer; height: 285px; left: 50%; padding: 0; position: absolute; top: 40px; transform: translateX(-50%); width: 230px; }
.monster:hover .face { transform: rotate(1deg) scale(1.015); }
.face { background: var(--purple); border: 2px solid var(--ink); border-radius: 48% 52% 44% 56% / 45% 47% 53% 55%; box-shadow: 8px 9px 0 rgba(37,36,33,.12); display: block; height: 228px; left: 16px; position: absolute; top: 29px; transition: transform .3s ease; width: 198px; z-index: 3; }
.ear { background: var(--purple); border: 2px solid var(--ink); position: absolute; top: 15px; z-index: 1; }
.ear-left { border-radius: 70% 30% 44% 56%; height: 66px; left: 12px; transform: rotate(-26deg); width: 50px; }
.ear-right { border-radius: 38% 62% 50% 50%; height: 70px; right: 13px; transform: rotate(25deg); width: 52px; }
.tuft { background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 78%); height: 30px; position: absolute; top: 13px; width: 22px; z-index: 4; }
.tuft-one { left: 90px; transform: rotate(-10deg); }.tuft-two { left: 111px; top: 17px; transform: rotate(20deg) scale(.7); }
.eye { background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; height: 39px; position: absolute; top: 50px; width: 36px; }
.eye-left { left: 51px; transform: rotate(-5deg); }.eye-right { right: 49px; transform: rotate(6deg); }
.eye i { background: var(--ink); border-radius: 50%; height: 12px; left: 12px; position: absolute; top: 14px; width: 10px; }
.freckle { background: var(--acid); border: 1px solid var(--ink); border-radius: 50%; height: 7px; position: absolute; top: 99px; width: 7px; }
.freckle-one { left: 42px; }.freckle-two { right: 42px; }
.belly { align-items: center; background: var(--acid); border: 2px solid var(--ink); border-radius: 49% 51% 44% 56%; bottom: 21px; display: flex; flex-direction: column; height: 98px; justify-content: center; left: 43px; position: absolute; transform: rotate(2deg); width: 112px; }
.belly::before { border: 1px dashed rgba(37,36,33,.4); border-radius: inherit; content: ''; inset: 7px; position: absolute; }
.belly-label { font: 500 9px DM Mono; letter-spacing: .08em; text-transform: uppercase; }.belly-count { font-family: Newsreader, serif; font-size: 17px; font-style: italic; margin-top: 3px; }
.arm, .leg { background: var(--purple); border: 2px solid var(--ink); position: absolute; }
.arm { height: 39px; top: 126px; width: 60px; z-index: 2; }.arm-left { border-radius: 80% 20% 45% 55%; left: -18px; transform: rotate(-15deg); }.arm-right { border-radius: 20% 80% 55% 45%; right: -18px; transform: rotate(17deg); }
.leg { border-radius: 20px; bottom: 2px; height: 44px; width: 38px; }.leg-left { left: 49px; transform: rotate(7deg); }.leg-right { right: 47px; transform: rotate(-5deg); }
.art-patch { background: var(--coral); border: 2px solid var(--ink); position: absolute; z-index: 5; }.patch-one { border-radius: 70% 30% 60% 40%; height: 20px; left: 20px; top: 72px; transform: rotate(-22deg); width: 24px; }.patch-two { background: var(--blue); border-radius: 50%; height: 16px; right: 25px; top: 101px; width: 16px; }
.thought-orbit { align-items: center; border: 1px solid var(--ink); border-radius: 50%; display: flex; height: 46px; justify-content: center; position: absolute; width: 46px; }
.thought-orbit::after { background: var(--ink); border-radius: 50%; content: ''; height: 4px; position: absolute; right: -7px; width: 4px; }
.thought-orbit span { font: 500 8px DM Mono; text-transform: uppercase; }.orbit-one { background: #f3a493; left: 18px; top: 75px; transform: rotate(-11deg); }.orbit-two { background: var(--blue); right: 20px; top: 122px; transform: rotate(10deg); }
.scribble { font-family: Newsreader, serif; position: absolute; }.scribble-left { bottom: 88px; color: var(--coral); font-size: 30px; left: 42px; }.scribble-right { color: var(--ink); font-size: 38px; right: 44px; top: 59px; transform: rotate(15deg); }
.monster-note { bottom: 9px; font: 500 10px DM Mono; left: 0; margin: 0; position: absolute; text-align: center; text-transform: uppercase; width: 100%; }.monster-note span { color: var(--muted); margin-right: 5px; }
.today-card { display: none; }
.capture-dock { align-items: center; background: var(--ink); border-radius: 24px; bottom: 46px; box-shadow: 0 14px 35px rgba(37,36,33,.22); color: white; display: grid; gap: 12px; grid-template-columns: 54px 1fr 40px; left: 16px; padding: 10px 12px; position: fixed; right: 16px; z-index: 10; }
.record-button, .upload-button { border: 0; cursor: pointer; }
.record-button { background: var(--coral); border-radius: 18px; height: 54px; position: relative; width: 54px; }.record-button::before, .record-button::after { background: var(--paper); border-radius: 9px; content: ''; left: 22px; position: absolute; width: 10px; }.record-button::before { height: 17px; top: 15px; }.record-button::after { height: 4px; top: 34px; }
.record-dot { border: 1.5px solid var(--paper); border-top-color: transparent; border-radius: 0 0 10px 10px; height: 15px; left: 17px; position: absolute; top: 22px; width: 20px; }
.capture-copy { display: flex; flex-direction: column; }.capture-copy strong { font-size: 13px; }.capture-copy span { color: rgba(255,255,255,.58); font-size: 10px; margin-top: 2px; }
.upload-button { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; font-size: 22px; height: 38px; width: 38px; }
.micro-footer { bottom: 14px; color: var(--muted); display: flex; font: 500 8px DM Mono; justify-content: space-between; left: 22px; position: fixed; right: 22px; text-transform: uppercase; }
.belly-screen{display:none;min-height:calc(100svh - 72px);overflow:auto;padding:32px 22px 110px;position:relative}.app-shell.belly-open{overflow:visible}.app-shell.belly-open .home-screen,.app-shell.belly-open .capture-dock{display:none}.app-shell.belly-open .belly-screen{display:block}.belly-header{align-items:end;display:flex;justify-content:space-between;margin:0 auto;max-width:1100px;position:relative}.belly-header .eyebrow{justify-content:flex-start}.belly-header h1{font-size:46px;letter-spacing:-.06em;line-height:1;margin:13px 0 7px}.belly-header>div>p:last-child{color:var(--muted);font-size:11px;margin:0}.new-thought{align-items:center;background:var(--ink);border:0;border-radius:999px;color:white;cursor:pointer;display:flex;font-size:10px;font-weight:700;gap:8px;padding:11px 14px}.new-thought span{color:var(--acid);font-size:17px}
.belly-toolbar{display:flex;flex-direction:column;gap:14px;margin:28px auto 20px;max-width:1100px;position:relative}.filter-row{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.filter{background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;flex:0 0 auto;font-size:9px;padding:8px 12px}.filter.active{background:var(--ink);color:white}.filter b{font-weight:500;margin-left:3px}.search-box{align-items:center;border-bottom:1px solid var(--ink);display:flex;gap:6px;padding:5px 0}.search-box input{background:none;border:0;font:500 10px DM Mono;outline:0;width:100%}
.thought-grid{display:grid;gap:12px;margin:0 auto;max-width:1100px;position:relative}.thought-card{background:rgba(251,249,243,.74);border:1px solid var(--line);border-radius:22px 22px 22px 7px;cursor:pointer;min-height:180px;padding:18px;text-align:left;transition:transform .2s,box-shadow .2s}.thought-card:hover{box-shadow:5px 6px 0 rgba(37,36,33,.12);transform:translate(-2px,-2px) rotate(-.3deg)}.card-meta{align-items:center;display:flex;font:500 8px DM Mono;justify-content:space-between;text-transform:uppercase}.category-pill{border:1px solid var(--ink);border-radius:999px;padding:5px 8px}.category-pill.Art{background:#f3a493}.category-pill.Work{background:var(--acid)}.category-pill.Life{background:var(--blue)}.category-pill.Wonder{background:#c4b5db}.card-time{color:var(--muted)}.thought-card h3{font-size:18px;letter-spacing:-.035em;line-height:1.15;margin:24px 0 8px}.thought-card p{color:var(--muted);display:-webkit-box;font-size:11px;line-height:1.55;margin:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.card-foot{align-items:center;border-top:1px solid var(--line);display:flex;font:500 8px DM Mono;justify-content:space-between;margin-top:18px;padding-top:10px;text-transform:uppercase}.waveform{align-items:center;display:flex;gap:2px}.waveform i{background:var(--ink);display:block;height:4px;width:2px}.waveform i:nth-child(2n){height:9px}.waveform i:nth-child(3n){height:6px}
.processing-overlay{align-items:center;background:rgba(37,36,33,.55);display:none;inset:0;justify-content:center;padding:20px;position:fixed;z-index:30}.processing-overlay.open{display:flex}.processing-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:28px 28px 28px 8px;max-width:370px;padding:31px;text-align:center;width:100%}.processing-card .eyebrow{margin-top:18px}.processing-card h2{font-size:27px;letter-spacing:-.045em;margin:16px 0 8px}.processing-card>p:not(.eyebrow){color:var(--muted);font-size:11px;line-height:1.5}.processing-monster{background:var(--purple);border:1.5px solid var(--ink);border-radius:48% 52% 43% 57%;height:64px;margin:auto;position:relative;width:74px}.processing-monster i{background:white;border:1px solid var(--ink);border-radius:50%;height:15px;position:absolute;top:17px;width:13px}.processing-monster i:first-child{left:18px}.processing-monster i:nth-child(2){right:18px}.processing-monster span{animation:chew .5s infinite alternate;background:var(--ink);border-radius:50%;bottom:12px;height:6px;left:31px;position:absolute;width:12px}.processing-line{background:#e2ded4;border-radius:5px;height:5px;margin-top:20px;overflow:hidden}.processing-line i{animation:digest 2.2s ease-in-out infinite;background:var(--coral);display:block;height:100%;width:45%}
.note-dialog{background:var(--paper);border:1.5px solid var(--ink);border-radius:28px 28px 28px 8px;box-shadow:12px 14px 0 rgba(37,36,33,.16);color:var(--ink);max-height:calc(100svh - 32px);max-width:570px;padding:30px 24px;width:calc(100% - 30px)}.note-dialog::backdrop{background:rgba(37,36,33,.55)}.dialog-close{background:none;border:0;cursor:pointer;font-size:26px;position:absolute;right:17px;top:10px}.dialog-meta{align-items:center;display:flex;font:500 8px DM Mono;gap:8px;text-transform:uppercase}.note-dialog h2{font-size:31px;letter-spacing:-.055em;line-height:1.03;margin:22px 0 12px}.dialog-summary{color:var(--muted);font-family:Newsreader,serif;font-size:18px;font-style:italic;line-height:1.4}.dialog-section{border-top:1px solid var(--line);margin-top:23px;padding-top:17px}.dialog-section h4{font:500 8px DM Mono;letter-spacing:.1em;margin:0 0 10px;text-transform:uppercase}.dialog-section p{font-size:11px;line-height:1.65;margin:0}.audio-player{align-items:center;background:var(--ink);border-radius:16px;color:white;display:flex;gap:11px;padding:10px 13px}.play-icon{background:var(--coral);border-radius:50%;display:grid;height:30px;place-items:center;width:30px}.audio-player audio{height:30px;max-width:calc(100% - 42px)}.demo-audio{color:rgba(255,255,255,.65);font:400 9px DM Mono}.toast{background:var(--acid);border:1px solid var(--ink);border-radius:999px;bottom:24px;font:600 10px DM Mono;left:50%;opacity:0;padding:11px 15px;pointer-events:none;position:fixed;transform:translate(-50%,20px);transition:.25s;z-index:40}.toast.open{opacity:1;transform:translate(-50%,0)}
.record-button.recording{animation:recordPulse 1s infinite}.app-shell.evolved .patch-one{background:var(--acid);height:26px;width:30px}.app-shell.evolved .face::after{color:var(--acid);content:'✦';font-size:24px;position:absolute;right:25px;top:122px;transform:rotate(13deg)}
@keyframes recordPulse{50%{box-shadow:0 0 0 9px rgba(240,93,68,.18)}}@keyframes digest{from{transform:translateX(-110%)}to{transform:translateX(230%)}}@keyframes chew{to{transform:scaleY(.5)}}

@media (min-width: 900px) {
  .landing-nav{height:86px;padding:0 48px}.landing-main{grid-template-columns:1fr 1fr;padding:20px 9vw 60px}.landing-copy h1{font-size:clamp(70px,7vw,105px)}.landing-visual{display:block;height:520px;position:relative;width:100%}.mini-monster{background:var(--purple);border:2px solid var(--ink);border-radius:48% 52% 43% 57%;box-shadow:16px 17px 0 rgba(37,36,33,.12);height:330px;left:50%;position:absolute;top:57px;transform:translateX(-45%) rotate(4deg);width:300px}.mini-monster::before,.mini-monster::after{background:var(--purple);border:2px solid var(--ink);content:'';height:100px;position:absolute;top:-38px;width:80px;z-index:-1}.mini-monster::before{border-radius:70% 30%;left:8px;transform:rotate(-24deg)}.mini-monster::after{border-radius:30% 70%;right:5px;transform:rotate(25deg)}.mini-eye{background:white;border:2px solid var(--ink);border-radius:50%;height:52px;position:absolute;top:68px;width:46px}.mini-eye::after{background:var(--ink);border-radius:50%;content:'';height:14px;left:15px;position:absolute;top:19px;width:12px}.mini-eye.one{left:77px}.mini-eye.two{right:73px}.mini-monster>span{background:var(--acid);border:2px solid var(--ink);border-radius:50%;bottom:48px;display:grid;font:500 14px DM Mono;height:130px;left:84px;place-items:center;position:absolute;text-align:center;text-transform:uppercase;transform:rotate(-3deg);width:140px}.landing-sticker{border:1px solid var(--ink);border-radius:50%;font:500 10px DM Mono;padding:18px 11px;position:absolute;text-transform:uppercase;z-index:2}.sticker-one{background:#f3a493;left:8%;top:90px;transform:rotate(-12deg)}.sticker-two{background:var(--blue);right:1%;top:220px;transform:rotate(13deg)}.landing-visual p{bottom:1px;font:italic 23px Newsreader;position:absolute;right:5%;text-align:center;transform:rotate(-5deg)}.landing-visual p em{color:var(--coral)}.landing-footer{left:48px;right:48px}.landing-footer span:nth-child(2){display:inline}.login-card{right:9vw;top:12%}
  .topbar { height: 84px; padding: 0 48px; }
  .home-screen { display: grid; grid-template-columns: minmax(220px,1fr) 520px minmax(220px,1fr); min-height: calc(100svh - 152px); padding: 54px 48px 0; }
  .intro-copy { align-self: start; margin: 60px 0 0; max-width: 320px; text-align: left; }
  .eyebrow { justify-content: flex-start; }.intro-copy > p:last-child { margin-left: 0; }.intro-copy h1 { font-size: 48px; }
  .monster-stage { height: 500px; margin-top: 0; width: 100%; }.monster { top: 59px; transform: translateX(-50%) scale(1.22); }.thought-orbit.orbit-one { left: 12px; top: 88px; }.thought-orbit.orbit-two { right: 10px; top: 168px; }.scribble-left { bottom: 110px; }.monster-note { bottom: 62px; }
  .today-card { align-self: center; background: rgba(251,249,243,.6); border: 1px solid var(--line); border-radius: 22px 22px 22px 8px; display: block; justify-self: end; margin-top: 40px; padding: 18px; transform: rotate(1deg); width: 236px; }
  .today-top { display: flex; font: 500 9px DM Mono; justify-content: space-between; margin-bottom: 14px; text-transform: uppercase; }.today-top span:last-child { color: var(--muted); }
  .mini-note { align-items: center; display: flex; gap: 10px; margin: 12px 0; }.mini-note i { border-radius: 50%; height: 28px; width: 28px; }.mini-note.coral i { background: #f3a493; }.mini-note.blue i { background: var(--blue); }.mini-note div { display: flex; flex-direction: column; min-width: 0; }.mini-note strong { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mini-note small { color: var(--muted); font: 400 8px DM Mono; margin-top: 2px; }
  .today-card button { background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 10px; font-weight: 700; margin-top: 6px; padding: 12px 0 0; text-align: left; width: 100%; }.today-card button span { float: right; }
  .capture-dock { bottom: 28px; left: 50%; right: auto; transform: translateX(-50%); width: 390px; }.micro-footer { bottom: 20px; }
  .belly-screen{min-height:calc(100svh - 84px);padding:48px 48px 80px}.belly-header h1{font-size:64px}.belly-toolbar{align-items:center;flex-direction:row;justify-content:space-between;margin-top:34px}.search-box{width:220px}.thought-grid{grid-template-columns:repeat(3,1fr)}.thought-card:nth-child(2n){transform:rotate(.3deg)}
}

@media(max-width:520px){.belly-header{align-items:flex-start}.belly-header>div>p:last-child{max-width:210px}.new-thought{border-radius:50%;font-size:0;height:42px;padding:0;place-content:center;width:42px}.new-thought span{font-size:22px}.landing-footer span:last-child{display:none}}

@media (max-height: 700px) and (max-width: 899px) {
  .home-screen { padding-top: 10px; }.monster-stage { height: 330px; transform: scale(.9); transform-origin: top center; }.intro-copy > p:last-child { display: none; }
}