:root {
  --dw-bg: #ffd23f; --dw-fg: #111; --dw-accent: #ff3e7f; --dw-panel: rgba(17, 17, 17, .96);
  --dw-font-body: 'IBM Plex Mono', ui-monospace, monospace; --display: 'Bowlby One', Impact, sans-serif;
  --pink: #ff3e7f; --blue: #2f6bff; --ink: #111; --paper: #fffdf4;
}
body { overflow-x: hidden; background-image: radial-gradient(#11111114 1.5px, transparent 1.5px); background-size: 18px 18px; }
.dw-toast { color: #fffdf4; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 3px solid var(--ink); background: var(--dw-bg); position: sticky; top: 0; z-index: 40; }
.brand { font-family: var(--display); font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--pink); }
.tally { font-weight: 600; font-size: .9rem; margin-left: auto; }
.tally b { background: var(--ink); color: var(--dw-bg); padding: .1em .5em; border-radius: 4px; }
@media (max-width: 480px) { .tally { display: none; } }

.lab { max-width: 860px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 16px 70px; position: relative; }
.big { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 15vw, 9rem); line-height: .85; margin: 0; letter-spacing: -.02em; text-shadow: 6px 6px 0 var(--pink); }
.sub { font-size: 1.05rem; max-width: 56ch; margin: 1rem 0 2rem; }

.dare { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: clamp(18px, 4vw, 34px); box-shadow: 10px 10px 0 var(--ink); position: relative; }
.dare::before, .dare::after { content: ''; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: var(--dw-bg); border: 3px solid var(--ink); transform: translateY(-50%); }
.dare::before { left: -15px; clip-path: inset(0 0 0 50%); } .dare::after { right: -15px; clip-path: inset(0 50% 0 0); }
.dare.flip { animation: flip .5s ease; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(80deg); } 100% { transform: rotateX(0); } }
.dare-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: .8rem; letter-spacing: .12em; border-bottom: 2px dashed #11111144; padding-bottom: .7rem; }
.no { color: var(--pink); }
.dare h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.02; margin: 1rem 0 .6rem; }
.instr { font-size: 1.08rem; line-height: 1.55; margin: 0 0 1rem; }
.result { background: var(--ink); color: var(--dw-bg); padding: .9rem 1.1rem; border-radius: 10px; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2rem; }
.b { font-family: var(--dw-font-body); font-weight: 600; font-size: .95rem; padding: .8em 1.2em; border-radius: 999px; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: transform .12s; }
.b:hover { transform: translateY(-2px) rotate(-1deg); }
.b-do { background: var(--pink); color: #fff; }
.b-share { background: var(--blue); color: #fff; }
.share-note { font-size: .85rem; min-height: 1.2em; margin: .6rem 0 0; word-break: break-all; }

.widget:empty { display: none; }
.widget { margin: .4rem 0 1rem; }
.w-box { display: grid; place-items: center; height: 220px; border-radius: 12px; border: 3px solid var(--ink); background: #fff; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.w-shape { width: 150px; height: 150px; border-radius: 30% 70% 60% 40% / 40% 40% 60% 60%; background: #00a6a6; position: relative; }
.w-shape::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #111; }
.w-box.white .w-shape { visibility: hidden; }
.w-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #111; }
.w-count { position: absolute; bottom: 8px; right: 12px; font-weight: 600; }
.w-react { cursor: pointer; font-family: var(--display); font-size: 1.5rem; color: #fff; background: #c23; text-align: center; padding: 1rem; }
.w-react.go { background: #1a9b4b; }
.w-react.idle { background: var(--ink); }
.w-btn { margin-top: .6rem; }
.stroop { display: flex; flex-wrap: wrap; gap: .4em 1em; font-family: var(--display); font-size: clamp(1.3rem, 4vw, 1.9rem); padding: 1rem; border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
.fs-text { font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; padding: 1rem; border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
.fs-row { display: flex; gap: 8px; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.fs-row input { width: 5em; font: inherit; padding: .5em; border: 3px solid var(--ink); border-radius: 8px; }
.tri { width: 220px; aspect-ratio: 1.15; margin: 0 auto; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--ink); color: var(--dw-bg); display: grid; place-items: end center; padding: 0 0 22px; text-align: center; font-weight: 600; line-height: 1.25; font-size: .95rem; }

.done-wrap { margin-top: 3rem; }
.done-wrap h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; }
.notebook { margin: 0; padding-left: 1.4em; }
.notebook li { margin: .3em 0; }
.empty { opacity: .7; }
.ghost-secret { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.more-sec { background: var(--ink); color: var(--paper); padding: clamp(48px, 7vw, 90px) clamp(16px, 5vw, 64px); }
.grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
.box { border: 3px solid var(--paper); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
.box-y { background: var(--dw-bg); color: var(--ink); border-color: var(--dw-bg); }
.box h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 .5rem; }
.dw-optin input[type=email] { background: #fff; border: 3px solid var(--ink); color: var(--ink); }
.dw-optin button[type=submit] { background: var(--pink); color: #fff; border: 3px solid var(--ink); font-family: var(--dw-font-body); }
.offer-note { margin: 0; font-weight: 600; color: var(--pink); }
.offers { display: grid; gap: 10px; }
.offer { display: grid; gap: .2rem; text-align: left; font: inherit; color: var(--paper); background: transparent; border: 2px solid #fffdf455; border-radius: 12px; padding: .9em 1em; cursor: pointer; }
.offer:hover, .offer:focus-visible { border-color: var(--dw-bg); color: var(--dw-bg); }
.offer small { opacity: .75; }
.found { margin-top: 1.6rem; font-weight: 600; color: var(--dw-bg); }
.reward { padding: .8rem 1rem; border: 2px dashed var(--dw-bg); border-radius: 10px; }
.journal li { margin: .5em 0; font-size: .92rem; }
.foot { padding: 30px 16px 10px; text-align: center; border-top: 3px solid var(--ink); }
.more { font-weight: 600; font-size: .9rem; }
.more a { color: var(--ink); }
.fine { cursor: pointer; border-bottom: 2px dotted currentColor; }