@font-face{font-family:DM Sans;src:url('/de-nada-mark/assets/dm-sans.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument Serif;src:url('/de-nada-mark/assets/instrument-serif-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#edf3f2;--ink:#183d46;--muted:#4b6469;--coin:#ccd943;--loss:#de795c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:DM Sans,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit}
[hidden]{display:none!important}
.svg-library{position:absolute;overflow:hidden;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:12px;left:20px;z-index:5;background:var(--ink);color:white;padding:12px 18px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.composition{width:min(calc(100% - clamp(22px,5vw,76px)*2),1260px);margin:clamp(38px,7vh,78px) auto 0;display:grid;grid-template-columns:.88fr 1.12fr;grid-template-rows:min-content 1fr min-content;column-gap:35px;align-items:start;min-height:620px}
.opening{grid-column:1;grid-row:1;padding-top:27px}
h1{font-size:clamp(58px,5.85vw,88px);font-weight:450;letter-spacing:-.065em;line-height:1.03;margin:0}
h1 span,h1 em{display:block}
h1 em{font-family:Instrument Serif,Georgia,serif;font-weight:400;letter-spacing:-.035em;font-size:1.12em}
.intro{font-size:19px;line-height:1.65;max-width:355px;margin:30px 0 0;letter-spacing:-.015em}
.worlds{grid-column:2;grid-row:1/3;display:flex;gap:16px;align-self:start;min-width:0;padding-top:8px;min-height:570px;overflow:clip}
.world{position:relative;flex:0 0 100%;min-width:0;max-width:640px;transition:flex-basis .6s cubic-bezier(.22,.61,.36,1)}
.world--alternative{flex-basis:calc(50% - 8px)}
.world h2{font-size:14px;line-height:1.5;font-weight:550;letter-spacing:-.01em;margin:0 0 14px;min-height:42px;text-align:center;visibility:hidden}
body[data-stage=comparing] .world h2{visibility:visible}
.scene{position:relative;aspect-ratio:1/.9;isolation:isolate}
.window-object{position:absolute;width:91%;left:-2%;top:-6%}
.window-object>img{display:block;width:100%;height:auto}
.fracture{position:absolute;inset:0;width:100%;height:100%;fill:none;transition:opacity .4s,transform .5s;pointer-events:none}
.crack-shadow{stroke:#29494e;stroke-width:1.4;opacity:.78}
.crack-light{stroke:#fff;stroke-width:.65;transform:translate(.8px,-.7px)}
body:not([data-stage=broken]) .fracture{opacity:0;transform:scale(1.025)}
.shoe-object{position:absolute;width:44%;right:0;bottom:0;margin:0;z-index:2}
.shoe-object>img{display:block;width:100%;height:auto}
.shoe-label{font-size:12px;line-height:1.5;text-align:right;padding-right:6%;margin:12px 0 0;color:var(--muted)}
.purse{position:absolute;width:24%;left:13%;bottom:2%;transition:opacity .2s,transform .3s}
.purse svg{width:100%;display:block;filter:drop-shadow(0 5px 3px #183d4615)}
body:not([data-stage=broken]) .purse{opacity:0;transform:translateY(-10px)}
.coin-flight{position:absolute;width:1px;height:1px;left:25%;top:76%;z-index:4;pointer-events:none}
.coin-flight i{position:absolute;display:block;width:23px;height:23px;border-radius:50%;border:2px solid #8c9339;background:var(--coin);box-shadow:inset 0 0 0 3px #e3eb7b;opacity:0}
.payment{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;line-height:1.5;margin:12px 0 0;text-align:center}
.payment svg{width:23px;height:23px;flex-shrink:0}
.actions{grid-column:1;grid-row:2;align-self:start;margin-top:25px;min-width:0;padding-bottom:35px}
.playback{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 10px 6px 0;border:0;background:transparent;color:var(--muted);font-size:12px;line-height:1.5;cursor:pointer}
.playback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.playback:hover{color:var(--ink)}
.playback:hover span{text-decoration:underline;text-underline-offset:3px}
.play-icon{display:none}
body[data-paused=true] .pause-icon{display:none}
body[data-paused=true] .play-icon{display:block}
body[data-paused=true] *,body[data-paused=true] *::before,body[data-paused=true] *::after{animation-play-state:paused!important}
.meaning{font-size:16px;line-height:1.7;max-width:380px;margin:24px 0 0}
.source{grid-column:1/-1;font-size:11px;line-height:1.7;color:var(--muted);margin:44px 0 0;align-self:end;max-width:600px}
.source a{text-underline-offset:3px;text-decoration-thickness:1px}
.source a:hover{color:var(--ink)}
.fallback{max-width:600px;font-size:17px;line-height:1.7}
body[data-stage=comparing] .worlds{gap:16px}
body[data-stage=comparing] .world--actual{flex-basis:calc(50% - 8px)}
body[data-stage=comparing] .shoe-label{text-align:center;padding-right:0}
body[data-stage=comparing] .scene{aspect-ratio:1/1.4}
body[data-stage=comparing] .window-object{width:100%;left:0;top:2%}
body[data-stage=comparing] .shoe-object{width:68%;right:0;bottom:0}
body[data-stage=comparing] .coin-flight{left:25%;top:35%}
body[data-stage=comparing] .payment{font-size:12px;gap:5px;margin-top:10px}
body[data-stage=comparing] .world--alternative{animation:reveal-world .65s cubic-bezier(.22,.61,.36,1) both}
body[data-stage=comparing] .shoe-object--new{animation:arrive-shoes .75s cubic-bezier(.22,.61,.36,1) both}
body[data-stage=repaired] .window-object>img{animation:restore-glass .7s ease-out}
@keyframes reveal-world{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes arrive-shoes{from{opacity:0;transform:translateY(25px) rotate(-6deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes restore-glass{0%{filter:brightness(1)}40%{filter:brightness(1.1)}100%{filter:brightness(1)}}
@media(min-width:1500px){.composition{margin-top:80px}}
@media(max-width:1050px) and (min-width:761px){.composition{grid-template-columns:.85fr 1.15fr;column-gap:16px}h1{font-size:58px}.intro{font-size:17px}.payment{font-size:12px}body[data-stage=comparing] .payment{font-size:11px}.meaning{font-size:15px}}
@media(max-width:760px){.composition{margin-top:29px;display:flex;flex-direction:column;gap:0;min-height:0}.opening{padding-top:0;width:100%}h1{font-size:clamp(48px,10.8vw,72px);letter-spacing:-.06em}h1 em{font-size:1.12em}.intro{font-size:16px;line-height:1.6;max-width:420px;margin-top:22px}.worlds{width:100%;max-width:480px;margin:24px auto 0;padding-top:0;min-height:clamp(300px,calc((100vw - 44px)*1.1),460px)}.world h2{display:none}.scene{aspect-ratio:1/.88}.window-object{width:83%;left:0;top:-7%}.shoe-object{width:38%;right:0;bottom:0}.purse{width:22%;bottom:3%;left:12%}.payment{margin-top:10px}.actions{margin-top:30px;padding:0;width:100%}.meaning{font-size:15px;max-width:460px;margin-top:22px}.source{margin-top:46px;font-size:10px;max-width:380px}.shoe-label{font-size:11px;margin-top:12px}body[data-stage=comparing] .worlds{padding-top:0;margin-top:32px;gap:14px;min-height:clamp(300px,calc((100vw - 44px)*1.1),460px)}body[data-stage=comparing] .world h2{display:block;line-height:1.5;font-size:12px;margin-bottom:10px;min-height:36px}body[data-stage=comparing] .scene{aspect-ratio:1/1.5}body[data-stage=comparing] .window-object{width:100%;left:0;top:0}body[data-stage=comparing] .shoe-object{width:80%;right:0;bottom:0}body[data-stage=comparing] .payment{font-size:11px;align-items:flex-start;margin-top:10px;gap:4px}body[data-stage=comparing] .payment svg{width:18px;height:18px}.coin-flight i{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}