:root{font-family:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#49342B;background:#FFF8ED;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:650px;margin:auto;padding:24px 18px max(24px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:1px}a{color:inherit}header a{text-decoration:none;letter-spacing:0}.intro{padding:36px 0 22px}.eyebrow{font-size:13px;font-weight:700;color:#89634D}h1{font-size:clamp(48px,12vw,72px);letter-spacing:-4px;line-height:1.15;margin:12px 0}h1 em{font-style:normal;background:#FFE18B;display:inline-block;transform:rotate(-4deg);padding:0 10px;border-radius:8px}h1 span{font-size:60px;color:#A94E27;margin-left:20px}.intro p{color:#806657;font-size:14px}.steps{display:flex;justify-content:space-between;font-size:11px;color:#806657;margin:0 0 14px;gap:5px}.steps b{color:#A94E27}.panel{background:white;border:1px solid #F0DCC6;border-radius:20px;padding:22px;margin-bottom:16px;box-shadow:0 4px 0 #F4E6D5}h2{font-size:18px;letter-spacing:-.5px;margin:0 0 18px}.tabs{display:flex;background:#FFF0DC;padding:4px;border-radius:12px;margin-bottom:22px}.tabs button{flex:1;border:0;background:transparent}.tabs .selected{background:#FFD56A;color:#54351F;box-shadow:0 2px 4px #0002}button,input,select{font:inherit;font-size:14px;border:1px solid #EAD7BF;border-radius:10px;padding:12px;min-height:44px}button{cursor:pointer;background:#FFF5E5;color:#54351F;font-weight:700;touch-action:manipulation}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e6b82e;outline-offset:3px}input:not([type=range]),select{width:100%;background:#FFFCF5;color:#49342B}label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}small{font-weight:400;color:#806657;margin-left:6px;font-size:11px}.hint{font-size:11px;line-height:1.6;color:#806657;margin:9px 0 18px}.row{display:flex;gap:8px;align-items:center}.row>*{min-width:0}.row input{flex:1}.row button{flex-shrink:0}.between{justify-content:space-between}.between h2{margin:0;font-size:16px}.tag{font-size:10px;padding:5px 8px;background:#FFE9B3;border-radius:20px;white-space:nowrap}.palette{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 16px}.swatch{width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;border:2px solid #0001}.swatch[aria-pressed=true]{outline:2px solid #A94E27;outline-offset:3px}.tools{flex-wrap:wrap;margin-bottom:16px;gap:6px}.tools button{font-size:11px;padding:8px}.tools label{margin:0 0 0 5px;font-size:11px}.tools input{width:65px;max-width:95px;padding:0;accent-color:#A94E27}.tools [aria-pressed=true]{background:#FFE2C5;border-color:#A94E27}canvas{display:block;width:100%;height:auto;aspect-ratio:1;background:white;border:1px solid #E9D1B5;border-radius:12px;touch-action:none;cursor:crosshair}img{display:block;width:100%;border:1px solid #E9D1B5;border-radius:12px;margin:14px 0}.drawing .hint{margin-bottom:0}.primary{background:#FFD56A;color:#54351F;border-color:#E9BC4F}.wide{display:block;width:100%;padding:17px;text-align:center}.bottomNote{font-size:11px;line-height:1.7;color:#806657;text-align:center;margin:14px 0}.notice{padding:14px;background:#fff1c4;border:1px solid #e8d287;border-radius:12px;font-size:13px;margin-bottom:16px}#shared{text-align:center}#shared .row{margin:14px 0}#shared .row button{flex:1}#shared label{text-align:left}.textLink{display:block;margin:20px;cursor:pointer}.celebrate{font-size:44px;margin:16px 0}#success{text-align:center;background:#FFF0CF;border-radius:12px;padding:10px}.textButton{border:0;text-decoration:underline;background:transparent;font-size:12px}.linkButton{text-decoration:none;border-radius:12px;font-weight:700}footer{text-align:center;font-size:10px;color:#89634D;letter-spacing:1px;padding:34px 0 8px}[hidden]{display:none!important}#randomTools{margin-bottom:16px}#guessResult{font-size:14px;font-weight:700;line-height:1.6}@media(max-width:380px){main{padding:18px 12px}.panel{padding:16px}.steps{font-size:10px}.tools{gap:4px}}

.giraffe-title{font-size:clamp(23px,6.5vw,42px);letter-spacing:-1.5px;line-height:1.65}.giraffe-title em{padding:0 7px;transform:rotate(-2deg)}

/* Large drawing surface and iOS scroll containment. */
html{overscroll-behavior-y:none}input:not([type=range]),select{font-size:16px}
.open-editor{margin:8px 0 14px}.drawing{padding:14px}.canvas-stage{min-width:0;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#canvas{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#drawEditor{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#FFF5E4;color:#49342B;overflow:hidden;overscroll-behavior:none;touch-action:none}
#drawEditor::backdrop{background:#FFF5E4}
#drawEditor .drawing{display:flex;flex-direction:column;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;background:#FFF5E4;padding:max(8px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));gap:8px;overflow:hidden}
#drawEditor .between{padding:0 7px;min-height:44px}#drawEditor .between h2{font-size:14px}#drawEditor .tag{display:none}
#closeEditor{background:#FFD56A;color:#54351F;border:0;padding:10px 16px}
#drawEditor .palette{margin:0;justify-content:center;gap:7px;flex-shrink:0;padding:5px 0}
#drawEditor .swatch{width:31px;height:31px;min-height:31px}
#drawEditor .tools{margin:0;justify-content:center;flex-shrink:0}
#drawEditor .tools button{padding:7px;min-height:40px}
#drawEditor .canvas-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#drawEditor #canvas{flex:none;max-width:100%;max-height:100%;border-radius:4px;background:#fff}
#drawEditor #draftStatus{margin:0;text-align:center;font-size:10px;line-height:1.5;min-height:15px;flex-shrink:0}
html.draw-scroll-locked{overflow:hidden!important;overscroll-behavior:none}
@media (orientation:landscape) and (max-height:600px){
 #drawEditor .drawing{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:8px}
 #drawEditor .between{grid-column:1;grid-row:1}#drawEditor .palette{grid-column:1;grid-row:2;flex-wrap:wrap;padding:8px}
 #drawEditor .tools{grid-column:1;grid-row:3;align-content:start;align-self:start;padding:8px;flex-wrap:wrap}
 #drawEditor .canvas-stage{grid-column:2;grid-row:1/5;height:100%}#drawEditor #draftStatus{grid-column:1;grid-row:4}
}

/* Warm cream, sunny yellow and peach drawing theme. */
.intro .eyebrow{color:#A94E27}.panel{box-shadow:0 4px 0 #F7E6CF}.notice{background:#FFF0D8;border-color:#EDCB99}.giraffe-title em{background:#FFE18B}#success{border:1px solid #F3D796}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#B7542F}