/* Bright brand colours, clear type, glass only on interactive surfaces. */
:root{--color-citrus:#cdd400;--color-blue:#1798f5;--color-coral:#ff622b;--color-paper:#f8f5ea}
.melony-wordmark{width:179px;height:50px;object-fit:contain;display:block}.brand{padding:0!important;background:none!important;box-shadow:none!important}.brand-logo{background:none}
.palette-lilac{--focus-bg:#1798f5;--focus-ink:#071b29;--focus-accent:#071b29}.palette-rose{--focus-bg:#cdd400;--focus-ink:#171c03;--focus-accent:#171c03}.palette-blue{--focus-bg:#ff622b;--focus-ink:#291005;--focus-accent:#291005}.palette-mint{--focus-bg:#1798f5;--focus-ink:#071b29;--focus-accent:#071b29}.palette-sun{--focus-bg:#cdd400;--focus-ink:#171c03;--focus-accent:#171c03}
.focus{padding:76px 0}.focus-heading{gap:48px}.focus-heading h2{max-width:19ch;text-wrap:balance}.focus-heading>p{opacity:1;line-height:1.6}.focus-body{gap:44px;align-items:start}.focus-settings{gap:19px}.focus-settings>p{line-height:1.6}
.cursor-stage,.haptic-stage,.motion-stage,.bot-stage,.responsive-stage{isolation:isolate;background:linear-gradient(145deg,#ffffff82,#ffffff29);border:1px solid #ffffffb5;border-radius:30px;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #ffffff65,0 16px 40px -24px #08234080;backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}
.cursor-stage:before,.haptic-stage:before,.motion-stage:before,.bot-stage:before,.responsive-stage:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(125deg,#fff5,transparent 35%,transparent 65%,#ffffff26)}
.focus button,.focus-link{border-radius:999px;box-shadow:inset 0 1px 0 #ffffff32,0 4px 12px -8px #0008}.focus .quiet{background:#ffffff30;border-color:#ffffff98;box-shadow:inset 0 1px 0 #fff7;color:var(--focus-ink)}
.focus-settings input:not([type=range]):not([type=color]),.focus-settings select{background:#ffffffb5;border-color:#ffffffd0;border-radius:14px;box-shadow:inset 0 1px 0 #fff;color:#101b24}.focus-settings input[type=color]{background:#ffffffb5;border-radius:12px}.focus-settings input[type=range]{accent-color:#101b24}.focus :focus-visible{outline:3px solid #101b24;outline-offset:4px}
.focus-note,.focus-status{opacity:1}.focus-status{max-width:64ch;line-height:1.6}.emoji-choices button{background:#ffffff80;border:1px solid #ffffffb0;box-shadow:none;font-size:23px;min-width:48px;padding:8px 12px}.emoji-choices button[aria-pressed=true]{background:#fff;border-color:#101b24}
.cursor-apply{display:grid!important;grid-template-columns:20px 1fr;align-items:center;column-gap:10px!important}.cursor-apply input{accent-color:#101b24;width:18px!important;height:18px!important;min-height:18px!important}.cursor-apply small{grid-column:2;font-weight:400;font-size:12px;line-height:1.4}
.cursor-stage{touch-action:none;user-select:none;min-height:440px;overflow:hidden}.cursor-stage>p,.cursor-stage>span:not(#custom-pointer){pointer-events:none}.cursor-stage>p{margin-top:100px}.cursor-stage>span:not(#custom-pointer){max-width:27ch}.cursor-stage.cursor-active,.cursor-stage.cursor-active *{cursor:auto}
#custom-pointer{display:block!important;left:50%;top:22%;max-width:calc(100% - 30px);text-overflow:ellipsis;overflow:hidden;filter:drop-shadow(0 1px 0 #fff8);transform:translate(-50%,-50%)}
#global-pointer{position:fixed;display:none;z-index:2147483000;pointer-events:none;line-height:1.2;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;transform:translate(10px,8px);filter:drop-shadow(0 1px 0 #fff9)}#global-pointer.visible{display:block}@media(any-pointer:fine){html.melony-cursor-on,html.melony-cursor-on body,html.melony-cursor-on a,html.melony-cursor-on button,html.melony-cursor-on .cursor-stage{cursor:none!important}html.melony-cursor-on input,html.melony-cursor-on textarea{cursor:text!important}html.melony-cursor-on input[type=range],html.melony-cursor-on input[type=checkbox]{cursor:pointer!important}}
.haptic-disc{border-radius:27px;width:114px;height:144px;background:#171c03;box-shadow:inset 0 0 0 5px #ffffff2e,0 16px 20px -14px #0007;position:relative}.haptic-disc:after{content:"";position:absolute;top:12px;left:42px;width:30px;height:5px;background:#cdd400;border-radius:4px}.haptic-disc.on{transform:translateX(3px) rotate(2deg);opacity:1}
.motion-menu{border-radius:18px;background:#ffffffbf;border:1px solid #fff9;box-shadow:0 8px 24px -16px #0008;backdrop-filter:blur(12px)}.motion-head,.bot-top{border-color:#0a1c2833}.bot-stage{color:#071b29}.bot-top{font-weight:600}#bot-messages p{background:#ffffffa6;border:1px solid #fff8;border-radius:17px 17px 17px 4px}#bot-messages p.user{background:#071b29;color:#fff;border-color:#071b29;border-radius:17px 17px 4px 17px}.device-sketch{border-color:#171c03;border-radius:14px;background:#fff4}.device-sketch div{background:#171c03}
.focus-nav{gap:8px}.focus-nav a{border-radius:999px;border:1px solid #fff9;background:#ffffff82;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #fff,0 4px 12px -10px #0008;color:#111e2a}.focus-nav a:hover{background:#cdd400}
.browser-lab{background:#f8f5ea}.browser-tools button{border-radius:999px;background:#ffffff82;border-color:#0e1b2b33;box-shadow:inset 0 1px 0 white;backdrop-filter:blur(12px)}.browser-lab.dark .browser-tools button{background:#ffffff12;border-color:#ffffff60}.has-choice{border-radius:19px}.has-choice:has(input:checked){background:#cdd400;color:#171c03;border-color:#171c03}
.window-lights,.lab-grid{display:none!important}.card-num{letter-spacing:0}.card{border-radius:22px}.card:hover{box-shadow:inset 0 1px 0 #ffffff80}.button{border-radius:999px}.button.primary{background:#cdd400}.cookie-banner{background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:#fff8;box-shadow:0 12px 40px -20px #0005}
@supports not (backdrop-filter:blur(1px)){.cursor-stage,.haptic-stage,.motion-stage,.bot-stage,.responsive-stage{background:#ffffffbf}}
@media(max-width:760px){.focus{padding:54px 0}.focus-heading{gap:20px}.focus-heading h2{font-size:36px}.focus-body{gap:26px}.cursor-stage,.haptic-stage,.motion-stage,.bot-stage,.responsive-stage{border-radius:24px;min-height:340px}.focus-nav{gap:8px}.focus-nav a{padding:10px 13px}.melony-wordmark{width:150px;height:43px}.focus-settings select,.focus-settings input{font-size:16px!important}.focus-actions{gap:9px}.focus-actions button{padding:11px 16px}#global-pointer{max-width:170px}}