/* Little paper annotations, with ink details borrowed from the desk. */
.feature-hint {
 width:min(246px,calc(100vw - 24px));padding:13px 32px 14px 13px;
 border:1px solid #ffffffc9;border-radius:19px 19px 19px 7px;
 background:#f7f5e9;color:#294652;
 box-shadow:0 2px 0 #bbc9bd,0 10px 25px #233e5226;
 font:12px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 overflow:visible;opacity:0;transform:translateY(-4px) scale(.97);
 transform-origin:50% 0;
 transition:opacity 140ms var(--shell-ease),transform 180ms var(--shell-ease),display 180ms allow-discrete,overlay 180ms allow-discrete;
}
.feature-hint:popover-open {display:flex;align-items:flex-start;gap:10px;animation:none;opacity:1;transform:none;}
@starting-style { .feature-hint:popover-open {opacity:0;transform:translateY(-4px) scale(.97);} }
.feature-hint .hint-drawing {flex:0 0 27px;width:27px;height:31px;margin-top:1px;color:#536d66;}
.hint-drawing svg {display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.feature-hint[data-kind="pro"] .hint-drawing {color:#96723e;}
.feature-hint[data-kind="listen"] .hint-drawing {color:#677393;}
.feature-hint .hint-copy {min-width:0;}
.feature-hint b {margin:0 0 5px;font:italic 600 16px/1.1 Georgia,serif;letter-spacing:-.25px;}
.feature-hint p {margin:0;color:#49616b;}
.feature-hint button {top:1px;right:1px;display:grid;place-items:center;width:30px;height:30px;padding:7px;background:transparent;color:#6c8186;}
.feature-hint button svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
.feature-hint button:focus-visible {outline:2px solid #537c8b;outline-offset:-3px;}

.notification {
 bottom:max(20px,env(safe-area-inset-bottom));max-width:min(360px,calc(100% - 32px));
 padding:10px 16px;border:1px solid #fffc;border-radius:22px 22px 8px 22px;
 background:#f7f5e9;color:#294652;box-shadow:0 2px 0 #bbc9bd,0 8px 24px #233e5229;
 gap:12px;font-size:12px;line-height:1.45;
 transition:opacity 140ms var(--shell-ease),translate 180ms var(--shell-ease);
}
.notification:not([hidden]) {opacity:1;translate:0 0;}
@starting-style { .notification:not([hidden]) {opacity:0;translate:0 5px;} }
.notification::before {content:'';flex:none;width:6px;height:6px;border:1px solid #70928c;border-radius:50%;box-shadow:0 0 0 3px #70928c15;}
.notification:has(button:not([hidden])) {padding:5px 6px 5px 14px;}
.notification button:not([hidden]) {display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;min-width:64px;padding:0 10px;border:1px solid #bdcdbf;border-radius:16px;background:#e3ebdf;color:#294652;font-size:11px;font-weight:600;}
.notification button svg {width:18px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.notification button:focus-visible {outline:2px solid #537c8b;outline-offset:2px;}

/* Hover gestures act on a small drawing, keeping the hit target still. */
.hud .get-button {gap:7px;}
.button-spark {width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
.button-spark,.hint-drawing svg,.hint-pupils,.feature-hint button svg,
.notification button svg,.hud [data-pro-channel] svg,.hud [data-pro-channel="watch"] circle,
.hud #command-help svg,.hud #pro-preview .pro-dot,.hud .get-button,
.hud .playground-link img {transition:transform 220ms var(--shell-ease);transform-origin:center;}
.hud [data-pro-channel="watch"] circle {transform-box:fill-box;}
.hud .get-button:active,.notification button:active {transform:scale(.97);transition-duration:100ms;}
.feature-hint button:active svg {transform:scale(.85);transition-duration:100ms;}
@media(hover:hover) and (pointer:fine) {
 .hud .get-button:hover {transform:translateY(-1px);}
 .hud .get-button:hover .button-spark {transform:rotate(80deg) scale(1.1);}
 .hud [data-pro-channel="listen"]:hover svg {transform:rotate(-12deg) translateY(-1px);}
 .hud [data-pro-channel="watch"]:hover circle {transform:translateX(2px);}
 .hud #command-help:hover svg {transform:rotate(-10deg) translateY(-1px);}
 .hud #pro-preview:hover .pro-dot {transform:scale(1.35);}
 .hud .playground-link:hover img {transform:rotate(-10deg);}
 .feature-hint button:hover svg {transform:rotate(90deg);}
 .feature-hint:hover .hint-drawing svg {transform:rotate(-7deg);}
 .feature-hint[data-kind="pro"]:hover .hint-drawing svg {transform:rotate(45deg);}
 .feature-hint:hover .hint-pupils {transform:translateX(-1px);}
 .notification button:hover svg {transform:translateX(-2px) rotate(-9deg);}
 .hud .get-button:active {transform:scale(.97);}
}
@media(max-width:599px) {
 .hud .get-button .button-spark {display:none;}
 .feature-hint {padding-right:40px;}
 .feature-hint button {width:44px;height:44px;top:0;right:0;}
 .notification {bottom:max(14px,env(safe-area-inset-bottom));font-size:12px;}
 .notification button:not([hidden]) {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
 .notification {transition:none;}
 .feature-hint,.button-spark,.hint-drawing svg,.hint-pupils,.feature-hint button svg,
 .notification button svg,.hud [data-pro-channel] svg,.hud [data-pro-channel="watch"] circle,
 .hud #command-help svg,.hud #pro-preview .pro-dot,.hud .get-button,.hud .playground-link img {transition:none;transform:none!important;}
}
html[data-motion="paused"] .notification {transition:none;}
html[data-motion="paused"] :is(.feature-hint,.button-spark,.hint-drawing svg,.hint-pupils,.feature-hint button svg,.notification button svg,.hud [data-pro-channel] svg,.hud [data-pro-channel="watch"] circle,.hud #command-help svg,.hud #pro-preview .pro-dot,.hud .get-button,.hud .playground-link img) {transition:none;transform:none;}