.cg{box-sizing:border-box;grid-template-rows:1fr;grid-template-columns:1fr auto;gap:12px;padding:88px 14px 14px;display:grid}.cg__paper{place-items:center;min-width:0;min-height:0;display:grid;position:relative}.cg__art{place-items:center;width:100%;height:100%;display:grid;position:relative}.cg__svg{box-sizing:border-box;border:6px solid var(--ink);touch-action:none;background:#fff;border-radius:22px;display:block;box-shadow:0 8px #2a1b1f33}.cg__svg .rg{cursor:pointer;transition:fill .15s}.cg__splash{pointer-events:none;border:3px solid var(--ink);border-radius:50%;width:36px;height:36px;margin:-18px 0 0 -18px;position:absolute}.cg__crayons{border:4px solid var(--ink);background:#fffdf6cc;border-radius:26px;grid-template-columns:repeat(2,1fr);align-content:center;gap:4px 10px;padding:8px 10px;display:grid}.cg__crayon{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:clamp(40px,7vh,64px);height:clamp(74px,12vh,118px);padding:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.cg__crayon svg{width:100%;height:100%;display:block}.cg__crayon[aria-checked=true]{filter:drop-shadow(0 0 #fff)drop-shadow(4px 4px #2a1b1f4d);transform:translate(-10px)scale(1.12)}.cg__crayon:focus-visible{outline:6px solid var(--yellow);border-radius:10px}.cg__tools{top:max(10px, env(safe-area-inset-top));z-index:5;gap:12px;display:flex;position:absolute;left:50%;translate:-50%}.cg__tools .cg__tool{border-width:4px;width:64px;height:64px;position:static;translate:none;box-shadow:0 4px #2a1b1f40}.cg__picker{z-index:7;background:linear-gradient(#8fd3ff,#fff3d6);padding:96px 16px 24px;position:absolute;top:0;bottom:0;left:0;right:0;overflow:auto}.cg__picker[hidden]{display:none}.cg__grid{grid-template-columns:repeat(auto-fill,minmax(min(200px,44vw),1fr));gap:16px;width:min(1200px,100%);margin:0 auto;display:grid}.cg__pick{border:5px solid var(--ink);cursor:pointer;background:#fff;border-radius:20px;padding:0;transition:transform .18s cubic-bezier(.3,1.6,.5,1);overflow:hidden;box-shadow:0 6px #2a1b1f33}.cg__pick img{width:100%;height:auto;display:block}.cg__pick:hover{transform:translateY(-4px)rotate(-1deg)}.cg__pick:focus-visible{outline:6px solid var(--yellow);outline-offset:3px}@media (orientation:portrait){.cg{grid-template-rows:1fr auto;grid-template-columns:1fr;padding-top:150px}.cg__tools{top:84px}.cg__crayons{grid-template-columns:repeat(6,1fr);justify-items:center}.cg__crayon{width:clamp(36px,11vw,60px);height:clamp(64px,19vw,104px)}.cg__crayon[aria-checked=true]{transform:translateY(-10px)scale(1.12)}}