/* The public canvas uses the same ink, paper and speckled space vocabulary as the journal. */
.welcome-page,.welcome-page .welcome-shell{background:#050505!important;color:#f5f5f2;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
.welcome-page .welcome-shell{background-image:radial-gradient(#fff8 .7px,transparent 1px)!important;background-size:73px 81px;overflow:hidden}
.welcome-page p,.public-section p:not(.eyebrow),.product-intro>p:last-child{color:#bdbdbb}
.welcome-page .eyebrow,.invite-note,.mascot-label,.welcome-footer span,.welcome-footer small{color:#a8a8a6!important}
.welcome-nav{background:#050505ef;border-bottom:1px solid #fff3}.wordmark{font-size:24px;letter-spacing:-.085em}.wordmark-star{font-size:12px;letter-spacing:0;margin-left:1px;align-self:flex-start;line-height:1.5}
.welcome-nav nav a,.nav-signin{color:#d3d3d0}.welcome-nav nav a:hover,.nav-signin:hover{color:#fff}
.welcome-page :is(button,a,input,summary):focus-visible{outline:2px solid #fff;outline-offset:5px}
.block-action,.nav-invite,.primary-cta,.closing-cta button,.signin-main form button{background:#f6f6f3!important;color:#090909!important;border:1px solid #fff!important;border-radius:1px!important;box-shadow:4px 4px 0 #646464!important}
.block-action:hover,.nav-invite:hover,.primary-cta:hover,.closing-cta button:hover,.signin-main form button:hover,.block-action:focus-visible{background-color:#090909!important;color:#fff!important;box-shadow:3px 3px 0 #fff!important;background-image:radial-gradient(circle at 18% 25%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 72%,#fff 0 1px,transparent 2px),radial-gradient(circle at 85% 20%,#fff 0 1px,transparent 2px)!important}
.welcome-hero{grid-template-columns:minmax(0,1fr) minmax(350px,.9fr);gap:42px;max-width:1300px}.hero-copy{max-width:650px}.welcome-hero h1{color:#f8f8f5;letter-spacing:-.068em}.welcome-hero h1 span{color:#fff}.hero-intro{color:#d0d0ce}.quiet-link{color:#eee!important}
.hero-scene{height:520px;display:block;position:relative;isolation:isolate}.hero-scene:before,.hero-scene:after,.orbit{display:none!important}
.hero-preview{position:absolute;top:26px;right:55px;width:min(84%,440px);height:416px;background:#080808;border:1px solid #f4f4ef;box-shadow:15px 15px 0 #242424,0 32px 55px #000c;transform:rotate(2deg);overflow:visible}
/* The colour stays in a two-pixel contour, never on a panel fill. */
.hero-preview:before,.demo-stage:before,.collection-preview:before{content:"";position:absolute;inset:-3px;padding:2px;pointer-events:none;background:conic-gradient(from var(--rim-turn,0deg),#7ae5f4,#f5f5f5 16%,#f48cc3 32%,#f5f5f5 47%,#f8d783 62%,#f5f5f5 78%,#8cecc8 91%,#7ae5f4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:brainzz-rim-turn 9s linear infinite;opacity:.78}
@property --rim-turn{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes brainzz-rim-turn{to{--rim-turn:360deg}}
.hero-preview-top{height:52px;border-bottom:1px solid #fff5;padding:0 23px;display:flex;align-items:center;justify-content:space-between;color:#aaa;font-size:10px;font-weight:750;letter-spacing:.12em}.hero-preview-top span:first-child{color:#fff}.hero-preview-body{padding:65px 34px 25px}.hero-preview-body>span,.hero-preview-body small{font-size:10px;letter-spacing:.16em;color:#aaa}.hero-preview-body h2{font-size:clamp(35px,3.5vw,53px);line-height:1.06;letter-spacing:-.055em;margin:21px 0 14px;color:#fff}.hero-preview-body p{font-size:17px;color:#e4e4e2}.hero-preview-line{height:1px;background:#fff5;margin:64px 0 16px}
.hero-mascot{position:absolute;width:235px;bottom:-9px;left:-40px;filter:drop-shadow(0 15px 12px #000b);animation:mascot-float 7s ease-in-out infinite}.mascot-label{position:absolute;right:13px;bottom:1px;max-width:300px;text-align:right;letter-spacing:.12em}.mascot-label span{color:#fff}
@keyframes mascot-float{50%{transform:translateY(-8px)}}
.product-intro,.walkthrough,.public-section,.faq-section{background:#050505!important;border-top:1px solid #fff3}.product-intro h2,.walkthrough h2,.public-section h2,.faq-section h2,.closing-cta h2{color:#fff}.walkthrough{background:#080808!important}.walkthrough-heading>p{color:#c9c9c6}
.demo-stage{position:relative;background:#080808;border-color:#fff6;box-shadow:0 24px 60px #000a}.demo-stage:before{opacity:.46}.demo-tabs{border-bottom-color:#fff4}.demo-tabs button{color:#c0c0bd;border-right-color:#fff4}.demo-tabs button[aria-selected="true"]{background:#f3f3ef;color:#080808}.demo-tabs button:hover:not([aria-selected="true"]){background:#222}.demo-window{background:#050505;border-color:#fff5}.demo-window-bar{border-color:#fff4;color:#aaa}.demo-dots{color:#fff}.demo-side{background:#0b0b0b;border-color:#fff4;color:#aaa}.demo-writing>span,.demo-board-head span,.demo-writing-meta{color:#bdbdbb}.demo-cursor{background:#fff}.demo-writing-meta{border-color:#fff4}.demo-writing-meta span{color:#fff}
.demo-board-grid>div{background:#0d0d0d;border-color:#fff5}.demo-board-grid b,.demo-board-grid span{color:#fff}.demo-moon{background:radial-gradient(circle at 34% 28%,#fff,#aaa 47%,#444 68%);box-shadow:0 0 25px #fff5}
.walkthrough-note p,.walkthrough-note span{color:#ddd}.template-preview,.collection-preview{position:relative;background:#090909!important;border-color:#fff5;color:#fff;box-shadow:0 15px 35px #000a}.template-preview p{border-top-color:#fff4!important;color:#ccc!important}.collection-preview small{color:#aaa}.landing-badge{background:#080808;border-color:#fff5}.privacy-section{background:#090909!important}.faq-section details{border-color:#fff4}.faq-section details p{color:#bbb}
.closing-cta{position:relative;background:#050505;border-color:#fff3;overflow:hidden}.closing-cta>img{width:140px;margin-bottom:8px;filter:grayscale(1)}.closing-cta:before{content:"";position:absolute;left:calc(50% - 170px);top:24px;width:340px;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent)}.closing-cta p{color:#ccc}.closing-cta a{color:#080808!important}
.welcome-footer{background:#050505;border-color:#fff3}.welcome-footer a{color:#ddd}.welcome-footer strong{color:#fff}.welcome-footer small{border-color:#fff3}
.signin-dialog{background:#080808;border-color:#fff7;border-radius:2px}.signin-dialog::backdrop{background:#000d}.signin-side{background:#111}.signin-side p,.signin-main .eyebrow,.signin-footnote{color:#bbb}.signin-main form input{background:#050505;border-color:#fff5;border-radius:2px}.signin-side img{filter:grayscale(1)}.signin-links a{color:#e7e7e5}
@media(max-width:1000px){.welcome-hero{grid-template-columns:1fr;gap:20px}.hero-scene{height:400px;width:min(550px,100%);margin:auto}.hero-preview{right:8%;height:345px}.hero-preview-body{padding-top:45px}.hero-preview-line{margin-top:35px}.hero-mascot{width:190px}}
@media(max-width:700px){.welcome-hero{padding:65px 22px 75px}.hero-scene{height:310px;width:100%;max-width:430px}.hero-preview{top:10px;right:8px;width:85%;height:270px;box-shadow:8px 8px 0 #242424}.hero-preview-top{height:35px;padding:0 10px;font-size:8px}.hero-preview-body{padding:31px 19px}.hero-preview-body h2{font-size:32px;margin:15px 0 10px}.hero-preview-body p{font-size:13px}.hero-preview-line{margin:25px 0 8px}.hero-preview-body>span,.hero-preview-body small{font-size:8px}.hero-mascot{width:130px;left:-8px;bottom:9px}.mascot-label{font-size:8px;bottom:0;right:6px;max-width:240px}.closing-cta>img{width:100px}}
@media(prefers-reduced-motion:reduce){.hero-preview:before,.demo-stage:before,.collection-preview:before,.hero-mascot{animation:none!important}}
/* Pip has a reserved grid row, including the full motion envelope. */
.hero-scene{height:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 160px;gap:24px;align-items:start;width:100%;max-width:480px;margin:auto;overflow:visible}
.hero-preview{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:340px;box-sizing:border-box;transform:none;box-shadow:8px 8px 0 #242424}
.hero-preview-body{padding:48px 30px 28px}.hero-preview-body h2{font-size:clamp(32px,3vw,48px)}.hero-preview-line{margin:40px 0 0}.hero-mascot{position:relative!important;inset:auto!important;grid-row:2;justify-self:end;align-self:end;width:145px!important;height:160px;object-fit:contain;filter:none;animation:mascot-float 7s ease-in-out infinite}
.hero-preview-top{font-size:12px;letter-spacing:.025em}.invite-note,.signin-footnote{font-size:14px!important;line-height:1.55!important;color:#ddd!important}.welcome-footer small,.welcome-footer span,.welcome-footer strong{font-size:14px!important;letter-spacing:0!important;color:#ccc!important}.demo-window-bar{font-size:12px;letter-spacing:0}.demo-side span,.demo-side small,.demo-board-head span,.template-preview>span{font-size:13px;letter-spacing:.025em;color:#ddd}.demo-window-bar>span:last-child{display:none}
@media(max-width:700px){.hero-scene{grid-template-rows:auto 135px;gap:24px;max-width:430px}.hero-preview{min-height:280px}.hero-preview-top{font-size:11px;padding:0 14px}.hero-preview-body{padding:32px 22px}.hero-preview-body h2{font-size:35px}.hero-preview-body p{font-size:16px}.hero-mascot{width:123px!important;height:135px}.hero-preview-line{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.hero-mascot{animation:none!important}}
.dot-demo-canvas{min-height:440px;background:#080808;border:1px solid #777;position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:24px;padding:28px;align-items:center;background-image:radial-gradient(#fff7 .7px,transparent 1px);background-size:41px 47px}.dot-demo-canvas>button{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #fff;padding:0;justify-self:center;cursor:pointer}.dot-demo-canvas>button[data-motion="breathe"]{animation:dot-demo-breathe 3s ease-in-out infinite}.dot-demo-canvas>button[data-motion="halo"]{box-shadow:0 0 0 10px #fff2}#dot-demo-menu{visibility:hidden;background:#101010;border:1px solid #aaa;padding:22px;display:grid;gap:16px}#dot-demo-menu.is-open{visibility:visible}#dot-demo-menu h3{font-size:23px;margin:0}#dot-demo-menu label{display:grid;gap:7px;color:#fff;font-size:14px}#dot-demo-menu :is(input,select){min-width:0;width:100%;background:#050505;color:#fff;border:1px solid #888;padding:10px;font:inherit}#dot-demo-menu button{min-height:44px;margin:4px 0 0;padding:10px}#dot-demo-play{margin-top:20px;min-height:44px;padding:12px 18px}@keyframes dot-demo-breathe{50%{transform:scale(.78);opacity:.6}}@media(max-width:700px){.dot-demo-canvas{grid-template-columns:40px minmax(0,1fr);padding:18px;gap:12px;min-height:420px}#dot-demo-menu{padding:16px}}@media(prefers-reduced-motion:reduce){.dot-demo-canvas>button{animation:none!important}}
.actual-dot-demo{display:block;width:100%;height:455px;min-width:0;border:1px solid #777;background:#050505}@media(max-width:700px){.actual-dot-demo{height:650px}}
/* Portrait is rigid; hair never moves independently or bobs above the face. */
.hero-mascot{animation:none!important;transform:none!important}
/* Fluid section rails; text measure is controlled inside each section. */
.welcome-page{--site-edge:clamp(18px,3vw,64px)}.welcome-page .welcome-shell,.welcome-page main{width:100%;max-width:none;box-sizing:border-box}.welcome-page :is(.welcome-nav,.welcome-hero,.product-intro,.walkthrough,.public-section,.faq-section,.closing-cta,.welcome-footer){width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:var(--site-edge);padding-right:var(--site-edge);box-sizing:border-box}.welcome-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,100px)}.hero-copy{max-width:760px}.hero-scene{max-width:none!important}.hero-preview{max-width:none}.public-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,120px)}.public-section>div{min-width:0}.walkthrough-heading>p{max-width:38ch}.product-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,120px);align-items:center}.product-intro h2{max-width:15ch}.product-intro>p:last-child{max-width:60ch}.faq-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:clamp(30px,6vw,120px)}.faq-section>h2{grid-column:1;grid-row:1/5;align-self:start;margin-top:18px}.faq-section>details{grid-column:2;min-width:0}.faq-section summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px}.faq-section summary::-webkit-details-marker{display:none}.faq-section summary::marker{content:''}.faq-section summary::after{content:'+';font-weight:400;font-size:25px;line-height:1;flex:none}.faq-section details[open]>summary::after{content:'−'}.faq-section details p{max-width:65ch;font-size:16px}.welcome-footer{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.welcome-footer .footer-columns{min-width:0}.actual-dot-demo{box-sizing:border-box}
@media(max-width:1000px){.welcome-hero{grid-template-columns:1fr}.hero-copy{max-width:760px}.hero-scene{width:100%;max-width:none!important}.hero-preview{min-height:300px}.public-section{gap:35px}}
@media(max-width:700px){.product-intro,.public-section,.faq-section{display:block}.product-intro>p:last-child{margin-top:24px}.public-section>div+div,.actual-dot-demo{margin-top:30px}.faq-section>h2{margin-bottom:30px}.faq-section summary{font-size:17px}.welcome-footer{display:block}.welcome-nav{gap:16px}.hero-actions>*{max-width:100%;box-sizing:border-box}.hero-preview-top{flex-wrap:wrap;height:auto;min-height:42px;gap:8px}.closing-cta h2{overflow-wrap:anywhere}.welcome-footer .footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.welcome-footer a,.welcome-footer span{overflow-wrap:anywhere}}
.actual-dot-demo{height:auto!important;min-height:0;overflow:visible!important}
