.box--drip{--lid:var(--sky);--lid-ink:var(--ink)}.dp{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:0;gap:18px;width:100%}.dp-board{position:relative;width:100%;max-width:calc(var(--cols) * 104px)}.dp-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.dp-cup{position:absolute;top:0;padding:0;border:0;border-radius:12px;background:0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}.dp-cup:hover{background:rgba(42,31,26,6%)}.dp-cup:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}.dp-cup.is-poured{animation:dp-pour .4s cubic-bezier(.3,1.5,.5,1)}@keyframes dp-pour{0%{background:rgba(42,31,26,.14)}100%{background:0 0}}.dp.is-solved .dp-cup{pointer-events:none}.dp-box{display:flex;justify-content:center;align-items:flex-end;gap:6px;padding:10px 14px 8px;border:var(--line);border-radius:6px;background:var(--cream);box-shadow:var(--hard-sm)}.dp-crayon{display:grid;justify-items:center;gap:4px;width:58px;padding:14px 0 0;border:0;background:0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}.dp-stick{display:block;width:24px;height:74px;rotate:var(--tilt,0deg);filter:var(--crayon-edge);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}.dp-body{--cone:26%;display:block;height:100%;background:var(--grain),linear-gradient(180deg,transparent 0 calc(var(--cone) + 10%),rgba(42,31,26,.32) 0 calc(var(--cone) + 10% + 3px),transparent 0 86%,rgba(42,31,26,.32) 0 calc(86% + 3px),transparent 0),linear-gradient(180deg,rgba(42,31,26,.16) 0 var(--cone),transparent 0),var(--c,#fff);background-blend-mode:soft-light,normal,normal,normal;clip-path:var(--crayon-v)}.dp-name{font-family:var(--label);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55}.dp-crayon:hover .dp-stick{transform:translateY(-4px)}.dp-crayon.is-picked .dp-stick{transform:translateY(-14px)}.dp-crayon.is-picked .dp-name{opacity:1;text-decoration:underline 3px;text-underline-offset:3px}.dp-crayon:focus-visible{outline:3px solid var(--blue);outline-offset:2px}@media(max-width:560px){.dp{gap:12px}.dp-box{gap:2px;padding:8px 8px 6px}.dp-crayon{width:50px}.dp-stick{width:20px;height:62px}}.dp-peek{position:absolute;bottom:0;z-index:2;cursor:zoom-in}.dp-peek__pop{position:absolute;left:50%;bottom:100%;display:grid;grid-template-columns:repeat(2,72px);gap:4px 8px;padding:10px;border:var(--line);border-radius:14px;background:var(--cream);box-shadow:var(--hard-sm);font-family:var(--label);font-size:13px;font-weight:800;letter-spacing:.05em;text-align:center;text-transform:uppercase;opacity:0;transform:translate(-50%,12px)scale(.4);transform-origin:50% 100%;transition:opacity .15s ease,transform .22s cubic-bezier(.3,1.6,.5,1);pointer-events:none}.dp-peek:hover .dp-peek__pop,.dp-peek.is-open .dp-peek__pop{opacity:1;transform:translate(-50%,-6px)scale(1)}.dp-peek__pop i{height:72px;border:var(--line);border-radius:10px;background:var(--grain),var(--c);background-blend-mode:soft-light,normal}.dp-peek__yours{--c:var(--yours)}.dp-peek__target{--c:var(--target)}.dp-peek.is-empty .dp-peek__yours{border-style:dashed;background:0 0}.dp-peek.is-match .dp-peek__pop{background:#e6f4dc}@media(prefers-reduced-motion:reduce){.dp-peek__pop{transition:none}}.preview .dp{padding:16px}.preview .dp-box,.preview .dp-peek{display:none}