:root{--ink:#25231f;--muted:#756e64;--paper:#fffaf2;--orange:#ff702f;--line:rgba(80,55,34,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6efe5;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}button,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}main{min-height:100vh;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 0,#fffdf9 0,#fbf5ec 42%,#f3eadc 100%)}[hidden]{display:none!important}
.ambient{position:absolute;border-radius:50%;opacity:.45;pointer-events:none}.ambient-one{width:340px;height:340px;background:#ffd8a2;left:-190px;top:220px}.ambient-two{width:300px;height:300px;background:#ffe3d6;right:-180px;top:620px}
.nav-shell{width:min(1180px,calc(100% - 48px));height:78px;margin:22px auto 0;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(255,252,247,.82);box-shadow:0 16px 45px rgba(73,49,28,.07);backdrop-filter:blur(16px);position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:linear-gradient(145deg,#ff864b,#ef4d24);box-shadow:0 7px 16px rgba(241,84,34,.25),inset 0 1px 0 rgba(255,255,255,.4)}.brand strong{display:block;font-size:18px;letter-spacing:.04em}.brand small{display:block;margin-top:2px;font-size:11px;color:#91887c}.nav-shell nav{display:flex;align-items:center;gap:38px;font-size:14px}.nav-shell nav a{position:relative;padding:12px 0;color:#6d665d}.nav-shell nav a:hover,.nav-shell nav a.active{color:#e85427}.nav-shell nav a.active:after{content:"";height:3px;width:18px;background:#f36732;border-radius:99px;position:absolute;bottom:3px;left:50%;transform:translateX(-50%)}.saved-link{min-width:106px;height:40px;border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px}.saved-link b{background:#fff0e8;color:#ed5a2a;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:11px}
.hero{width:min(1040px,calc(100% - 44px));margin:0 auto;padding:76px 0 40px;position:relative;z-index:2;text-align:center}.eyebrow{color:#8d8174;font-size:13px;letter-spacing:.08em;display:inline-flex;align-items:center;gap:10px}.eyebrow i{width:22px;height:1px;background:#f3955a}.eyebrow span{color:#f2a22d;font-size:18px}.hero h1{margin:14px 0 12px;font-family:"STKaiti","KaiTi","Microsoft YaHei",sans-serif;font-size:clamp(48px,7vw,84px);line-height:1.08;letter-spacing:-.06em}.hero h1 em{color:var(--orange);font-style:normal;position:relative}.hero h1 em:after{content:"";position:absolute;left:5%;right:0;bottom:-6px;height:10px;border-top:4px solid #f6b632;border-radius:50%;transform:rotate(-2deg)}.hero-copy{margin:0;color:#686159;font-size:17px;letter-spacing:.03em}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:46px auto 22px}.mode-card{border:1px solid rgba(100,76,54,.08);min-height:128px;border-radius:25px;padding:20px 20px 20px 24px;display:grid;grid-template-columns:66px 1fr 34px;gap:15px;align-items:center;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.mode-card:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-48px;bottom:-75px;background:rgba(255,255,255,.35)}.mode-card.honey{background:linear-gradient(135deg,#fff6da,#ffebca)}.mode-card.mint{background:linear-gradient(135deg,#e3f4f0,#d1ebe5)}.mode-card.coral{background:linear-gradient(135deg,#ffe7dc,#ffd5c6)}.mode-card:hover{transform:translateY(-4px);box-shadow:0 16px 26px rgba(74,51,31,.11)}.mode-card.selected{border-color:rgba(238,92,39,.38);box-shadow:0 14px 28px rgba(238,92,39,.13),inset 0 0 0 2px rgba(255,255,255,.45);transform:translateY(-3px)}.mode-emoji{font-size:46px;filter:drop-shadow(0 8px 7px rgba(105,68,36,.14));position:relative;z-index:1}.mode-card b{display:block;font-size:19px;margin-bottom:7px}.mode-card small{color:#736b62;font-size:12px}.mode-card i{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.82);display:grid;place-items:center;font-style:normal;color:#e35b2f;box-shadow:0 3px 8px rgba(71,46,27,.07)}
.random-panel{border:1px solid rgba(255,255,255,.8);border-radius:26px;background:rgba(255,252,247,.76);box-shadow:0 17px 45px rgba(65,45,28,.07);padding:18px 22px 20px;backdrop-filter:blur(12px)}.filter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.filter-row label{min-width:0;height:52px;display:grid;grid-template-columns:28px auto 1fr;align-items:center;gap:6px;padding:0 11px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.68)}.filter-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:17px;background:#fff7ec;color:#d96131}.filter-label{font-weight:600;font-size:13px;white-space:nowrap}.filter-row select{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#8c8379;font-size:12px}.roll-button{margin:22px auto 0;width:244px;height:58px;border:0;border-radius:18px;background:linear-gradient(100deg,#ff9e43 0,#ff6f32 58%,#ef4f27 100%);color:#fff;font-weight:700;font-size:18px;letter-spacing:.08em;display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;box-shadow:0 13px 25px rgba(237,86,37,.27),inset 0 1px 0 rgba(255,255,255,.38);transition:transform .2s,box-shadow .2s}.roll-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 17px 32px rgba(237,86,37,.33)}.roll-button b{font-size:20px}.roll-button.rolling b{animation:tumble .52s ease infinite}@keyframes tumble{50%{transform:rotate(160deg) scale(1.2)}100%{transform:rotate(360deg)}}.microcopy{margin:10px 0 0;color:#aaa095;font-size:11px}
.result-card{max-width:820px;margin:24px auto 0;border-radius:28px;padding:15px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(76,47,27,.13);display:grid;grid-template-columns:235px 1fr;gap:8px;text-align:left}.result-card.revealing{animation:reveal .55s cubic-bezier(.2,.8,.2,1)}@keyframes reveal{from{opacity:0;transform:translateY(18px) scale(.98)}}.result-art{min-height:250px;border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--task-color) 22%,white),color-mix(in srgb,var(--task-color) 58%,#fff4e5));display:grid;place-items:center;position:relative;overflow:hidden}.result-art:before{content:"";width:150px;height:150px;border-radius:46% 54% 60% 40%;background:rgba(255,255,255,.58);position:absolute;transform:rotate(18deg)}.result-art b{font-size:92px;position:relative;filter:drop-shadow(0 14px 12px rgba(106,59,25,.15))}.spark{position:absolute;color:#fff;font-size:28px}.s1{top:25px;left:28px}.s2{right:35px;top:42px}.s3{bottom:26px;right:28px}.result-content{padding:12px 17px 10px 20px;display:flex;flex-direction:column}.result-kicker{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#e66b33}.result-kicker button{border:0;background:#fff2ec;color:#e85a31;border-radius:99px;padding:7px 11px;cursor:pointer}.result-content h2{font-size:25px;line-height:1.45;margin:16px 0 12px}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{padding:5px 10px;font-size:11px;border-radius:99px;background:#f6f1ea;color:#756d63}.tags span:nth-child(2){background:#fff0e5;color:#df6a32}.tags span:nth-child(3){background:#edf5e8;color:#658354}.result-content>p{margin:14px 0 16px;color:#7d7469;font-size:12px;line-height:1.7}.result-content>p i{color:#f4a51c;font-style:normal}.result-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:auto}.result-actions button{height:44px;border-radius:13px;cursor:pointer;font-weight:600;border:1px solid #e9ddd0;background:#fff}.result-actions .done{border:0;color:#fff;background:linear-gradient(100deg,#ff9642,#f45b28)}
.promise-strip{width:min(1040px,calc(100% - 44px));margin:12px auto 0;padding:22px 28px;border-top:1px dashed rgba(108,79,53,.18);border-bottom:1px dashed rgba(108,79,53,.18);display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}.promise-strip>div{display:flex;align-items:center;justify-content:center;gap:11px;border-right:1px solid var(--line)}.promise-strip>div:last-child{border:0}.promise-strip>div>span{color:#efa52f;font-size:24px}.promise-strip b,.promise-strip small{display:block}.promise-strip b{font-size:13px}.promise-strip small{font-size:10px;color:#91877b;margin-top:3px}
.inspiration{width:min(1120px,calc(100% - 44px));margin:0 auto;padding:100px 0 70px;position:relative;z-index:2}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}.section-heading span,.section-label{color:#ef6d35;font-size:12px;font-weight:700;letter-spacing:.14em}.section-heading h2,.how h2,.saved-section h2{margin:7px 0 0;font-size:clamp(28px,4vw,40px);letter-spacing:-.04em}.section-heading button{border:0;color:#e96231;background:#fff5ed;border-radius:99px;padding:11px 16px;cursor:pointer}.idea-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.idea-card{min-height:270px;padding:22px;border-radius:23px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.64);box-shadow:0 12px 35px rgba(62,44,28,.055);display:flex;flex-direction:column;transition:transform .25s,background .25s}.idea-card:hover{transform:translateY(-5px) rotate(-.3deg);background:rgba(255,255,255,.9)}.idea-card>div{display:flex;justify-content:space-between;align-items:center}.idea-card>div span{width:58px;height:58px;border-radius:18px;background:#fff0df;display:grid;place-items:center;font-size:30px}.idea-card>div small{color:#9e9387;background:#f6f0e8;padding:5px 9px;border-radius:99px}.idea-2>div span,.idea-5>div span{background:#e3f2ed}.idea-3>div span,.idea-6>div span{background:#ffe5dc}.idea-card h3{margin:20px 0 9px;font-size:18px;line-height:1.5}.idea-card p{margin:0;color:#847a6f;font-size:12px;line-height:1.7}.idea-card footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center}.idea-card footer span{color:#a29589;font-size:11px}.idea-card footer button{border:0;background:transparent;color:#ed6d3e;font-size:22px;cursor:pointer}
.how{width:min(1120px,calc(100% - 44px));margin:20px auto 90px;border-radius:32px;padding:48px 45px;background:linear-gradient(120deg,#fff7e4,#fbe7cf);border:1px solid rgba(255,255,255,.8);display:grid;grid-template-columns:200px 1fr 1.3fr;gap:40px;align-items:center;box-shadow:0 25px 60px rgba(78,51,27,.08);position:relative;z-index:2}.note-card{height:174px;padding:35px 23px 18px;background:#ffe8a4;transform:rotate(-3deg);box-shadow:0 12px 20px rgba(81,54,29,.12);position:relative;font-family:"KaiTi",serif}.tape{position:absolute;width:70px;height:23px;left:50%;top:-12px;transform:translateX(-50%) rotate(3deg);background:rgba(255,244,209,.75)}.note-card p{margin:0 0 12px;font-size:21px;line-height:1.4}.note-card small{font-size:13px;color:#76654c}.how-copy>p{color:#766d63;font-size:13px;line-height:1.8}.how ol{list-style:none;padding:0;margin:0;display:grid;gap:11px}.how li{border-radius:15px;background:rgba(255,255,255,.63);padding:13px 16px;display:flex;align-items:center;gap:13px}.how li>b{color:#ee6c34;font-size:11px;width:31px;height:31px;border-radius:10px;background:#fff0e7;display:grid;place-items:center}.how li strong,.how li small{display:block}.how li strong{font-size:13px}.how li small{margin-top:3px;color:#8d8275;font-size:10px}
.saved-section{width:min(1120px,calc(100% - 44px));margin:0 auto 80px;display:grid;grid-template-columns:1fr 1.2fr;gap:45px;align-items:center;position:relative;z-index:2}.saved-section>div:first-child>span{color:#ef6d35;font-size:12px;font-weight:700}.saved-section p{color:#81766a;font-size:13px}.saved-chips{border-radius:26px;background:rgba(255,255,255,.58);border:1px dashed rgba(120,87,59,.23);min-height:160px;padding:20px;display:flex;flex-wrap:wrap;gap:8px;align-content:center;justify-content:center}.saved-chips button{border:0;border-radius:99px;padding:10px 13px;background:#fff0e9;color:#d95e35;font-size:11px;cursor:pointer}.saved-chips>span{color:#a69b8e;font-size:13px}.site-footer{border-top:1px solid rgba(92,67,45,.1);width:min(1180px,calc(100% - 44px));margin:auto;padding:30px 0 40px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.site-footer p{color:#a1988d;font-size:11px}
@media(max-width:820px){.nav-shell{width:calc(100% - 24px);margin-top:12px;padding:0 14px;height:68px;border-radius:18px}.nav-shell nav{display:none}.saved-link{min-width:42px;width:42px}.saved-link>span{display:none}.brand small{display:none}.hero{width:calc(100% - 24px);padding-top:54px}.hero h1{font-size:52px}.hero-copy{font-size:14px;line-height:1.7;padding:0 20px}.mode-grid{grid-template-columns:1fr;gap:11px;margin-top:35px}.mode-card{min-height:94px;grid-template-columns:52px 1fr 32px;padding:14px 17px}.mode-emoji{font-size:37px}.random-panel{padding:14px}.filter-row{grid-template-columns:1fr 1fr}.filter-row label{grid-template-columns:24px 1fr;height:57px;align-content:center;gap:2px 7px}.filter-icon{grid-row:span 2;width:24px;height:24px;font-size:14px}.filter-label{font-size:11px}.filter-row select{font-size:10px}.roll-button{width:100%}.result-card{grid-template-columns:1fr}.result-art{min-height:190px}.result-content{padding:12px 8px 8px}.result-content h2{font-size:21px}.promise-strip{grid-template-columns:1fr 1fr;gap:20px 0;padding:22px 5px}.promise-strip>div:nth-child(2){border:0}.inspiration{padding:75px 0 55px}.section-heading{align-items:flex-start;gap:15px}.section-heading button{font-size:0;width:40px;height:40px;padding:0}.section-heading button:after{content:"→";font-size:18px}.idea-grid{grid-template-columns:1fr}.idea-card{min-height:235px}.how{grid-template-columns:1fr;padding:35px 24px;gap:28px}.note-card{width:200px;margin:auto}.how-copy{text-align:center}.saved-section{grid-template-columns:1fr;gap:20px}.saved-chips{min-height:130px}.site-footer{flex-direction:column;gap:16px;align-items:flex-start}.site-footer p{margin:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}