*{box-sizing:border-box}body{margin:0;background:#29241e;color:#ebd7b2;font-family:system-ui}main{max-width:540px;margin:auto;padding:10px}header{display:flex;justify-content:space-between;align-items:center;height:30px}header span{font-size:12px;color:#bfa980}section{text-align:center}section[hidden],button[hidden]{display:none}h1{font-family:serif;font-size:20px;margin:12px 0}h2{font-size:17px;margin:6px 0}p{font-size:13px;line-height:1.5;margin:6px 0}.eyebrow{color:#c6a15b}#cover{height:47dvh;width:auto;max-width:100%;object-fit:contain;display:block;margin:auto}#art{width:72%;height:auto;max-height:58vh;object-fit:contain}.target-preview{display:flex;align-items:center;text-align:left;justify-content:center;gap:12px;margin:12px auto;max-width:355px}.target-preview canvas{width:96px;height:70px;object-fit:contain;flex-shrink:0}.target-preview small{font-size:12px;color:#bfa980}.target-preview p{font-size:12px}button{background:#493c2e;border:1px solid #b49b6b;color:#f3dfbc;border-radius:8px;padding:11px 13px;margin:4px;font-size:14px}button.primary{background:#aa533b;border-color:#cf9271;color:#fff2d7}#enter{display:block;width:92%;max-width:355px;margin:8px auto;font-size:17px;font-weight:600}button:disabled{opacity:.5}.actions{display:flex;flex-wrap:wrap;justify-content:center;margin-top:6px}.task-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}.task-heading h2{font-size:16px}.task-heading span{font-size:12px}#hint{font-size:13px;margin:3px 0 8px}#viewport{height:66dvh;overflow:hidden;display:flex;justify-content:center;background:#332b23}#mural{height:100%;width:auto;touch-action:none;transition:transform .8s cubic-bezier(.65,0,.35,1)}progress{display:block;width:95%;height:8px;margin:10px auto 0;accent-color:#b74d38}footer{font-size:11px;text-align:center;margin:9px 0;color:#c1ad89}.work-info{font-size:12px;margin:14px 0;color:#c1ad89}.work-info p{font-size:12px}.comparison{display:flex;gap:10px;justify-content:center}.comparison figure{width:46%;margin:0}.comparison canvas{width:100%;height:150px;object-fit:contain}.comparison figcaption{font-size:12px}#round-result{padding:25px 0}#round-result .comparison canvas{height:210px}.dev-panel{font-size:12px;border-top:1px solid #74634d;padding:10px 0}@media(max-width:340px){main{padding:8px}h1{font-size:18px}.target-preview{gap:8px}.target-preview h2{font-size:15px}#viewport{height:63dvh}button{padding:10px 11px;font-size:13px}.task-heading span{font-size:11px}}#viewport{height:62dvh}#hint{min-height:20px}.actions button{margin:3px;padding:10px}#card #art{width:82%;max-height:62vh}#card .comparison canvas{height:120px}#color-clue[hidden]{display:none}#color-clue{display:flex;align-items:center;gap:10px;margin:0 0 8px;text-align:left;justify-content:center;height:52px}#clue-sample{width:60px;height:44px;object-fit:contain;border:1px solid #8c7350;border-radius:5px}#color-clue b{display:block;font-size:14px;color:#e5b189}#color-clue span{display:block;font-size:12px}#studio:has(#color-clue:not([hidden])) #viewport{height:54dvh}.collection-tabs{display:flex;justify-content:center;gap:4px}.collection-tabs button{font-size:14px;padding:10px;margin:2px}.collection-tabs [aria-pressed=true]{background:#8e4733;border-color:#d6b578}#view-note{min-height:38px;font-size:13px;color:#e1bc87;max-width:340px;margin:8px auto}#comparisons[hidden]{display:none}@media(max-width:340px){#color-clue span{font-size:11px}.collection-tabs button{font-size:13px;padding:9px 7px}}.open-content{font-size:13px;color:#d8bb88}.completion-note{font-size:15px;color:#edd299;border-bottom:1px solid #a98a54;padding:8px;margin:6px 0 12px;animation:quiet-arrival .7s ease-out}.completion-arrival .eyebrow{animation:quiet-arrival 1s ease-out}@keyframes quiet-arrival{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.completion-note,.completion-arrival .eyebrow{animation:none}}#record-details{margin:14px 0}#record-details summary,.secondary-actions summary{font-size:13px;padding:10px;color:#cdb88d}#make-share{display:block;width:92%;margin:10px auto;font-size:16px}.share-caption{font-size:12px;color:#bca987}#share-image{display:block;max-width:85%;height:58dvh;object-fit:contain;margin:12px auto}#download-card{display:inline-block;padding:12px;border:1px solid #c6a15b;border-radius:8px;color:#ebd7b2;text-decoration:none;font-size:14px;margin:5px}.secondary-actions{margin:8px auto}#cover{height:44dvh}#card #art{max-height:54dvh}#share-message{font-size:12px}body{padding-bottom:env(safe-area-inset-bottom,0px)}