@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;color:#e6e9e9;background:#090e12;font-size:13px}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header,footer{position:fixed;left:3.4vw;right:3.4vw;display:flex;align-items:center;justify-content:space-between;z-index:2}header{top:32px}.brand{color:inherit;text-decoration:none;letter-spacing:4px;font-size:17px}.brand span{display:block;font-size:8px;color:#859298;letter-spacing:2px;margin-top:9px}button,select{font:inherit;color:inherit;border:1px solid #ffffff24;background:#10191c99;cursor:pointer;border-radius:3px;padding:10px 14px}button:hover{border-color:#caa881;color:#efc798}button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #d8ae81;outline-offset:4px}#toggle{background:transparent;border:none;color:#b5bfc2}#toggle span{margin-left:20px}.intro{position:fixed;left:6vw;top:30%;pointer-events:none}.intro button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#b59a7c}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(42px,4.3vw,76px);font-weight:400;line-height:1.1;letter-spacing:-2px;margin:24px 0}h1 em{color:#ceae8b;font-weight:400}.intro p{line-height:1.8;color:#93a1a9;font-size:13px}.line{width:35px;height:1px;background:#a88b6d;margin:28px 0}.instructions{font-size:10px;color:#73858f;line-height:2}.primary{display:block;margin-top:26px;background:#d1b18f;color:#152027;border:none;padding:13px 17px}.primary span{margin-left:24px}.plain{display:block;margin-top:9px;border:0;background:transparent;color:#91a0a7;font-size:11px}aside{position:fixed;right:3.4vw;top:23%;width:235px;padding:23px;background:#0c1419bb;border:1px solid #ffffff12;backdrop-filter:blur(24px);border-radius:6px;max-height:68vh;overflow:auto}.panel-head{font-size:9px;letter-spacing:1.6px;margin-bottom:26px;color:#aebbbf;display:flex;justify-content:space-between}.panel-head span{color:#bc9c76;font-size:8px}aside label{display:block;font-size:11px;color:#a6b3b9;margin-top:18px}output{float:right;font-size:10px;color:#dcc3a7;font-variant-numeric:tabular-nums}input[type=range]{width:100%;display:block;margin:13px 0 0;accent-color:#d0ae88;height:3px;cursor:pointer}.select-row{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.select-row label{margin:0}.select-row select{font-size:10px;padding:6px}.buttons{display:flex;gap:7px;margin-top:20px}.buttons button{flex:1;font-size:10px;padding:8px}details{border-top:1px solid #ffffff15;margin-top:20px;padding-top:14px;font-size:10px;color:#7c919c}summary{cursor:pointer}details p{line-height:1.7}input[type=file]{display:block;font-size:9px;width:100%;margin-top:8px}.file{font-size:10px}#original{font-size:10px;margin-top:14px}footer{bottom:27px;color:#81929a;font-size:9px;letter-spacing:1px}footer i{display:inline-block;width:5px;height:5px;background:#bda382;border-radius:50%;margin-right:6px}footer button{border:0;background:transparent;font-size:10px}#message{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);max-width:80vw;background:#20292e;padding:14px 22px;border-radius:4px;display:none}#show{position:fixed;bottom:20px;right:20px;opacity:.7}.clean header,.clean main,.clean footer{display:none}[hidden]{display:none!important}@media(max-width:1050px){.intro{left:4vw}h1{font-size:42px}aside{width:210px;right:3vw}.intro p{font-size:11px}}@media(max-width:700px){header{top:20px}.brand{font-size:13px}.brand span{font-size:7px}.intro{top:auto;bottom:85px;left:6vw}.eyebrow,.intro p,.line,.instructions,.plain{display:none}h1{font-size:33px;margin:0;letter-spacing:-1px}.primary{font-size:11px;margin-top:18px;padding:10px}aside{top:80px;right:5vw;width:210px;max-height:65vh}footer{bottom:15px;font-size:8px}#metrics{display:none}}

/* Portrait composition: full landscape image with quiet perimeter controls. */
:root{background:#120e0c}.intro{left:4vw;top:auto;bottom:90px}.intro p,.line,.instructions{display:none}.eyebrow{color:#d3ad85}h1{font-size:clamp(30px,3.2vw,49px);margin:16px 0;text-shadow:0 2px 25px #000}h1 em{color:#dfb389}.primary{margin-top:18px;background:#d3ab83}aside{top:135px;width:210px;background:#18120ddd}.brand{text-shadow:0 2px 12px #000}footer{color:#b39c88}@media(max-width:700px){.intro{bottom:90px}h1{font-size:30px}aside{top:85px}.eyebrow{display:block;font-size:8px}.primary{margin-top:10px}}

.modes{margin:0 0 16px}.modes button[aria-pressed=true]{background:#d3ab83;color:#191410;border-color:#d3ab83}.orbit-label{display:flex;gap:9px;align-items:center;margin-bottom:22px}input[type=checkbox]{accent-color:#d3ab83}.hint{font-size:10px;color:#b09b85;line-height:1.7;margin:20px 0 0}aside{max-height:calc(100vh - 205px)}@media(max-width:700px){aside{max-height:calc(100dvh - 145px)}}

:root{background:#040705}h1 em{color:#b7c1a5}.eyebrow{color:#94a28a}.primary{background:#bec5b2;color:#182018}.panel-head span,output{color:#bdc8ae}aside{background:#0c130ee8}.modes button[aria-pressed=true]{background:#bac5ae;color:#152014;border-color:#bac5ae}input[type=range],input[type=checkbox]{accent-color:#bac5ae}footer,.hint{color:#879780}button:hover{border-color:#bcc9ae;color:#d6e1cb}.primary:hover{color:#142012}