@font-face{font-family:Poppins;src:url('assets/poppins-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/poppins-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:light;--navy:#2d4554;--blue:#159dd5;--dark-blue:#27799d;--page:#eff4f7;--surface:#fff;--border:#dde5e9;--muted:#647681;--soft:#e4f3fb;--speed:1;font-family:Poppins,Arial,sans-serif;color:var(--navy);background:var(--page);font-size:16px}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}main{max-width:1280px;margin:auto;padding:42px 32px 24px}.eyebrow{display:flex;gap:16px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.eyebrow span{font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none}h1{margin:10px 0 12px;font-size:32px;line-height:1.25;letter-spacing:-1px;font-weight:600}.page-header p{max-width:780px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 32px}.scope-control{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-right:auto}select,button{background:white;border:1px solid #ccd9df;color:var(--navy);border-radius:9px;min-height:42px;padding:9px 13px;font-size:13px;font-weight:600;line-height:1.4}select{padding-right:28px;max-width:100%}button i{margin-right:6px}button:hover{border-color:var(--blue)}button.primary{background:var(--navy);border-color:var(--navy);color:white}button[aria-pressed="true"]{background:var(--soft);border-color:var(--blue);color:var(--dark-blue)}button:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.effects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}.effect{min-width:0}.effect-heading{display:flex;align-items:center;gap:9px;min-height:30px;margin-bottom:8px}.number{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.effect h2{font-size:16px;line-height:1.3;margin:0;letter-spacing:-.3px}.tag{font-size:10px;font-weight:600;line-height:1;padding:5px 7px;border-radius:5px;background:#dce7ed;margin-left:auto;white-space:nowrap}.tag.current{background:var(--navy);color:white}.description{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 12px;min-height:40px}.widget{background:var(--surface);border-radius:14px;border:1px solid #e8edf0;box-shadow:0 2px 3px #253c4c08;min-height:255px;overflow:hidden}.widget-header{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border);min-height:73px}.widget-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border-radius:10px;background:var(--navy);color:white;font-size:18px}.widget-title{font-size:13px;font-weight:600;line-height:1.4}.widget-subtitle{font-size:11px;color:var(--muted);margin-top:2px}.live{display:flex;align-items:center;gap:5px;margin-left:auto;padding:4px 8px;border-radius:15px;background:var(--page);font-size:10px;color:var(--muted)}.live::before{content:"";width:5px;height:5px;border-radius:50%;background:#60a28a}.widget-body{padding:12px 16px 16px}.shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem .5rem;margin-top:.65rem}.shortcut{display:flex;min-width:0;min-height:64px;align-items:center;justify-content:center;flex-direction:column;gap:.3rem;padding:.25rem .15rem;color:var(--navy);border-radius:9px;font-size:.6875rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;position:relative;transition:transform calc(var(--duration,180ms)*var(--speed)) var(--easing,ease),background-color calc(140ms*var(--speed)),color calc(140ms*var(--speed));transform-origin:center}.shortcut:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.icon-tile{--ring-colour:var(--blue);display:inline-flex;width:48px;height:48px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;background:var(--blue);color:white;font-size:18px;transition:transform calc(var(--duration,180ms)*var(--speed)) var(--easing,ease),box-shadow calc(180ms*var(--speed)),border-color calc(180ms*var(--speed))}.icon-tile.navy{--ring-colour:var(--navy);background:var(--navy)}.icon-tile.green{--ring-colour:#58a588;background:#58a588}.icon-tile.pale{--ring-colour:#468db0;background:var(--soft);color:#468db0;border-color:#d3e9f3}.shortcut-label{display:block;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.effect-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px}.detail{font-size:11px;color:var(--muted)}.play{font-size:12px;min-height:34px;padding:6px 10px;border-color:transparent;background:transparent}.play:hover{background:#fff}.play i{font-size:11px}
.motion-note{font-size:13px;color:var(--muted);margin:-16px 0 24px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:40px;padding-top:20px;font-size:12px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1050px){.effects{grid-template-columns:repeat(2,minmax(0,1fr))}.scope-control{width:100%;margin:0 0 4px}}
@media(max-width:650px){main{padding:26px 18px 24px}h1{font-size:27px;letter-spacing:-.7px}.effects{grid-template-columns:1fr;gap:26px}.controls{gap:8px;margin-bottom:26px}.controls button{font-size:12px;padding:8px 10px}.scope-control{flex-wrap:wrap}.description{min-height:0}.effect h2{font-size:17px}.widget{max-width:420px}.page-header p{font-size:14px}.eyebrow{gap:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.shortcut:hover:not([data-preview]),.shortcut:hover:not([data-preview]) .icon-tile{transform:none!important}}
.effect{--ring-gap:2px;--ring-width:2px;--ring-strength:55%;--ring-fade:180ms}
.effect .icon-tile{transition:box-shadow calc(var(--ring-fade) * var(--speed)) ease}
.effect .shortcut:is(:hover,[data-preview]) .icon-tile{box-shadow:0 0 0 var(--ring-gap) white,0 0 0 calc(var(--ring-gap) + var(--ring-width)) color-mix(in srgb,var(--ring-colour) var(--ring-strength),white)}
.effect[data-effect="soft-lighter"]{--ring-strength:35%}
.effect[data-effect="soft-clearer"]{--ring-strength:70%}
.effect[data-effect="soft-thin"]{--ring-width:1px}
.effect[data-effect="soft-full"]{--ring-width:3px}
.effect[data-effect="soft-close"]{--ring-gap:1px}
.effect[data-effect="soft-roomy"]{--ring-gap:3px}
.effect[data-effect="soft-flush"]{--ring-gap:0px}
.effect[data-effect="soft-slow"]{--ring-fade:320ms}