:root{--bg-top: #faf6ef;--bg-bot: #f7f2e9;--ink: #332a22;--ink-soft: #8a7b68;--ink-faint: #7e6e54;--accent: #e8923e;--accent-dark: #d07e2f;--accent-text: #a05616;--card: #fffdf8;--card-border: #efe6d4;--line: #eae0cf;--shadow-card: 0 6px 22px rgba(120, 85, 40, .07);--shadow-float: 0 16px 44px rgba(92, 60, 25, .16);--serif: "Noto Serif SC", "Songti SC", serif;--num: "Playfair Display", "Noto Serif SC", serif;--sans: "Noto Sans SC", -apple-system, "PingFang SC", "Helvetica Neue", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{min-height:100%}body{font-family:var(--sans);color:var(--ink);background:linear-gradient(168deg,var(--bg-top) 0%,var(--bg-bot) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.page{position:relative;min-height:100vh}.page:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.container{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:60px 48px 80px}.hero{display:flex;align-items:center;gap:40px;margin-bottom:36px}.hero-figure{flex:0 0 300px;width:300px}.hero-img,.hero-ph{width:100%;aspect-ratio:4 / 3;border-radius:18px;object-fit:cover;display:block}.hero-img{box-shadow:var(--shadow-card);border:1px solid var(--card-border)}.hero-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1.5px dashed #d9caab;background:repeating-linear-gradient(45deg,rgba(232,146,62,.05) 0,rgba(232,146,62,.05) 10px,transparent 10px,transparent 20px),#faf4e9;color:var(--ink-faint)}.hero-ph-title{font-size:13px;letter-spacing:.5px}.hero-ph-sub{font-size:12px}.hero-text{flex:1;min-width:0}.hero-eyebrow{font-family:var(--num);font-style:italic;font-weight:600;font-size:18px;letter-spacing:.5px;color:var(--accent-text);margin-bottom:10px}.hero-title{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.18;letter-spacing:1px;color:var(--ink)}.hero-sub{margin-top:14px;font-size:16px;color:var(--ink-soft);line-height:1.6}.legend{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin-top:22px}.legend-item{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#6f6048;font-weight:500}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.q-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.q-card{position:relative;aspect-ratio:5 / 4;border:1px solid var(--card-border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-card);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,opacity .25s ease;overflow:hidden}.q-card:after{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--chapter);opacity:0;transition:opacity .22s ease}.q-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #78552824}.q-card:hover:after{opacity:.85}.q-card:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}.q-dot{position:absolute;top:14px;left:14px;width:9px;height:9px;border-radius:50%;background:var(--chapter)}.q-number{font-size:clamp(34px,4vw,52px);font-weight:600;color:var(--ink);line-height:1;transition:color .22s ease}.q-card:hover .q-number{color:var(--accent-dark)}.q-card.opened{opacity:.5}.q-card.opened .q-number{color:var(--ink-soft)}.q-opened{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#fff;background:var(--chapter);padding:3px 7px 3px 5px;border-radius:20px}.finish-note{text-align:center;margin-top:40px;font-family:var(--serif);font-size:18px;color:var(--accent-text);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}.finish-note.show{opacity:1;transform:none}.timer-card{position:fixed;top:24px;right:32px;z-index:120;width:250px;background:#fffefb;border:1px solid #f0e8d8;border-radius:24px;box-shadow:var(--shadow-float);padding:18px 22px 22px}.timer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.timer-title{font-size:14px;font-weight:600;color:#6f6048;letter-spacing:.5px}.timer-collapse,.reveal-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:transparent;color:var(--ink-faint);cursor:pointer;transition:background .2s ease,color .2s ease}.timer-collapse:hover,.reveal-close:hover{background:#f3ece0;color:var(--ink-soft)}.timer-ring-wrap{position:relative;width:168px;height:168px;margin:4px auto 6px}.timer-ring-wrap svg{width:100%;height:100%}.ring-bg{fill:none;stroke:#f1eadd;stroke-width:11}.ring-fg{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s linear}.timer-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.timer-display{font-size:42px;font-weight:400;color:var(--ink);letter-spacing:1px;line-height:1}.timer-display.is-finished{color:var(--accent)}.timer-sub{font-size:12px;color:var(--ink-faint)}.timer-badge-row{display:flex;justify-content:center;min-height:24px;margin:8px 0 4px}.timer-badge{font-size:11px;font-weight:600;letter-spacing:.5px;padding:3px 12px;border-radius:20px}.timer-badge.ready{background:#f1ece1;color:#6e5e40}.timer-badge.running{background:#e6f2ea;color:#256b3e}.timer-badge.paused{background:#fbeed6;color:#8f560f}.timer-badge.extra{background:#fbe1cd;color:var(--accent-text)}.timer-inputs{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:8px 0 12px}.ti-group{display:flex;flex-direction:column;align-items:center;gap:4px}.ti-group span{font-size:11px;color:var(--ink-faint);letter-spacing:1px}.ti-group input{width:58px;padding:7px 0;font-size:18px;text-align:center;color:var(--ink);background:#f6f1e7;border:1px solid #ece2d0;border-radius:10px;font-family:var(--num)}.ti-group input:focus{outline:none;border-color:var(--accent);background:#fff}.ti-sep{font-size:20px;font-weight:700;color:var(--ink-faint);padding-bottom:9px}.timer-alarm{text-align:center;font-size:11px;color:var(--ink-faint);margin-bottom:10px}.timer-btns{display:flex;flex-wrap:wrap;gap:8px}.t-btn{flex:1;min-width:60px;padding:11px 0;font-size:13px;font-weight:600;font-family:inherit;border:none;border-radius:16px;cursor:pointer;transition:background .18s ease,transform .18s ease}.t-btn:active{transform:scale(.97)}.t-btn.primary{flex-basis:100%;background:var(--accent);color:#fff;padding:13px 0}.t-btn.primary:hover{background:var(--accent-dark)}.t-btn.secondary{background:#f3ece0;color:#6f6048}.t-btn.secondary:hover{background:#ebe2d2}.t-btn.ghost{background:transparent;border:1px solid #ece2d0;color:var(--ink-faint)}.t-btn.ghost:hover{background:#f8f3ea;color:var(--ink-soft)}.timer-fab{position:fixed;top:24px;right:32px;z-index:120;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;background:#fffefb;border:1px solid #f0e8d8;border-radius:30px;box-shadow:var(--shadow-float);color:var(--accent-dark);cursor:pointer;font-family:inherit}.timer-fab-time{font-size:16px;font-weight:600;color:var(--ink)}.reveal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(44,30,18,.46);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);perspective:1500px}.reveal-overlay.in{animation:ovIn .3s ease both}.reveal-overlay.out{animation:ovOut .28s ease both}@keyframes ovIn{0%{opacity:0}to{opacity:1}}@keyframes ovOut{0%{opacity:1}to{opacity:0}}.reveal-card{position:relative;width:min(560px,92vw);background:var(--card);border-radius:24px;padding:48px 50px 30px;box-shadow:0 30px 70px #3c28144d;border-top:5px solid var(--chapter);transform-origin:center;will-change:transform,opacity}.reveal-card.in{animation:cardIn .46s cubic-bezier(.18,.72,.24,1.04) both}.reveal-card.out{animation:cardOut .26s cubic-bezier(.5,0,.7,.3) both}@keyframes cardIn{0%{transform:rotateY(-92deg) scale(.72);opacity:0}55%{opacity:1}to{transform:rotateY(0) scale(1);opacity:1}}@keyframes cardOut{0%{transform:rotateY(0) scale(1);opacity:1}to{transform:rotateY(68deg) scale(.86);opacity:0}}.reveal-close{position:absolute;top:16px;right:16px}.reveal-tag{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--chapter)}.reveal-tag-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--chapter-soft)}.reveal-tag-no{margin-left:6px;padding-left:12px;border-left:1px solid var(--line);color:var(--ink-faint);font-weight:500}.reveal-question{margin-top:22px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,3.2vw,32px);line-height:1.62;color:var(--ink)}.reveal-foot{position:absolute;right:26px;bottom:14px;font-size:46px;font-weight:700;color:var(--chapter);opacity:.14;line-height:1}@media (min-width: 921px){.hero{padding-right:300px;min-height:384px}}@media (max-width: 920px){.container{padding:40px 28px 64px}.hero{flex-direction:column;align-items:flex-start;gap:22px}.hero-figure{flex-basis:auto;width:220px}.q-grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media (max-width: 560px){.container{padding:28px 18px 120px}.q-grid{grid-template-columns:repeat(3,1fr);gap:12px}.hero-title{font-size:28px}.timer-card{top:auto;bottom:18px;right:14px;width:220px;max-height:calc(100vh - 36px);overflow-y:auto}.timer-fab{top:auto;bottom:18px;right:14px}.reveal-card{padding:40px 26px 26px}}@media (prefers-reduced-motion: reduce){.reveal-card.in,.reveal-card.out,.reveal-overlay.in,.reveal-overlay.out{animation-duration:.01ms}.q-card{transition:box-shadow .18s ease,opacity .25s ease}.q-card:hover{transform:none}.ring-fg{transition:none}.finish-note{transform:none;transition:opacity .4s ease}}