@import url('fonts/fonts.css');
:root{--bg:#050505;--fg:#f5f5f3;--muted:#818181;--line:#242424;--surface:#111;--glass:rgba(35,35,35,.65)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}body.light{--bg:#f3f2ef;--fg:#111;--muted:#666;--line:#d5d4d0;--surface:#e6e5e1;--glass:rgba(255,255,255,.72)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--fg);outline-offset:5px}header{height:106px;display:flex;align-items:center;justify-content:space-between;margin:0 5%;border-bottom:1px solid var(--line)}.brand{font-size:19px;font-weight:800;letter-spacing:-1px}.brand span{font-weight:400}.brand i{font-size:10px;font-style:normal;vertical-align:top;margin-left:5px}nav{display:flex;align-items:center;gap:34px;font-size:13px}nav a{color:var(--muted)}nav .active{color:var(--fg)}#theme{border:1px solid var(--line);border-radius:50%;width:34px;height:34px;font-size:22px}.hero{position:relative;min-height:760px;padding:43px 5% 0;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:9px}.dot{width:5px;height:5px;background:var(--fg);border-radius:50%}.edition{margin-left:auto;color:var(--muted)}h1{font-family:Manrope,sans-serif;font-size:clamp(70px,8.7vw,140px);line-height:.99;letter-spacing:-.075em;font-weight:500;position:relative;z-index:2;margin:53px 0 38px;pointer-events:none}h1>span{color:#8a8a8a}.hero-bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;max-width:580px}.hero-bottom p{font-size:13px;line-height:1.8;color:#aaa}.glass{background:var(--glass);backdrop-filter:blur(24px);border:1px solid #ffffff25;box-shadow:inset 0 1px 0 #ffffff15,0 15px 60px #0003}.link{display:flex;gap:28px;padding:17px 22px;border-radius:40px;font-size:12px}.link:hover{background:#6666}.art-caption{display:flex;gap:30px;position:absolute;right:5%;bottom:37px;font-size:9px;letter-spacing:1.5px;color:var(--muted)}.sculpture{position:absolute;right:3%;top:104px;width:47%;height:480px;transform:rotate(-30deg);filter:drop-shadow(0 30px 45px #ffffff0b)}.orb{position:absolute;left:10%;width:86%;height:170px;border-radius:50%;background:radial-gradient(ellipse at 45% 20%,#fff7 0%,#8882 12%,#000 35%,#aaa 47%,#fff 49%,#333 51%,#050505 58%,#888 70%,#080808 74%);box-shadow:inset 3px -4px 12px #fff8,inset -10px 4px 20px #000,0 5px 15px #000b;border:1px solid #aaa7;transform:rotateX(30deg)}.a{top:0;width:60%;left:23%}.b{top:43px;width:74%;left:16%}.c{top:91px}.d{top:141px;width:93%;left:6%}.e{top:192px;width:92%;left:7%}.f{top:241px;width:85%;left:11%}.g{top:287px;width:72%;left:17%}.h{top:327px;width:54%;left:26%}.gallery{padding:70px 5% 80px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end}h2{font-family:Manrope,sans-serif;font-weight:500;font-size:44px;letter-spacing:-2px;margin:16px 0 0}.count,.hint{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.toolbar{margin:37px 0 27px;display:flex;align-items:center;justify-content:space-between}.filters{display:flex;gap:7px}.filters button{font-size:12px;padding:10px 18px;border-radius:30px;color:var(--muted)}.filters .selected{background:var(--fg);color:var(--bg)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.cover{aspect-ratio:1;position:relative;overflow:hidden;background:#141414;border:1px solid #ffffff13;border-radius:4px;color:#eee}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#ffffff0c,transparent 60%);pointer-events:none}.cover-code{position:absolute;top:17px;left:18px;font-size:9px;letter-spacing:2px;z-index:2}.cover-bottom{position:absolute;bottom:17px;left:18px;font-size:9px;letter-spacing:1.5px;color:#999}.cover-one{background:radial-gradient(ellipse at 50% 60%,#4f4f4f 0,#161616 55%,#0a0a0a)}.cover-one .shape{position:absolute;inset:20% 26%;border-radius:50%;transform:rotate(32deg);background:linear-gradient(100deg,#050505 10%,#333 30%,#eee 46%,#555 51%,#080808 64%,#aaa 86%,#222);box-shadow:10px 15px 30px #000}.cover-two{background:#deded9;color:#111}.cover-two .shape{position:absolute;width:65%;height:65%;top:18%;left:18%;border-radius:50%;background:repeating-radial-gradient(ellipse,#222 0 1px,#deded9 2px 7px);transform:rotate(-35deg) scaleX(.7)}.cover-three .shape{position:absolute;inset:24%;transform:rotate(45deg);border:1px solid #666;box-shadow:0 0 0 15px #111,0 0 0 16px #444,0 0 0 30px #111,0 0 0 31px #292929;background:linear-gradient(135deg,#777,#070707 45%)}.cover-four{background:#b6b6b3;color:#171717}.cover-four .shape{position:absolute;inset:10% 30%;background:repeating-linear-gradient(90deg,#eee 0,#333 3px,#999 6px,#ddd 9px);border-radius:50%;transform:rotate(35deg);filter:blur(.4px)}.card-play{position:absolute;bottom:14px;right:14px;border:1px solid #ffffff4a;border-radius:50%;width:42px;height:42px;background:#ffffff17;backdrop-filter:blur(12px);color:inherit;z-index:3;font-size:13px;transition:transform .2s}.card-play:hover{transform:scale(1.1);background:#fff;color:#111}.card-meta{display:flex;justify-content:space-between;padding-top:17px}.card-meta h3{font-weight:500;font-size:15px;margin:0 0 7px}.card-meta p{font-size:11px;color:var(--muted);margin:0}.card-meta>span{font-size:10px;color:var(--muted)}.placeholder-note{font-size:11px;color:var(--muted);margin:33px 0 0}.atelier{border-top:1px solid var(--line);padding:65px 5% 0}.atelier-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;margin-bottom:80px}.atelier h2{font-size:48px}.atelier p{color:var(--muted);font-size:15px;line-height:1.8;max-width:360px}.text-link{display:inline-flex;gap:90px;font-size:12px;border-bottom:1px solid var(--line);padding:15px 0}.signature{font-size:clamp(35px,9.8vw,160px);font-family:Manrope,sans-serif;letter-spacing:-.065em;font-weight:800;line-height:1.3;color:var(--fg);display:flex;align-items:center;justify-content:space-between}.signature span{font-size:40px;font-weight:400}footer{margin:10px 5% 145px;border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}.player{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);width:min(920px,90%);border-radius:22px;padding:13px 20px 13px 13px;display:flex;align-items:center;gap:18px}.mini-cover{height:46px;width:46px;border-radius:9px;background:linear-gradient(135deg,#777,#111 55%,#999);display:grid;place-items:center;color:white;font-size:11px;flex-shrink:0}.now{min-width:180px}.now strong,.now span{display:block}.now strong{font-size:12px;font-weight:500}.now span{font-size:10px;color:var(--muted);margin-top:5px}.transport{display:flex;gap:15px;align-items:center}.transport button{font-size:11px;padding:4px}.transport .main-play{font-size:15px;width:38px;height:38px;border-radius:50%;background:var(--fg);color:var(--bg)}.timeline{display:flex;align-items:center;gap:10px;flex:1;font-size:9px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--fg);height:3px}.player #mute{font-size:14px}dialog{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:25px;padding:40px;max-width:500px;width:90%}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}dialog h2{font-size:32px}dialog p{font-size:14px;color:var(--muted);line-height:1.7}.close{position:absolute;right:15px;top:10px;font-size:28px}.file-label{display:block;background:var(--fg);color:var(--bg);padding:17px;border-radius:30px;text-align:center;font-size:13px;margin:28px 0;cursor:pointer}.file-label input{display:none}dialog .small{font-size:11px}.light .hero-bottom p{color:#666}.light .orb{filter:contrast(.9)}@media(min-width:1600px){main,header,footer{max-width:1500px;margin-left:auto;margin-right:auto}.hero{min-height:850px}}@media(max-width:800px){header{height:80px}.brand{font-size:15px}nav{gap:19px}.hero{min-height:760px;padding-top:30px}.edition{display:none}h1{font-size:77px;margin-top:45px}.sculpture{width:70%;right:-17%;top:270px;opacity:.7;height:340px;transform:rotate(-30deg) scale(.8)}.hero-bottom{margin-top:235px;gap:15px}.hero-bottom p{font-size:11px}.link{padding:15px;gap:14px;font-size:11px}.art-caption{display:none}.cards{grid-template-columns:repeat(2,1fr);gap:28px 17px}.gallery{padding-top:45px}h2{font-size:34px}.count,.hint{display:none}.filters button{padding:10px 15px}.atelier-grid{grid-template-columns:1fr;gap:15px;margin-bottom:45px}.atelier h2{font-size:37px}.signature span{font-size:23px}footer{font-size:8px}footer>span:nth-child(2){display:none}.player{bottom:13px;padding:10px;gap:10px;border-radius:18px}.now{min-width:0;flex:1}.now strong{font-size:11px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now span{font-size:9px}.timeline,#mute{display:none}.transport{gap:8px}.mini-cover{width:38px;height:38px}.placeholder-note{line-height:1.7}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.oto-logo{filter:none;mix-blend-mode:normal}.light .oto-logo{filter:brightness(0)}.signature .oto-logo{display:block;width:clamp(52px,7vw,108px);height:auto;flex-shrink:0}
.owner-entry{display:block;flex-shrink:0;border-radius:5px}.owner-entry:hover{opacity:.75}.real-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.card-play:disabled{opacity:.35;cursor:default;transform:none}.gallery-status{color:var(--muted);font-size:12px}
/* Slow, monochrome water caustics, confined to the opening artwork. */
.hero{isolation:isolate}#water-wallpaper{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.48;mask-image:linear-gradient(90deg,#0004,#000 65%),linear-gradient(#000 45%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%)}.hero>.eyebrow{position:relative;z-index:2}.sculpture{z-index:1}.art-caption{z-index:2;bottom:34px;right:calc(5% + 155px)}#water-toggle{position:absolute;bottom:25px;right:5%;z-index:3;display:flex;gap:9px;align-items:center;border:1px solid #ffffff25;background:#0b0b0b70;backdrop-filter:blur(12px);border-radius:30px;padding:10px 13px;font-size:10px;color:#aaa}#water-toggle:hover{color:#fff;border-color:#ffffff55}.light #water-wallpaper{filter:invert(1);mix-blend-mode:multiply;opacity:.21}.light #water-toggle{background:#ffffff80;border-color:#0002;color:#555}@media(max-width:800px){#water-wallpaper{opacity:.36}#water-toggle{bottom:12px;padding:8px 11px;font-size:9px}.hero-bottom{padding-bottom:20px}}@media(prefers-reduced-motion:reduce){#water-wallpaper{opacity:.2}}
#water-wallpaper[hidden],#water-toggle[hidden]{display:none!important}
/* Variant C: monochrome vector controls; consistent across platforms. */
.site-icon{display:inline-block;flex:none;vertical-align:middle;pointer-events:none}.link .site-icon{width:22px;height:22px}.text-link{align-items:center}.text-link .site-icon{width:21px;height:21px}.transport button{display:grid;place-items:center;min-width:28px;min-height:36px}.transport .site-icon{width:21px;height:21px}.transport .main-play{width:42px;height:42px;background:transparent;color:var(--fg)}.transport .main-play .site-icon{width:38px;height:38px}.transport .main-play:hover{opacity:.7}.card-play{display:grid;place-items:center;background:transparent;border:0}.card-play .site-icon{width:38px;height:38px}.card-play:hover{background:transparent;color:inherit}#theme{display:grid;place-items:center}#theme .site-icon{width:19px;height:19px}#mute{display:grid;place-items:center}#mute .site-icon{width:21px;height:21px}#water-toggle .site-icon{width:15px;height:15px}footer a{display:flex;align-items:center;gap:8px}footer .site-icon{width:14px;height:14px}@media(max-width:800px){.transport .main-play{width:38px;height:38px}.transport .main-play .site-icon{width:34px;height:34px}.transport button{min-width:24px}.link .site-icon{width:20px;height:20px}#mute{display:none}}
/* Center fixed-size SVG controls without native button padding (including Safari). */
.card-play,.transport button,#theme,#mute{padding:0;line-height:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;justify-content:center;align-content:center}
.card-play .site-icon,.transport .site-icon,#theme .site-icon,#mute .site-icon{display:block;margin:0;justify-self:center;align-self:center}
/* Contact and imprint follow the atelier's monochrome surfaces. */
.footer-legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.imprint-link{color:var(--fg)}.contact-section{margin:35px 5% 0;border-top:1px solid var(--line)}.contact-disclosure summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:32px 0;font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-.7px}.contact-disclosure summary::-webkit-details-marker{display:none}.contact-chevron{width:24px;height:24px;transition:transform .2s}.contact-disclosure[open] .contact-chevron{transform:rotate(180deg)}.contact-content{padding:0 0 35px;max-width:820px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-content label{display:block;font-size:12px;margin:0 0 24px;color:var(--fg)}.contact-content input,.contact-content textarea{display:block;margin-top:10px;width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:16px;font:inherit;font-size:16px}.contact-content textarea{resize:vertical;min-height:140px}.contact-content input::placeholder,.contact-content textarea::placeholder{color:var(--muted)}.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-bottom p{font-size:12px;line-height:1.7;color:var(--muted);max-width:470px;margin:0}.contact-bottom button{border:1px solid var(--line);border-radius:30px;padding:14px 32px;color:var(--muted);cursor:not-allowed}.imprint-hero{min-height:680px}.imprint-layout{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:50px;position:relative;z-index:2;padding:65px 0 90px}.imprint-heading h1{font-size:clamp(55px,7.5vw,112px);margin:25px 0;letter-spacing:-.065em}.imprint-mark{background:#000;border-radius:20px;overflow:hidden;max-width:360px;justify-self:end}.imprint-mark img{display:block;width:100%;height:auto}.imprint-page footer{margin-bottom:45px}.imprint-copy{min-height:60px}.hero-bottom{max-width:650px}.hero-bottom p{position:relative}.signature{gap:20px;min-width:0}.signature>.owner-entry{flex-shrink:0}@media(max-width:800px){.contact-section{margin-top:25px}.contact-disclosure summary{font-size:22px;padding:27px 0}.contact-grid{grid-template-columns:1fr;gap:0}.contact-bottom{align-items:flex-start;flex-direction:column;gap:18px}.footer-legal{gap:14px}.imprint-layout{grid-template-columns:1fr;gap:10px;padding:20px 0 70px}.imprint-mark{width:min(270px,75%);justify-self:center}.imprint-hero{min-height:700px}.imprint-heading h1{font-size:58px;margin-top:24px}.imprint-copy{min-height:10px}.imprint-page footer{gap:25px;flex-wrap:wrap}.signature{font-size:8.4vw}.signature .oto-logo{width:clamp(42px,12vw,65px)}.hero:not(.imprint-hero) .hero-bottom{margin-top:70px}.hero:not(.imprint-hero){min-height:670px}}
/* Transparent imprint mark: desktop artwork, compact mobile masthead. */
.imprint-mark{background:transparent;border-radius:0;overflow:visible;width:min(360px,100%);height:360px;display:grid;place-items:center}.imprint-mark img{width:100%;height:100%;object-fit:contain}
@media(max-width:800px){.imprint-layout{grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto auto auto;column-gap:20px;row-gap:0;align-items:center}.imprint-heading{display:contents}.imprint-heading>.eyebrow{grid-column:1;grid-row:1}.imprint-heading h1{grid-column:1/-1;grid-row:2;margin:20px 0 24px;font-size:clamp(44px,14vw,58px)}.imprint-copy{grid-column:1/-1;grid-row:3}.imprint-mark{grid-column:2;grid-row:1;width:64px;height:76px;max-width:none;justify-self:end}}
.imprint-mark{position:relative}.imprint-mark img{position:absolute;inset:0;min-width:0;min-height:0;max-width:100%;max-height:100%}
/* Privacy: the same quiet monochrome surfaces, with equally accessible choices. */
.privacy-open{font:inherit;color:var(--muted);text-align:left;padding:0;cursor:pointer}.footer-legal{row-gap:15px}.privacy-dialog{width:min(540px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:32px;border:1px solid var(--line);border-radius:24px;background:var(--bg);color:var(--fg);box-shadow:0 30px 100px #0005}.privacy-dialog::backdrop{background:#0008;backdrop-filter:blur(8px)}.privacy-dialog h2{font-size:42px;line-height:1.08;margin:24px 0}.privacy-dialog p{font-size:14px;color:var(--muted);line-height:1.65}.privacy-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:14px}.privacy-option small{display:block;color:var(--muted);margin-top:7px;font-size:12px;line-height:1.6}.privacy-option>span{font-size:12px;color:var(--muted)}.privacy-option input{width:22px;height:22px;flex:none;accent-color:var(--fg)}.privacy-dialog .privacy-small{font-size:12px}.privacy-small a,.privacy-document a,.contact-bottom a{text-decoration:underline;text-underline-offset:4px}.privacy-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.privacy-actions button,.privacy-button{padding:15px;border:1px solid var(--fg);border-radius:30px;color:var(--fg);background:var(--bg);font-size:13px;cursor:pointer}.privacy-actions button:hover,.privacy-button:hover{background:var(--fg);color:var(--bg)}.privacy-page .imprint-hero{padding-bottom:100px}.privacy-document{position:relative;z-index:2;max-width:850px;padding:55px 0 80px}.privacy-document h1{font-size:clamp(44px,8vw,100px);margin:30px 0;overflow-wrap:anywhere}.privacy-lead{font-size:22px}.privacy-status{padding:20px;border:1px solid var(--line);border-radius:16px;font-size:13px!important}.privacy-document section{padding:30px 0;border-bottom:1px solid var(--line)}.privacy-document h2{font-size:23px;letter-spacing:-.6px;margin:0 0 20px}.privacy-document p{line-height:1.85;font-size:15px;color:var(--muted)}.privacy-document code{overflow-wrap:anywhere}.contact-content fieldset{margin:0;padding:0;border:0;min-width:0}.contact-content fieldset:disabled input,.contact-content fieldset:disabled textarea{opacity:.5;cursor:not-allowed}@media(max-width:600px){.privacy-dialog{padding:24px}.privacy-dialog h2{font-size:36px}.privacy-actions{grid-template-columns:1fr}.privacy-document{padding-top:30px}.privacy-document h2{font-size:21px}.footer-legal{gap:16px;max-width:100%}}
/* musikkonsum — a quiet artist credit beneath the atelier name. */
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:middle;gap:.22em;line-height:1.1;letter-spacing:normal;text-transform:none;max-width:100%}.brand-lockup>.brand-name{display:block;font:inherit;font-weight:700;letter-spacing:-.055em;line-height:1}.brand-lockup>.brand-by{display:block;font-family:'DM Sans',sans-serif;font-size:max(8px,.38em);font-weight:400;letter-spacing:.03em;line-height:1.3;white-space:nowrap;color:var(--muted)}.brand{display:inline-flex;align-items:center}.brand .brand-name{font-size:24px;font-weight:800}.brand .brand-by{font-size:8px}.signature>.brand-lockup{flex:1;min-width:0;gap:.1em;padding:20px 0}.signature .brand-name{font-size:clamp(40px,10vw,160px);line-height:1.15;font-weight:800;letter-spacing:-.065em}.signature .brand-by{font-size:clamp(10px,1.35vw,20px);letter-spacing:.1em;line-height:1.5}.eyebrow>.brand-lockup{font-size:17px}.eyebrow .brand-by{font-size:8px}.footer-legal>span{display:flex;align-items:center;gap:8px}.footer-legal .brand-lockup{font-size:14px}.footer-legal .brand-by{font-size:8px}.cover-bottom .brand-lockup{font-size:12px;letter-spacing:0}.cover-bottom .brand-by{font-size:8px}.now #nowSub{display:flex;align-items:center;gap:6px}.now #nowSub .brand-lockup{display:inline-flex}.now #nowSub .brand-name{font-size:10px;margin:0}.now #nowSub .brand-by{font-size:7px;margin:0}.link{align-items:center}.link .icon-discover{align-self:center;display:block;margin:0}.privacy-dialog .eyebrow{flex-wrap:wrap}.privacy-dialog .eyebrow .brand-lockup{font-size:17px}.login-panel>span .brand-lockup{font-size:14px}@media(max-width:800px){.brand .brand-name{font-size:21px}.brand .brand-by{font-size:7px}.signature .brand-name{font-size:10vw}.signature .brand-by{font-size:10px}.signature{gap:14px}.footer-legal{align-items:center}.cover-bottom .brand-lockup{font-size:11px}}@media(max-width:370px){header nav{gap:12px}.brand .brand-name{font-size:19px}}