:root { color:#4b2d22; background:#fff8ed; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; background:#fff8ed; }
body { margin:0; min-width:320px; background:linear-gradient(180deg,#bfe8f7 0,#fff8ed 18%,#fff8ed 100%); touch-action:manipulation; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; }
.page-shell { width:min(100%,430px); min-height:100vh; margin:0 auto; overflow:hidden; background:#fff8ed; box-shadow:0 0 50px rgba(109,74,46,.1); }
.hero { position:relative; min-height:388px; overflow:hidden; background:linear-gradient(180deg,#bde8f6 0%,#fdf4e5 100%); isolation:isolate; }
.topbar { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:18px 20px 0; font-size:13px; font-weight:800; color:#6b4434; }
.topbar a { color:#8a5944; text-decoration:none; padding:8px 11px; border-radius:99px; background:rgba(255,253,248,.82); }
.hero-otters { position:absolute; z-index:0; width:148%; max-width:none; left:50%; bottom:-96px; transform:translateX(-50%); opacity:.4; mix-blend-mode:multiply; }
.hero-copy { position:relative; z-index:2; margin:49px 20px 0; padding:35px 17px; border-radius:26px; text-align:center; background:rgba(255,253,249,.94); box-shadow:0 14px 26px rgba(108,74,49,.14); }
h1,h2,h3,p { margin:0; }
h1 { font-size:31px; line-height:1.23; letter-spacing:-1px; }
h1 em { color:#ee7046; font-style:normal; }
.participation-limit { margin-top:12px; color:#9a6a57; font-size:13px; font-weight:800; letter-spacing:0; }
.reward-card { position:relative; z-index:4; margin:-23px 16px 0; padding:23px 18px 18px; border-radius:25px; background:linear-gradient(135deg,#fff7d9,#ffe3a4); box-shadow:0 12px 24px rgba(135,89,43,.12); }
.eyebrow { font-size:20px; font-weight:900; }.arrival { margin-top:5px; color:#95613a; font-size:13px; }
.reward-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:15px; }.reward-grid article { display:grid; grid-template-columns:43px 1fr; align-items:center; padding:12px; border-radius:18px; background:#fffdfa; }.reward-grid strong { font-size:26px; line-height:1; }.reward-grid small { align-self:start; font-size:13px; font-weight:800; }.reward-icon { grid-row:span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font-size:23px; }.crystal { color:#fff; background:#a878f0; }.heart { color:#fff6e1; background:#ff9773; }
.steps { padding:30px 16px 0; }.steps h2,.rules h2 { font-size:23px; letter-spacing:-.5px; }.step-card { margin-top:15px; padding:18px; border-radius:24px; background:#fffdfa; box-shadow:0 9px 23px rgba(113,77,55,.1); }.step-heading { display:flex; gap:11px; align-items:flex-start; }.step-number { flex:0 0 30px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; font-size:15px; font-weight:900; }.peach { background:#ff9170; }.blue { background:#77bfe2; }.purple { background:#b08be1; }.step-heading h3 { font-size:19px; }.step-heading p { margin-top:5px; color:#8e6859; font-size:13px; line-height:1.45; }.hint { margin:15px 4px 8px; color:#a47763; font-size:12px; }.keyword-list { display:grid; gap:8px; }.keyword-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:47px; padding:0 8px 0 14px; border-radius:14px; background:#fff1e8; font-size:15px; font-weight:800; }.keyword-row:nth-child(2) { background:#eaf6fc; }.keyword-row:nth-child(3) { background:#f4ecff; }.keyword-row button { min-width:68px; min-height:35px; border:0; border-radius:11px; color:#fff; background:#ff9a75; font-size:13px; font-weight:900; }.keyword-row:nth-child(2) button { background:#6fb9de; }.keyword-row:nth-child(3) button { background:#af8be0; }.keyword-row button.is-copied { background:#6eae79; }
.strong-line { color:#4b2d22 !important; font-size:15px !important; font-weight:700; }.comment-copy { margin-top:16px; }.comment-rule { font-size:16px; line-height:1.55; font-weight:900; }.hint.normal { margin:8px 0 0; line-height:1.45; }.activity-save-figure,.comment-example,.guide-image { margin:15px 0 0; overflow:hidden; border:4px solid #fff; border-radius:16px; box-shadow:0 5px 14px rgba(100,66,43,.16); background:#d8bcab; }.activity-save-figure img,.comment-example img,.guide-image img { display:block; width:100%; height:auto; }.activity-save-figure figcaption,.guide-image figcaption { padding:9px 10px; color:#fff8ed; background:#ad8068; text-align:center; font-size:12px; font-weight:800; line-height:1.45; }.media-heading { margin:20px 2px -3px; color:#724a39; font-size:14px; font-weight:900; line-height:1.5; }.submit-copy { margin-top:16px; padding:14px; border-radius:16px; background:#fff4e7; font-size:14px; line-height:1.6; }.submit-copy ol { margin:10px 0 6px; padding-left:20px; }.submit-copy strong { color:#ed774c; font-size:13px; }.guide-image figcaption { font-size:11px; line-height:1.4; }
.rules { margin:30px 16px 0; padding:18px; border-radius:22px; background:#fff0df; }.rules ul { margin:12px 0 0; padding-left:20px; color:#8e6859; font-size:12px; line-height:1.72; }.primary-cta { display:flex; justify-content:center; align-items:center; gap:12px; width:calc(100% - 32px); min-height:54px; margin:25px 16px 0; border:0; border-radius:27px; color:#fffdfa; background:linear-gradient(90deg,#ff8a57,#f26947); box-shadow:0 10px 19px rgba(232,99,67,.22); font-weight:900; }.primary-cta span { font-size:20px; }footer { padding:25px 22px calc(29px + env(safe-area-inset-bottom)); color:#a57a68; font-size:10px; line-height:1.6; text-align:center; }.toast { position:fixed; z-index:10; left:50%; bottom:28px; max-width:calc(100vw - 40px); padding:11px 15px; border-radius:99px; color:#fff; background:rgba(59,40,30,.88); font-size:13px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.2s ease; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.client-back { position:fixed; z-index:20; top:calc(10px + env(safe-area-inset-top)); left:14px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; color:#6b4434; background:rgba(255,253,248,.9); box-shadow:0 4px 13px rgba(77,47,32,.14); font-size:32px; line-height:1; }@media (min-width:431px) { body { padding:20px 0; }.page-shell { border-radius:30px; }.client-back { left:max(14px,calc(50% - 215px)); } }