.mac-notes-stage{grid-template:"head card""side card"".card"1fr/minmax(260px,340px) auto;justify-content:center;column-gap:48px;width:100%;margin-top:48px;display:grid}.mac-notes-card{grid-area:card}.mac-notes-head{grid-area:head;margin:86px 0 28px}.mac-notes-side{grid-area:side;min-width:0}.mac-notes-screen{aspect-ratio:440/560;isolation:isolate;width:408px;position:relative}.mac-notes-canvas{transform-origin:0 0;scale:var(--scale,1);position:absolute;top:0;left:0}@media (max-width:900px){.mac-notes-stage{grid-template:"head""side""card"/auto;justify-items:center;width:100%;max-width:560px;margin-inline:auto}.mac-notes-head{margin:0 0 20px}.mac-notes-screen{width:min(440px,100%)}.mac-notes-side{width:100%;margin-bottom:28px}}@media (max-width:720px){.mac-notes-stage{margin-top:32px}}
.mac-notes{margin-top:var(--section-gap);flex-direction:column;align-items:center;display:flex}.mac-notes-header{flex-direction:column;max-width:46ch;padding:0 20px;display:flex}.mac-notes-header h2{letter-spacing:-.015em;color:var(--color-text-1);text-wrap:pretty;font-size:22px;font-weight:600;line-height:1.2}.mac-notes-header p{color:var(--color-text-2);text-wrap:pretty;font-size:15px;line-height:1.5}@media (max-width:900px){.mac-notes-header{text-align:center;align-items:center;margin:0 auto;padding:0}}
.qa-bar{isolation:isolate;-webkit-backdrop-filter:blur(22px)saturate(1.5);opacity:0;background:linear-gradient(#ffffff0a,#0000 50%),#26262ba8;border-radius:30px;width:360px;height:60px;margin-left:-180px;transition:opacity .18s ease-in,scale .2s cubic-bezier(.64,0,.78,0),translate .2s cubic-bezier(.64,0,.78,0);position:absolute;top:160px;left:50%;overflow:hidden;translate:0 6px;scale:.97;box-shadow:0 12px 30px #00000042,0 1px 3px #0000002e}.qa-bar[data-shown]{opacity:1;transition:opacity .22s,scale .32s cubic-bezier(.22,.61,.36,1),translate .32s cubic-bezier(.22,.61,.36,1);translate:0;scale:1}.qa-bar[data-shown][data-pressed]{transition:scale .12s ease-out;scale:.985}.qa-bar:before{content:"";z-index:-1;background:radial-gradient(circle 184px at 0 0, color-mix(in srgb, var(--tile-color) 16%, transparent), transparent), linear-gradient(97deg, color-mix(in srgb, var(--tile-color) 12%, transparent), color-mix(in srgb, var(--tile-color) 4%, transparent) 20%, transparent 40%);filter:blur(14px);pointer-events:none;position:absolute;inset:0}.qa-bar:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;border:1px solid #00000052;position:absolute;inset:0;box-shadow:inset 0 1px #ffffff1a,inset 0 -1px #ffffff08}.qa-bar-swap{align-items:center;gap:14px;height:100%;padding:0 20px 0 10px;display:flex}.qa-bar-swap:has(.qa-duration){padding-right:14px}.qa-bar-swap>.qa-icon{animation:.42s cubic-bezier(.3,1.5,.5,1) both qa-icon-in}.qa-bar-swap>.qa-field{animation:.36s cubic-bezier(.22,.61,.36,1) 50ms both qa-field-in}.qa-bar-swap>.qa-duration{animation:.36s cubic-bezier(.22,.61,.36,1) .11s both qa-field-in}@keyframes qa-icon-in{0%{opacity:0;rotate:-12deg;scale:.55}}@keyframes qa-field-in{0%{opacity:0;filter:blur(4px);translate:10px}}.qa-bar .qa-icon{--tile-size:34px;corner-shape:round;border-radius:50%}.qa-field{white-space:pre;flex:1;align-items:center;min-width:0;font-size:15px;display:flex;position:relative;overflow:hidden}.qa-text{color:#fff}.qa-placeholder{text-overflow:ellipsis;color:#ebebf573;animation:.26s both qa-placeholder-in;overflow:hidden}@keyframes qa-placeholder-in{0%{opacity:0}}.qa-sent{color:#fff;pointer-events:none;align-items:center;animation:.52s cubic-bezier(.64,0,.78,0) both qa-sent;display:flex;position:absolute;inset:0 auto 0 0}@keyframes qa-sent{to{opacity:0;filter:blur(4px);translate:0 -16px}}.qa-caret{background:#0a84ff;border-radius:1px;flex:none;width:1.5px;height:18px;margin:0 1px;animation:1.05s step-end infinite qa-blink}.qa-field[data-typing] .qa-caret{animation:none}@keyframes qa-blink{50%{opacity:0}}.qa-duration{color:#ebebf599;background:#ffffff0f;border-radius:999px;flex:none;padding:6px 12px;font-size:12px;line-height:1.2;box-shadow:inset .5px 1px #ffffff2e,inset -.5px -.5px #ffffff0f,inset 0 0 8px #ffffff0a}@media (prefers-reduced-motion:reduce){.qa-bar,.qa-bar[data-shown]{transition:opacity .16s;translate:none;scale:none}.qa-bar-swap>*,.qa-caret,.qa-placeholder,.qa-sent{animation:none}.qa-sent{display:none}}