/* Chii’s small pastel playground. Motion is intentional and can be paused. */
.promotion-page { --pink:#f5c9d3; --lavender:#dfd5ef; --mint:#d7e9dd; --butter:#fae6b4; --room:#f3d9dd; --room-floor:#f9e6df; background:var(--background); transition:background-color .3s; }
.promotion-page[data-theme="lavender"] { --background:#f5f0fb; --surface:#fffaff; --room:#e6ddf3; --room-floor:#eee6f5; --pink:#e5d5f1; --accent:#79528d; }
.promotion-page[data-theme="mint"] { --background:#f1f8ee; --surface:#fbfff8; --room:#dbead9; --room-floor:#e8f0de; --pink:#cce4d5; --accent:#4d775b; }
.promotion-page button { color:var(--text); font-family:inherit; }
.promotion-page button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.promotion-page .site-header { border-color:transparent; }
.promotion-page .header-inner { min-height:82px; }
.promotion-page .site-nav a { font-size:14px; font-weight:500; }
.promotion-page .draft-note { background:var(--surface); border-color:var(--line); font-size:12px; }
.hello-section { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:36px; padding-block:56px 64px; }
.hello-copy { padding-bottom:20px; }
.handwritten { font-size:20px; font-weight:500; letter-spacing:-.5px; color:var(--accent); transform:rotate(-3deg); margin:0 0 16px; }
.hello-copy h1 { font-size:clamp(52px,5.7vw,76px); line-height:1.04; letter-spacing:-2.5px; margin:0 0 24px; }
.hello-copy h1 em { font-style:normal; position:relative; display:inline-block; }
.hello-copy h1 em::after { content:""; position:absolute; z-index:-1; width:107%; height:15px; border-radius:50%; background:var(--pink); left:-3%; bottom:0; transform:rotate(-3deg); }
.hello-copy > p:not(.handwritten) { max-width:35ch; color:var(--secondary); font-size:18px; }
.primary-link { background:var(--text); color:var(--background); border-color:var(--text); font-size:15px; border-radius:12px; padding:13px 22px; box-shadow:0 4px 0 #d7b6be; transition:transform .25s cubic-bezier(.2,1.5,.5,1),box-shadow .2s; }
.primary-link:hover { background:var(--text); color:var(--background); transform:translateY(-3px) rotate(-1deg); box-shadow:0 7px 0 #d7b6be; }
.primary-link span { display:inline-block; margin-left:18px; }
.hello-copy .coming-soon { font-size:12px!important; margin:18px 0 28px; }
.color-picker { display:flex; gap:9px; align-items:center; font-size:12px; color:var(--secondary); }
.color-picker > span { margin-right:7px; }
.color-choice { width:24px; height:24px; border:3px solid var(--surface); border-radius:50%; cursor:pointer; transition:transform .2s cubic-bezier(.2,1.5,.5,1); box-shadow:0 0 0 1px var(--line); }
.color-choice:hover { transform:translateY(-3px) scale(1.12); }
.color-choice[aria-pressed="true"] { box-shadow:0 0 0 2px var(--text); }
.color-choice.strawberry { background:#efb8c7; }.color-choice.lavender { background:#cdbce7; }.color-choice.mint { background:#bbd9c3; }
.playground-wrap { min-width:0; scroll-margin-top:20px; }
.playground-toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:0 12px 12px; font-size:12px; color:var(--secondary); }
.play-label { font-weight:500; }
.motion-control { background:transparent; border:0; padding:4px; text-decoration:underline; text-underline-offset:3px; font-size:11px; cursor:pointer; color:var(--secondary)!important; }
.playground { position:relative; display:flex; flex-direction:column; background:var(--room); border-radius:20px; overflow:clip; box-shadow:0 6px 0 #dec6c5; isolation:isolate; padding-bottom:13px; }
.playground::after { content:""; position:absolute; z-index:-1; inset:55% -15% -25%; border-radius:50% 50% 0 0; background:var(--room-floor); }
.native-stage { position:relative; order:-1; width:calc(100% - 32px); margin:0 16px; aspect-ratio:1160/220; flex:none; }
.native-pet-art { position:absolute; top:0; left:0; display:block; width:100%; height:auto; aspect-ratio:1160/320; object-fit:contain; pointer-events:none; }
.pet-hit-target { position:absolute; top:0; left:12%; width:76%; height:35%; min-height:38px; background:transparent; border:0; cursor:pointer; border-radius:0 0 16px 16px; }
.pet-hint { position:absolute; right:4%; bottom:-24px; color:var(--accent); font-size:12px; font-weight:500; transform:rotate(6deg); opacity:0; transition:opacity .2s; }
.pet-hit-target:hover .pet-hint,.pet-hit-target:focus-visible .pet-hint { opacity:1; }
.pet-message { position:relative; z-index:2; align-self:center; padding:10px 16px; margin:0 14px 12px; background:#fffaf2; border-radius:15px 15px 15px 4px; box-shadow:0 3px 0 #dcbcc5; max-width:88%; width:max-content; font-size:14px; font-weight:500; text-align:center; pointer-events:none; transform:rotate(-1deg); }
.pet-message::before { content:""; position:absolute; width:10px; height:10px; background:inherit; top:-4px; left:28px; transform:rotate(45deg); }
.playground-instruction { position:relative; text-align:center; font-size:12px; color:var(--secondary); padding:0 20px; margin:2px 0 12px; }
.gift-tray { position:relative; display:flex; justify-content:space-around; align-items:end; gap:6px; margin:0 14px 7px; z-index:3; }
.gift-button { display:flex; align-items:center; flex-direction:column; gap:8px; width:88px; min-height:88px; background:transparent; border:0; padding:5px; font-size:12px; font-weight:500; cursor:grab; border-radius:12px; }
.gift-button:active { cursor:grabbing; }.gift-button:hover .gift-art,.gift-button:focus-visible .gift-art { transform:translateY(-5px) rotate(-5deg); }
.gift-art { width:48px; height:44px; position:relative; display:block; transition:transform .3s cubic-bezier(.2,1.5,.5,1); }
.pillow-art { border-radius:12px; background:#c6dccc; color:#5c7a65; border:2px solid #acc9b5; box-shadow:0 4px 0 #c1d1bd; height:33px; margin-top:7px; font-size:17px; font-weight:600; text-align:center; transform:rotate(-8deg); }
.pillow-art span { font-size:23px; margin-left:3px; }
.wave-art { font-size:43px; line-height:1; color:#c18c56; transform:rotate(10deg); filter:drop-shadow(0 4px #e3c7a4); }
.drag-hint { position:relative; padding:0 14px; margin:0; text-align:center; font-size:12px; color:var(--secondary); }
.preview-note { text-align:center; font-size:12px; color:var(--secondary); margin:13px 10px 0; }
.room-star { position:absolute; color:#bd9c5c; pointer-events:none; animation:star-drift 4s ease-in-out infinite; }
.star-one { top:31%;left:5%;font-size:17px;transform:rotate(12deg); }.star-two { top:26%;right:5%;font-size:24px;animation-delay:-1.4s; }.star-three { display:none; }
.playground.is-dragging { outline:3px dashed var(--accent); outline-offset:-7px; }
.joy-effects { display:none; }
.little-moments,.product-story,.gentle-space,.before-you-meet { padding-block:52px; border-top:1px solid var(--line); }
.little-moments { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:48px; }
.section-intro { max-width:42ch; }.section-intro h2 { font-size:clamp(30px,3.6vw,43px); letter-spacing:-1.1px; line-height:1.12; margin:0 0 18px; }.section-intro > p:not(.handwritten) { color:var(--secondary); }
.real-moments { display:grid; grid-template-columns:1fr; gap:15px; min-width:0; }
.real-moment { padding:0; border:0; display:block; width:100%; background:var(--surface); border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:0 4px 0 #dfcdce; }
.moment-art { display:block; background:#21282e; }.moment-art img { width:100%;height:auto;display:block; }.real-moment > span:last-child { padding:13px 18px; display:flex; justify-content:space-between; font-weight:500; font-size:14px; }.real-moment-options { display:flex; flex-wrap:wrap;gap:6px;justify-content:center; }.real-moment-options button { border:1px solid var(--line); border-radius:8px;background:var(--surface);padding:6px 10px;font-size:12px;cursor:pointer; }.real-moment-options button[aria-pressed="true"] { border-color:var(--accent);background:var(--pink); }.real-moment-options p { width:100%;font-size:10px;text-align:center;color:var(--secondary);margin:3px 0 0; }
.product-story > .section-intro { margin-bottom:28px; }
.helper-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch; }.helper-note { padding:25px 23px; border-radius:18px;position:relative; }.talk-note { background:var(--pink); }.reminder-note { background:var(--lavender); }.focus-note { background:var(--mint); }.helper-symbol { font-size:44px;line-height:1;font-weight:500;display:block;margin-bottom:18px; }.helper-note h3 { font-size:22px;line-height:1.15;letter-spacing:-.5px; }.helper-note p { font-size:14px;line-height:1.6; }.helper-note a { font-size:12px;font-weight:600;color:var(--text); }.focus-demo { display:flex;flex-wrap:wrap;gap:8px;align-items:center; }.focus-countdown { display:block;width:100%;font-size:34px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1px; }.focus-demo button { font-size:11px;border:1px solid #9db7a4;background:#ffffff9c;border-radius:7px;padding:7px 9px;cursor:pointer; }.helper-note .demo-note { font-size:10px;margin-top:10px; }
.native-look { margin-top:28px;border-top:1px solid var(--line); }.native-look > summary { display:flex;justify-content:space-between; }.native-previews { display:flex;align-items:start;justify-content:center;gap:32px;padding-block:20px; }.native-previews figure { width:360px;max-width:45%;margin:0; }.native-previews img { border-radius:12px; }.native-previews figcaption { font-size:10px;text-align:center;margin-top:12px; }
.gentle-space { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px; }.gentle-space h2 { font-size:40px;letter-spacing:-1px;line-height:1.13; }.large-flower { color:#c8a4bd;font-size:54px;display:inline-block;animation:flower-turn 12s ease-in-out infinite; }.gentle-space > div:last-child { color:var(--secondary); }.gentle-space a { font-size:14px; }
.before-you-meet .section-intro { max-width:none; }.home-faq { max-width:800px; }.last-hello { display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:42px; }.last-hello > p { font-size:42px;letter-spacing:-1.2px;margin:0; }
.promotion-page.motion-paused *, .promotion-page.reduced-motion * { animation-play-state:paused!important; }
.promotion-page.motion-paused .gift-art,.promotion-page.reduced-motion .gift-art { transition:none; }
@keyframes star-drift { 0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -5px;rotate:9deg} }
@keyframes flower-turn { 0%,100%{rotate:-10deg}50%{rotate:12deg} }
@media(max-width:900px){.hello-section{gap:22px;grid-template-columns:.8fr 1.2fr}.hello-copy h1{font-size:56px}.hello-copy>p:not(.handwritten){font-size:16px}.pet-message{font-size:12px}.helper-grid{gap:12px}.helper-note{padding:22px 18px}.helper-note h3{font-size:20px}}
@media(max-width:700px){.hello-section{grid-template-columns:1fr;padding-block:24px 40px;gap:20px}.hello-copy{padding-bottom:0;display:grid;grid-template-columns:1fr}.hello-copy>.handwritten,.hello-copy>.primary-link{display:none}.hello-copy h1{font-size:48px;max-width:12ch;margin-bottom:16px}.hello-copy>p:not(.handwritten){max-width:38ch;font-size:16px;line-height:1.5;margin-bottom:13px}.hello-copy .coming-soon{margin:2px 0 13px!important}.color-picker{margin-top:0}.playground,.playground-wrap{max-width:580px;width:100%;margin-inline:auto}.pet-message{font-size:13px}.little-moments{grid-template-columns:1fr;gap:20px}.section-intro h2{font-size:34px}.little-moments,.product-story,.gentle-space,.before-you-meet{padding-block:38px}.real-moments{max-width:520px}.helper-grid{grid-template-columns:1fr;gap:16px}.helper-note{padding:24px}.helper-symbol{float:right;margin:0 0 10px 20px}.helper-note h3{font-size:24px;max-width:17ch}.helper-note p{font-size:15px;max-width:46ch}.focus-countdown{width:auto;margin-right:10px;font-size:32px}.gentle-space{grid-template-columns:1fr;gap:8px}.gentle-space h2{font-size:35px}.large-flower{float:right}.last-hello>p{font-size:32px}.native-previews{gap:16px}.last-hello{flex-wrap:wrap;gap:18px}}
@media(max-width:420px){.promotion-page .header-inner{min-height:62px}.promotion-page .site-nav{gap:10px 17px}.promotion-page .site-nav a{font-size:12px}.hello-section{padding-top:20px}.hello-copy h1{font-size:46px;line-height:1.03;margin-bottom:12px}.hello-copy>p:not(.handwritten){font-size:15px}.playground{border-radius:16px}.playground-toolbar{padding:0 3px 5px}.play-label,.motion-control{font-size:11px}.pet-message{font-size:12px;padding:8px 12px;margin-bottom:10px}.playground-instruction{font-size:12px;padding:0 15px;margin-bottom:10px}.gift-tray{gap:0;margin-inline:6px}.gift-button{width:25%;font-size:12px;padding:2px;gap:6px;min-height:84px}.gift-art{scale:.85}.drag-hint{font-size:11px}.preview-note{font-size:11px}.room-star{scale:.75}.native-previews{flex-direction:column;align-items:center}.native-previews figure{max-width:100%;width:320px}}
@media(prefers-reduced-motion:reduce){.promotion-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.gift-button:hover .gift-art,.gift-button:focus-visible .gift-art,.color-choice:hover,.primary-link:hover{transform:none}}
@media print{.playground-wrap,.color-picker,.focus-demo,.real-moment-options,.motion-control{display:none}.hello-section,.little-moments,.helper-grid,.gentle-space{display:block}.hello-copy h1{font-size:40px}.helper-note{break-inside:avoid}.primary-link{box-shadow:none}}
.playground-toolbar,.play-label,.motion-control { font-size:12px; }.motion-control { min-height:40px;padding:8px 3px; }
.preview-note,.real-moment-options p,.native-previews figcaption,.helper-note .demo-note { font-size:12px; }
.focus-demo button,.color-picker { font-size:12px; }.focus-demo button{min-height:40px}
.color-choice{width:30px;height:30px;margin:5px}

/* Everyday functions use one small, hands-on example at a time. */
.product-story > .section-intro { max-width:650px; }
.feature-showcase { border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:clip; }
.feature-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.feature-tabs button { position:relative; border:0; border-radius:0; background:transparent; padding:18px 12px; min-height:56px; font-size:16px; font-weight:600; cursor:pointer; color:var(--secondary); }
.feature-tabs button:hover { background:var(--background); color:var(--text); }
.feature-tabs button[aria-selected="true"] { color:var(--text); background:var(--pink); }
.feature-tabs button[aria-selected="true"]::after { content:""; position:absolute; width:24px; height:3px; border-radius:2px; background:var(--text); bottom:0; left:calc(50% - 12px); }
.sample-disclaimer { font-size:12px; color:var(--secondary); padding:15px 24px 0; margin:0; }
.feature-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:center; padding:24px; }
.feature-copy h3 { margin:0 0 16px; font-size:30px; line-height:1.12; letter-spacing:-.7px; }
.feature-copy p { font-size:15px; line-height:1.65; color:var(--secondary); max-width:38ch; margin:0 0 16px; }
.feature-copy a { font-size:14px; font-weight:600; }
.sample-window { min-width:0; color:#faf4f4; background:#171519; border-radius:14px; overflow:clip; }
.sample-chii { display:block; width:100%; height:clamp(60px,7vw,90px); object-fit:cover; object-position:top; pointer-events:none; }
.sample-window-body { padding:22px 24px; }
.sample-window-label { color:#b7abb4; font-size:12px; margin-bottom:18px; }
.sample-window p { color:inherit; }
.sample-window button,.sample-window select,.sample-window input { font-family:inherit; color:#faf4f4; }
.sample-window button { min-height:40px; background:#302a30; border:1px solid #50434f; border-radius:8px; padding:9px 13px; font-size:13px; cursor:pointer; }
.sample-window button:hover { background:#413641; border-color:#a88c9d; }
.sample-window .sample-primary { background:#f5d8e3; border-color:#f5d8e3; color:#402f3a; font-weight:600; }
.sample-window .sample-primary:hover { background:#ffeaf0; border-color:#ffeaf0; }
.sample-window .sample-footnote { color:#c3b6c0; font-size:12px; line-height:1.5; margin:18px 0 0; }
.sample-prompts { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 20px; }
.talk-invitation { font-size:21px; font-weight:500; line-height:1.2; margin:0 0 15px; }
.sample-conversation { border-top:1px solid #3b323b; padding-top:17px; }
.sample-conversation span { display:block; font-size:11px; color:#baa8b7; margin-bottom:5px; }
.sample-conversation p { font-size:14px; line-height:1.6; margin:0; }
.sample-you { margin:0 0 17px auto; width:max-content; max-width:90%; padding:10px 13px; border-radius:9px 9px 2px 9px; background:#302831; }
.sample-chii-reply { max-width:44ch; }
.sample-prompts button[aria-pressed="true"] { border-color:#e0b6ca; background:#483342; }
.reminder-sample label { display:block; font-size:13px; color:#e8dbe4; margin:17px 0 8px; }
.reminder-sample input,.reminder-sample select { display:block; width:100%; max-width:100%; min-height:43px; border:1px solid #685261; background:#262027; border-radius:7px; padding:10px 12px; font-size:15px; }
.reminder-sample input:focus,.reminder-sample select:focus { outline:2px solid #e6bbcf; outline-offset:2px; }
.reminder-sample input[aria-invalid="true"] { border-color:#f3b0a4; }
.sample-window .sample-field-hint { color:#bbaaB7; font-size:12px; line-height:1.5; margin:8px 0 0; }
.sample-error { min-height:18px; color:#f4b6a8!important; font-size:12px; margin:9px 0; }
.sample-step { color:#c5b2c0!important; font-size:12px; margin:0 0 10px; }
.reminder-sample h4 { color:#faf4f4; font-size:23px; line-height:1.3; margin:0 0 20px; overflow-wrap:anywhere; }
.sample-details { margin:0 0 22px; font-size:14px; }.sample-details>div { display:flex;justify-content:space-between;gap:16px;margin:10px 0; }.sample-details dt{color:#bba9b7}.sample-details dd{margin:0;text-align:right;}
.sample-actions { display:flex;flex-wrap:wrap;gap:8px; }
.sample-success { color:#c0dec5!important; font-size:14px; font-weight:600; margin:0 0 17px; }
.sample-task { font-size:23px; line-height:1.35; margin:0 0 9px; overflow-wrap:anywhere; }
.sample-task.is-complete { text-decoration:line-through; color:#bba9b7; }
#sample-reminder-saved-time { color:#baa8b7; font-size:13px; margin:0 0 22px; }
.focus-sample .focus-demo { justify-content:flex-start;gap:9px; }.focus-sample .focus-countdown { width:100%; font-size:62px;line-height:1.2;margin:0 0 16px;letter-spacing:-2px; }.focus-sample .focus-demo button { font-size:13px; }
.music-art-stage { aspect-ratio:1160/230; overflow:clip; position:relative; }.music-art-stage img { position:absolute;display:block;width:100%;height:auto;top:0;left:0;pointer-events:none; }
.sample-track-name { font-size:23px; line-height:1.3; font-weight:500; margin:0 0 7px; }
.sample-track-byline { color:#c3b3bf!important; font-size:12px; margin:0 0 20px; }
.music-demo-transport { display:flex;align-items:center;gap:9px; }.music-demo-transport button:first-child,.music-demo-transport button:last-child { font-size:26px;line-height:1;width:43px;padding:3px 8px; }
.music-demo-instruments { display:flex;gap:7px;margin-top:17px; }.music-demo-instruments button[aria-pressed="true"] { border-color:#e0b6ca;background:#483342; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
@media(max-width:900px){.feature-layout{gap:22px;padding:22px}.feature-copy h3{font-size:27px}.sample-window-body{padding:20px}.feature-copy p{font-size:14px}}
@media(max-width:700px){.feature-layout{grid-template-columns:1fr;gap:20px}.feature-copy h3{font-size:28px}.feature-copy p{max-width:54ch}.feature-copy p:last-of-type{margin-bottom:10px}.feature-tabs button{font-size:14px;padding:15px 6px;min-height:50px}.sample-disclaimer{padding:15px 20px 0}.sample-chii{height:76px}.sample-window{max-width:520px;width:100%;margin-inline:auto}.feature-copy h3 br{display:none}}
@media(max-width:420px){.feature-layout{padding:19px 14px;gap:18px}.sample-disclaimer{padding:13px 14px 0;font-size:11px}.feature-tabs button{font-size:13px;padding-inline:2px}.sample-window-body{padding:18px 16px}.sample-prompts button{font-size:12px;padding:8px 10px}.feature-copy h3{font-size:26px}.feature-copy p{font-size:14px}.sample-window .sample-footnote{font-size:11px}.sample-chii{height:60px}.focus-sample .focus-countdown{font-size:54px}.sample-details>div{gap:10px}.sample-details{font-size:13px}}
@media(max-width:420px){.feature-tabs{grid-template-columns:.8fr 1.2fr 1fr 1fr}}

/* A contextual device view uses the real Chii renders over a fictional desk. */
.hello-section { display:block; padding-block:38px 48px; }
.hello-section .hello-copy { display:grid; grid-template-columns:1.05fr .95fr; column-gap:64px; align-items:center; padding-bottom:24px; }
.hello-section .hello-copy .handwritten { display:block; grid-column:1; grid-row:1; margin-bottom:12px; }
.hello-section .hello-copy h1 { grid-column:1; grid-row:2/5; font-size:64px; max-width:12ch; margin:0; }
.hello-section .hello-copy>p:not(.handwritten):not(.coming-soon) { grid-column:2; grid-row:2; margin:0 0 18px; }
.hello-section .hello-copy>.primary-link { display:inline-flex; grid-column:2; grid-row:3; justify-self:start; align-items:center; }
.hello-section .hello-copy .coming-soon { grid-column:2; grid-row:4; margin:14px 0 0!important; }
.hello-section .color-picker { grid-column:1/-1; justify-content:center; margin:22px 0 0; }
.hello-section .playground-wrap { max-width:none; width:100%; }
.hello-section .playground { display:block; padding:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible; }
.hello-section .playground::after { display:none; }
.hello-section .playground-toolbar { max-width:924px; margin-inline:auto; padding:0 0 12px; }
.macbook { width:100%; max-width:980px; padding:0 28px; margin-inline:auto; }
.macbook-display { position:relative; padding:10px 10px 17px; border:1px solid #737278; border-radius:20px 20px 12px 12px; background:#16151a; box-shadow:inset 0 0 0 1px #3a393e,0 10px 25px #49323f20; }
.mac-screen { position:relative; aspect-ratio:16/10; overflow:clip; border-radius:10px 10px 3px 3px; background:var(--room); isolation:isolate; }
.mac-screen::before { content:""; position:absolute; z-index:-1; width:115%;height:110%;left:-26%;top:35%;border-radius:50%;background:var(--room-floor);transform:rotate(-16deg); }
.mac-screen::after { content:""; position:absolute; z-index:-1; width:70%;height:90%;right:-32%;top:-30%;border-radius:50%;background:var(--lavender);opacity:.6; }
.mac-menubar { position:absolute; inset:0 0 auto; height:4.2%; min-height:20px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; color:#45323f; background:#ffffff50; font-size:clamp(7px,.9vw,11px); }
.mac-menu-left,.mac-menu-right { display:flex; align-items:center; gap:12px; }.mac-menu-left b{font-weight:650}.mac-menu-right{gap:10px}.mac-wifi{font-size:15px;line-height:1;transform:rotate(-45deg)}
.mac-battery { display:inline-block; width:17px; height:8px; border:1px solid currentColor; border-radius:2px; position:relative; }.mac-battery::before{content:"";position:absolute;inset:1px;background:currentColor}.mac-battery::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:3px;background:currentColor}
.mac-desktop { position:absolute; inset:0; pointer-events:none; }
.mac-work-window { position:absolute; top:18%; left:11%; width:70%; height:65%; border-radius:8px; overflow:hidden; background:#fffdf8; border:1px solid #aa8a9b70; box-shadow:0 8px 20px #47303d1c; }
.mac-window-titlebar { display:flex; align-items:center; justify-content:space-between; height:8%; min-height:23px; padding:0 12px; background:#f0e9e8; border-bottom:1px solid #e1d5d7; color:#725c69; font-size:clamp(7px,1vw,12px); }
.mac-traffic { display:flex; gap:5px; }.mac-traffic i{display:block;width:7px;height:7px;border-radius:50%;background:#d88f94}.mac-traffic i:nth-child(2){background:#dfbf7d}.mac-traffic i:nth-child(3){background:#98b99a}
.mac-work-content { display:flex; height:92%; }.mac-work-sidebar{display:flex;flex-direction:column;gap:13px;width:23%;padding:22px 10px;background:#f5eeee;font-size:clamp(7px,1vw,12px);color:#937f89}.mac-work-sidebar span{padding:6px 8px}.mac-sidebar-active{background:#e9d8df;border-radius:4px;color:#5d4353}
.mac-work-page{padding:6% 8%;flex:1;min-width:0}.mac-work-page p{margin:0;color:#4e3945}.mac-work-page .mac-page-overline{font-size:clamp(5px,.7vw,8px);letter-spacing:1.5px;color:#ac7b91;margin-bottom:13px}.mac-work-page .mac-page-title{font-size:clamp(15px,2.5vw,31px);font-weight:600;line-height:1.1;letter-spacing:-.8px;margin-bottom:13px}.mac-work-page .mac-page-copy{font-size:clamp(7px,1.05vw,12px);line-height:1.6;color:#8e7885;margin-bottom:20px}.mac-task-line{display:flex;gap:9px;align-items:center;color:#8c7382;font-size:clamp(6px,1vw,11px);margin:9px 0}.mac-task-line>span:first-child{color:#b18499;font-size:1.2em}.mac-task-line:first-of-type>span:last-child{text-decoration:line-through;color:#b9a6b0}
.mac-desktop-note{position:absolute;right:4%;bottom:14%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:clamp(6px,.9vw,10px);color:#987087;transform:rotate(7deg)}.mac-desktop-note>span:first-child{font-size:28px;color:#c0a16c}
.mac-dock { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:6px 9px; background:#fffaf5b5; border:1px solid #ffffffb0; border-radius:10px; box-shadow:0 2px 4px #6e4f6020; }
.mac-dock>span,.mac-dock>img{display:block;width:32px;height:32px;border-radius:7px;text-align:center;font-size:24px;line-height:31px}.mac-dock-note{background:#f5e7bf;color:#a07c4b}.mac-dock-music{background:#ebc1cf;color:#a15e7a}.mac-dock-pencil{background:#d5e4d5;color:#6f9176}
.mac-lid-name{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:5px;letter-spacing:1px;color:#67636a;line-height:8px}
.macbook-base { position:relative; width:calc(100% + 56px); left:-28px; height:19px; background:linear-gradient(#d7d5d9 0%,#eeecef 28%,#aaa7ae 72%,#7e7b82 100%); border-radius:2px 2px 50% 50%/2px 2px 65% 65%; box-shadow:0 8px 12px #49323f15; }
.macbook-base>span { position:absolute; width:13%; height:6px; top:0; left:43.5%; border-radius:0 0 6px 6px; background:#97949d; box-shadow:inset 0 2px 2px #5d596160; }
.mac-chii-region { position:absolute; top:0; left:29%; width:42%; z-index:5; }
.hello-section .mac-chii-region .native-stage { position:relative; width:100%; margin:0; aspect-ratio:1160/320; }
.mac-chii-hotspot { position:absolute; top:0; left:0; right:0; width:100%; height:34.7%; min-height:24px; border:0; border-radius:0 0 10px 10px; background:transparent; cursor:pointer; }
.mac-chii-hotspot:focus-visible { outline-offset:-2px!important; }
.mac-hover-preview { position:absolute; top:34.5%; left:0; width:100%; border-radius:0 0 16px 16px; background:#000; box-shadow:0 12px 20px #30243030; overflow:hidden; }
.mac-hover-preview::before { content:""; position:absolute; inset:0 0 auto;height:5px;background:#000;z-index:1; }
.mac-menu-crop{overflow:hidden;pointer-events:none}.mac-menu-crop img{display:block;width:100%;height:auto;margin-top:-10%;pointer-events:none}
.mac-menu-close { position:absolute; right:5px; top:4px; z-index:2; width:25px; height:25px; border:0; border-radius:5px; background:#1c1a1d; color:#eee7ee; cursor:pointer; font-size:18px; line-height:1; }
.mac-preview-actions { position:relative; z-index:2; padding:0 12px 14px; color:#bcb0ba; background:#000; }.mac-preview-actions p{font-size:10px;margin:0 0 7px;color:#afa0aa}.mac-preview-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mac-preview-actions button{padding:7px 5px;min-height:32px;font-size:11px;color:#f5eff4;background:#242025;border:1px solid #4e424b;border-radius:5px;cursor:pointer}.mac-preview-actions button:hover{background:#3b3038}
.mac-demo-controls { max-width:620px; margin:22px auto 0; }
.mac-menu-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:16px; }
.mac-menu-controls button { min-height:43px; padding:10px 16px; font-size:14px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); cursor:pointer; }
.mac-menu-controls button:hover { background:var(--pink); border-color:var(--accent); }
.mac-menu-controls button:first-child { background:var(--text); color:var(--surface); border-color:var(--text); }
.mac-menu-controls button:first-child:hover{background:#674657}
.hello-section .pet-message { display:block; margin:0 auto 16px; }
.hello-section .playground-instruction{max-width:520px;margin:0 auto 9px;}
.hello-section .gift-tray{max-width:480px;margin:0 auto 7px;}
.hello-section .preview-note{max-width:700px;margin:16px auto 0;line-height:1.6}
.mac-chii-region[data-menu-open="true"] .native-stage::after{content:"";position:absolute;left:0;right:0;top:27%;height:9%;background:#000;z-index:-1}
@media(max-width:900px){.hello-section .hello-copy{column-gap:30px}.hello-section .hello-copy h1{font-size:56px}.macbook{padding:0 20px}.macbook-base{left:-20px;width:calc(100% + 40px)}.mac-work-page{padding:5% 7%}.mac-work-sidebar{padding-top:15px;gap:5px}.mac-work-page .mac-page-overline{margin-bottom:9px}.mac-work-page .mac-page-copy{margin-bottom:13px}.mac-desktop-note{right:3%}}
@media(max-width:700px){.hello-section{padding-block:25px 38px}.hello-section .hello-copy{display:block;padding-bottom:20px}.hello-section .hello-copy .handwritten{display:none}.hello-section .hello-copy h1{font-size:48px;max-width:none;margin:0 0 15px}.hello-section .hello-copy>p:not(.handwritten):not(.coming-soon){max-width:46ch;margin:0 0 18px}.hello-section .hello-copy>.primary-link{display:inline-flex}.hello-section .hello-copy .coming-soon{margin:13px 0 16px!important}.hello-section .color-picker{margin:0;justify-content:flex-start}.hello-section .playground-toolbar{padding-inline:2px}.macbook{padding:0 12px}.macbook-display{padding:6px 6px 12px;border-radius:12px 12px 7px 7px}.mac-screen{border-radius:6px 6px 2px 2px}.macbook-base{left:-12px;width:calc(100% + 24px);height:12px}.mac-lid-name{font-size:3px;bottom:1px}.mac-menubar{padding-inline:7px;gap:5px;min-height:12px}.mac-menu-left,.mac-menu-right{gap:6px}.mac-menu-left>span:nth-child(n+3){display:none}.mac-menu-right .mac-wifi,.mac-menu-right .mac-battery{display:none}.mac-traffic{gap:3px}.mac-traffic i{width:4px;height:4px}.mac-window-titlebar{padding-inline:7px;min-height:17px}.mac-work-sidebar{padding:11px 5px;gap:3px}.mac-work-sidebar span{padding:4px}.mac-work-page{padding:5% 6%}.mac-work-page .mac-page-overline{font-size:5px;margin-bottom:6px;letter-spacing:.7px}.mac-work-page .mac-page-title{font-size:clamp(14px,3vw,22px);letter-spacing:-.4px;margin-bottom:8px}.mac-work-page .mac-page-copy{font-size:7px;margin-bottom:11px}.mac-task-line{font-size:6px;margin:6px 0;gap:5px}.mac-desktop-note{display:none}.mac-dock{padding:4px 6px;gap:5px;border-radius:6px}.mac-dock>span,.mac-dock>img{width:20px;height:20px;font-size:15px;line-height:20px;border-radius:4px}.mac-chii-region{left:25%;width:50%}.mac-menu-close{width:22px;height:22px;top:2px;right:2px;font-size:16px}.mac-preview-actions{padding:0 6px 8px}.mac-preview-actions p{font-size:7px}.mac-preview-actions>div{gap:3px}.mac-preview-actions button{font-size:8px;padding:4px 1px;min-height:25px}.mac-demo-controls{margin-top:18px}.mac-menu-crop img{margin-top:-10%}}
@media(max-width:420px){.hello-section .hello-copy h1{font-size:44px}.mac-window-titlebar{min-height:12px;font-size:5px}.mac-work-sidebar{font-size:5px;padding-top:6px}.mac-work-page .mac-page-overline,.mac-work-page .mac-page-copy{display:none}.mac-work-page .mac-page-title{font-size:14px;margin-bottom:9px}.mac-task-line{font-size:5px;margin:5px 0}.mac-menubar{font-size:5px;min-height:10px}.mac-menu-left>span{display:none}.mac-dock{bottom:3%;padding:3px 5px;gap:4px}.mac-dock>span,.mac-dock>img{width:15px;height:15px;font-size:12px;line-height:15px;border-radius:3px}.macbook-display{padding:4px 4px 9px}.macbook-base{height:9px}.mac-lid-name{display:none}.mac-menu-controls{gap:8px}.mac-menu-controls button{font-size:12px;padding-inline:12px}.mac-preview-actions p{display:none}.mac-preview-actions button{min-height:23px;font-size:7px}.mac-menu-close{width:19px;height:19px;font-size:14px}.mac-demo-controls{margin-top:15px}}
/* The screenshot is visual; full-sized controls stay outside the device. */
.mac-demo-controls>.mac-preview-actions { padding:0 0 16px; background:transparent; text-align:center; }
.mac-demo-controls>.mac-preview-actions p { display:block; color:var(--secondary); font-size:12px; margin-bottom:9px; }
.mac-demo-controls>.mac-preview-actions>div { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.mac-demo-controls>.mac-preview-actions button { min-height:42px; font-size:13px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); }
.mac-demo-controls>.mac-preview-actions button:hover { background:var(--pink); border-color:var(--accent); }
@media(max-width:700px){.mac-menu-close{display:none}.mac-demo-controls>.mac-preview-actions>div{grid-template-columns:repeat(2,minmax(0,1fr))}.mac-demo-controls>.mac-preview-actions button{font-size:13px;min-height:42px}}
.mac-hover-preview:not([hidden]) { animation:mac-menu-enter .18s ease-out both; transform-origin:top center; }
@keyframes mac-menu-enter { from{opacity:0;transform:translateY(-3px) scaleY(.97)}to{opacity:1;transform:none} }
.promotion-page.motion-paused .mac-hover-preview,.promotion-page.reduced-motion .mac-hover-preview { animation:none; }