@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter+Mono:wght@400..700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:40px 20px;background:#f5f5f5}.caption{position:absolute;bottom:12px;right:12px;padding:10px;background:#fff;border-radius:4px;box-shadow:0 0 10px #0000001a;font-size:14px;font-weight:600;color:#111;z-index:10}.svg-text{font-family:Inter,sans-serif;font-size:90px;font-weight:400;letter-spacing:.02em;text-anchor:middle;dominant-baseline:middle}.svg-text--black{fill:#111}.svg-text--white{fill:#fff}.mask-wrapper rect{fill:#e2d9d3;transition:fill .2s}.container{position:relative;border:4px solid #333;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}.container--square{width:400px;height:400px;aspect-ratio:1}.container--wide{width:600px;height:300px;aspect-ratio:2/1}.text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,4vw,2.5rem);font-family:sans-serif;font-weight:400;text-align:center;line-height:1.2;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}.text--background{color:#111;z-index:1}.text--foreground{color:#fff;z-index:2}.masked-content{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:3;-webkit-mask-image:url(#morphMask1);mask-image:url(#morphMask1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center}.container--wide .masked-content{-webkit-mask-image:url(#morphMask2);mask-image:url(#morphMask2)}.mask-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}.mask-svg{width:100%;height:100%;position:absolute;top:0;left:0}@media (max-width: 768px){.container--square{width:300px;height:300px}.container--wide{width:100%;max-width:500px;height:250px}}@media (max-width: 480px){.container--square{width:250px;height:250px}.container--wide{width:100%;height:200px}}#controller{position:fixed;top:8px;right:8px;z-index:1000;background:#f7f7f8;border:1px solid #bbb;border-radius:0;box-shadow:none;padding:10px 12px 8px;font-size:13px;color:#222;min-width:180px;font-family:Inter Mono,SFMono-Regular,Menlo,Monaco,monospace}#controller label{display:block;margin-bottom:2px;font-weight:400;font-family:Inter Mono,SFMono-Regular,Menlo,Monaco,monospace}#controller input,#controller select{margin-left:4px;margin-bottom:0;font-size:13px;border-radius:0;border:1px solid #bbb;padding:2px 4px;font-family:Inter Mono,SFMono-Regular,Menlo,Monaco,monospace;background:#fff;color:#222}#controller .controller-row{margin-bottom:6px}#controller button{margin-top:6px;margin-right:6px;padding:2px 10px;border-radius:0;border:1px solid #bbb;background:#eaeaea;color:#222;font-weight:600;font-size:13px;font-family:Inter Mono,SFMono-Regular,Menlo,Monaco,monospace;cursor:pointer;transition:background .15s;box-shadow:none}#controller button:last-child{margin-right:0}#controller button:hover{background:#d5d5d5}@media (max-width: 600px){#controller{position:relative;top:0;right:0;width:100%;max-width:100vw;margin-bottom:12px;border-radius:0}}