*{box-sizing:border-box}body{margin:0;background:#f5f3ef;color:#292929;font:14px -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #dddddd;background:#fff}header b{letter-spacing:4px;font-size:20px}header span{display:block;font-size:9px;letter-spacing:2.5px;margin-top:6px;color:#777}nav{display:flex;gap:7px}button,.button{cursor:pointer;border:1px solid #cecece;border-radius:5px;padding:10px 14px;background:#fff;color:#363636;font:inherit;display:inline-block}button:hover,.button:hover{background:#eeeeee}.active{background:#484848!important;color:#fff}main{display:flex;height:calc(100vh - 82px)}aside{width:310px;flex-shrink:0;padding:25px;overflow:auto;border-right:1px solid #dddddd}h1{font-size:23px;font-weight:500;margin:12px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#747474}.muted,.small{color:#747474;line-height:1.7}.small{font-size:11px}.upload{display:block;background:#484848;color:white;padding:16px;text-align:center;border-radius:6px;margin-top:23px;cursor:pointer}label{display:block;font-size:12px;margin-bottom:13px}input,select{display:block;width:100%;padding:9px;border:1px solid #d1d1d1;background:#fff;border-radius:4px;margin-top:6px;color:#333333;font:inherit}.row{display:flex;gap:12px}.row label{width:50%}hr{border:0;border-top:1px solid #dadada;margin:22px 0}details{line-height:1.7;font-size:12px;margin-top:24px}summary{cursor:pointer}a{color:#505050}article{position:relative;flex:1;min-width:0;overflow:hidden;background:#e9e8e2}canvas{display:block;touch-action:none}.viewBadge{position:absolute;top:22px;left:24px;padding:10px 15px;border-radius:20px;background:#fffffff0;font-size:12px;pointer-events:none}#help{position:absolute;bottom:66px;left:24px;font-size:11px;line-height:1.8;background:#ffffffdb;padding:9px 12px;border-radius:5px;pointer-events:none}#status{position:absolute;bottom:20px;left:24px;right:140px;font-size:12px;padding:10px;background:#484848e8;color:white;border-radius:5px;pointer-events:none}#pad{position:absolute;right:20px;bottom:20px;text-align:center}#pad button{padding:10px 14px;margin:2px}section[hidden]{display:none}@media(max-width:750px){header{height:auto;min-height:100px;padding:15px;flex-wrap:wrap;gap:12px}header b{font-size:15px}nav button,nav .button{font-size:11px;padding:8px}main{height:calc(100vh - 115px)}aside{width:225px;padding:15px}h1{font-size:18px}#help{display:none}#status{right:15px;bottom:130px}}
[hidden]{display:none!important}@media(max-width:580px){header{display:block;min-height:112px;padding:12px}header span{margin-bottom:12px}nav{gap:5px}nav button,nav .button{white-space:nowrap;flex:1;text-align:center}main{display:flex;flex-direction:column;height:calc(100dvh - 112px)}aside{width:100%;height:210px;flex-shrink:0;border-right:0;border-bottom:1px solid #dddddd;padding:14px 18px}aside h1{margin:6px 0}.eyebrow{margin:0}.muted{margin:5px 0}.upload{margin-top:10px;padding:10px}article{min-height:260px}.viewBadge{left:10px;top:10px;padding:8px;font-size:10px}#status{left:10px;right:10px;bottom:108px;font-size:10px}#pad{bottom:8px;right:8px}}

nav{flex-wrap:wrap}nav button,nav .button{white-space:nowrap}@media(min-width:581px) and (max-width:1050px){header{padding:12px 18px;height:110px;gap:12px;flex-wrap:wrap}main{height:calc(100dvh - 110px)}nav{gap:5px}nav button,nav .button{font-size:12px;padding:9px 10px}}@media(max-width:580px){header{height:145px}main{height:calc(100dvh - 145px)}nav button,nav .button{flex:initial}h1{font-size:19px}}

/* Compact artwork toolbar, with editing controls available on demand on phones. */
.artwork-toolbar .upload{margin:0 0 18px;padding:12px}
#toggleControls{display:none}
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
header{flex-shrink:0}
main{flex:1;min-height:0;height:auto}
#viewport{min-height:0}
@media(max-width:580px){
 header{height:auto;min-height:0;padding:10px 12px;display:flex;flex-wrap:wrap;gap:9px}
 header span{margin:4px 0 0;font-size:8px}
 nav{width:100%;display:flex;flex-wrap:wrap;gap:4px}
 nav button,nav .button{flex:1;padding:9px 5px;font-size:10px;margin:0}
 main{height:auto;min-height:0}
 aside{height:auto;max-height:46dvh;padding:8px 12px;overflow:auto}
 .artwork-toolbar{display:flex;align-items:center;gap:8px}
 .artwork-toolbar .upload{flex:1;margin:0;padding:10px;font-size:12px}
 #toggleControls{display:block;padding:10px;font-size:12px}
 #sidebarControls{display:none;padding-top:12px}
 aside.controls-open #sidebarControls{display:block}
 #viewport{min-height:0;flex:1}
 #status{font-size:10px;line-height:1.4;padding:8px;bottom:104px}
}

/* Quiet, unboxed guidance keeps attention on the exhibition. */
#help,#status{background:none;border:0;border-radius:0;box-shadow:none;padding:0;color:#686868;font-weight:400;text-shadow:0 1px 2px #ffffffb3}
#help{font-size:10px;line-height:1.7;bottom:60px}
#status{font-size:11px;line-height:1.5;bottom:24px}
@media(max-width:750px){#status{bottom:130px}}
@media(max-width:580px){#status{font-size:10px;line-height:1.5;bottom:108px;left:12px;right:12px}}