*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000000;color:#e1eee6;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans",sans-serif;font-synthesis:none;color-scheme:dark}.stage{position:relative;height:100dvh;min-height:390px;background:#000000;overflow:hidden}.art-top{position:absolute;z-index:1;top:5.5%;left:4.3%;right:4.3%;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.title-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}h1{font-weight:400;font-size:clamp(15px,1.5vw,22px);letter-spacing:.05em;margin:0}h1 span{white-space:nowrap}.art-top p{font-size:10px;letter-spacing:.12em;color:#a0b8b7;margin:12px 0 0}#art-date{font-size:12px;color:#a0b8b7;white-space:nowrap;font-variant-numeric:tabular-nums}#membrane{position:absolute;left:0;right:0;top:23%;bottom:29%}canvas{display:block;width:100%;height:100%}.art-bottom{position:absolute;left:4.3%;right:4.3%;bottom:12%;display:grid;grid-template-columns:1fr 1fr 1.8fr;gap:6%;align-items:end}.reading small,.composition>small{display:block;font-size:11px;color:#a0b8b7;margin-bottom:12px}.reading small span{font-size:9px;margin-left:6px}.reading strong{font-size:clamp(27px,3.3vw,52px);font-weight:350;line-height:1.08;font-variant-numeric:tabular-nums;letter-spacing:-.025em}.reading div>span{font-size:11px;color:#a0b8b7}.ratio-bar{display:flex;gap:2px;height:3px;margin-bottom:14px}.ratio-bar i{display:block;background:#6abca9}.ratio-bar i:nth-child(2){background:#b5d4c6}.ratio-bar i:nth-child(3){background:#da9c80}.legend{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#a0b8b7}.legend span{display:flex;flex-direction:column;gap:8px;white-space:nowrap}.legend b{font-size:clamp(14px,1.5vw,23px);font-weight:400;font-variant-numeric:tabular-nums;color:#e1eee6}.controls{position:absolute;bottom:3.5%;left:4.3%;right:4.3%;display:flex;align-items:center;gap:20px;font-size:11px}button,a{font:inherit;color:inherit;touch-action:manipulation}button{cursor:pointer;background:none;border:0;padding:10px 0;min-height:40px;white-space:nowrap}#about-artwork{font-size:11px;color:#a0b8b7;padding:0;min-height:36px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #6abca9;outline-offset:4px}#time{min-width:0;flex:1;max-width:350px;accent-color:#6abca9;height:24px}.error{position:absolute;top:40%;left:10%;right:10%;font-size:13px;text-align:center}dialog{width:min(700px,calc(100vw - 36px));max-height:calc(100dvh - 36px);padding:0 34px 28px;border:1px solid #344c46;background:#08100e;color:#e1eee6;overflow-y:auto;overscroll-behavior:contain}dialog::backdrop{background:#000000b3}dialog header{position:sticky;top:0;z-index:1;background:#08100e;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #344c46;font-size:10px;letter-spacing:.1em;padding:10px 0;margin-bottom:24px}dialog h2{font-size:28px;font-weight:400;margin:0 0 18px}dialog p{font-size:13px;line-height:2.05;margin:16px 0}dialog .lead{font-size:18px}dialog section{border-top:1px solid #344c46;margin-top:24px;padding-top:20px}dialog h3{font-size:14px;font-weight:500}dialog dl{font-size:13px;line-height:2}dialog dt{margin-top:14px}dialog dd{margin:3px 0 0}dialog details{margin-top:24px;font-size:12px}dialog summary{cursor:pointer;padding:12px 0}dialog a{text-underline-offset:3px}.more{border-top:1px solid #344c46;padding-top:20px}
@media(max-width:700px){.art-top{left:6%;right:6%;top:4%;display:block}.title-row{gap:4px 14px}#art-date{display:block;margin-top:10px;font-size:10px}.art-top p{font-size:9px;margin-top:2px}.art-bottom{left:6%;right:6%;bottom:12%;grid-template-columns:1fr 1fr;row-gap:23px;column-gap:5%}.reading small span{display:block;margin:5px 0 0}.reading strong{font-size:32px}.composition{grid-column:1/-1}.composition>small{margin-bottom:10px}.legend span{flex-direction:row;align-items:center;gap:6px;font-size:9px}.legend b{font-size:12px}.ratio-bar{margin-bottom:10px}#membrane{top:26%;bottom:44%}.controls{left:6%;right:6%;bottom:3%;gap:15px;font-size:10px}dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:0 20px 24px}dialog h2{font-size:23px}}
@media(max-height:480px) and (min-width:701px){.stage{min-height:0}.art-top{top:2%}.art-bottom{bottom:15%;grid-template-columns:1fr 1fr 1.8fr;gap:3%}.composition{grid-column:auto}.reading strong{font-size:23px}.reading small,.composition>small{margin-bottom:6px;font-size:9px}.reading small span{display:none}.legend span{flex-direction:column;gap:3px}.legend b{font-size:11px}#membrane{top:28%;bottom:35%}.controls{bottom:0}.art-top p,#art-date{font-size:9px}.ratio-bar{margin-bottom:6px}}