@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap";:root{--bg: #eef6fb;--surface: #ffffff;--surface-soft: #f7faf8;--text: #112117;--muted: #5f7064;--line: #d5e2d7;--line-strong: #bfd1c1;--green: #1f9d5b;--green-strong: #187245;--green-soft: #e9f7ef;--danger-bg: #fff0f2;--danger-line: #f0c5cc;--danger-text: #9f2f42;--shadow: 0 14px 32px rgba(20, 50, 30, .08);--radius: 18px;--font-body: "Manrope", "Segoe UI", sans-serif;--font-display: "Sora", "Manrope", sans-serif;--control-height: 48px}@keyframes pulse-dot{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes panda-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes sparkle-burst{0%{opacity:0;transform:translateY(4px) scale(.7)}30%{opacity:1}to{opacity:0;transform:translateY(-10px) scale(1.2)}}@keyframes orbit-drift{0%,to{transform:translate(0);opacity:.5}50%{transform:translate(4px,-5px);opacity:1}}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;background:linear-gradient(180deg,#76c7e8 0%,#9ad8ef 34%,var(--bg) 72%);color:var(--text);font-family:var(--font-body);font-size:clamp(16px,.92rem + .15vw,17px);line-height:1.5}html{background:#76c7e8}html,body{overscroll-behavior-y:none}a{color:inherit}button,input,select{font:inherit}.site-shell{min-height:100vh;display:flex;flex-direction:column;position:relative;transform:translateY(var(--edge-nudge, 0px));transition:transform .18s cubic-bezier(.22,1,.36,1);will-change:transform}.site-shell:before{content:"";position:absolute;inset:0 0 auto;height:54vh;z-index:0;pointer-events:none;background:radial-gradient(14rem 6rem at 14% 22%,rgba(255,255,255,.62) 0%,transparent 73%),radial-gradient(18rem 7rem at 70% 15%,rgba(255,255,255,.52) 0%,transparent 78%),radial-gradient(14rem 6rem at 86% 31%,rgba(255,255,255,.45) 0%,transparent 76%)}.site-shell:after{content:"";position:absolute;inset:auto 0 0;height:128px;z-index:0;pointer-events:none;background:linear-gradient(180deg,#addc8100,#addc81d1 70%,#9dce71)}.site-header{width:min(1120px,calc(100vw - 2.4rem));margin:1.25rem auto 0;padding:1rem 1.25rem;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 97%,#ebf5ee 3%);display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;z-index:2}.brand-block{display:flex;align-items:center;gap:.75rem}.brand-icon{width:36px;height:36px;display:block;object-fit:contain;image-rendering:pixelated}.brand-name{margin:0;font-size:1.1rem;font-weight:800;color:#154b2e}.top-nav{display:flex;align-items:center;gap:1rem}.header-actions{display:flex;align-items:center;gap:.75rem}.top-nav a{text-decoration:none;font-size:.92rem;font-weight:600;color:#365844;transition:color .12s ease}.top-nav a:hover{color:#134e2f}.content-wrap{width:min(1120px,calc(100vw - 2.4rem));margin:1.25rem auto 0;padding-bottom:3.2rem;position:relative;z-index:2}.hero-shell{padding:.8rem 1rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(100deg,#e9f7efbf,#fff0 45%),color-mix(in srgb,var(--surface) 97%,#edf6f1 3%);box-shadow:var(--shadow)}.hero-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(180px,.75fr);gap:.55rem;align-items:center}.hero-copy-block{min-width:0}.hero-mascot-wrap{display:flex;justify-content:center;align-items:center}.hero-kicker{margin:0;display:inline-block;padding:.26rem .68rem;border-radius:999px;border:1px solid #bfdbc8;background:#eaf8ef;color:#216944;font-size:.76rem;font-weight:700;letter-spacing:.01em}.hero-title{margin:.44rem 0 0;font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,2.5rem);line-height:1.16;letter-spacing:-.02em;font-weight:800;max-width:22ch}.hero-copy{margin:.38rem 0 0;max-width:none;color:var(--muted);font-size:.96rem;line-height:1.45;white-space:nowrap}.workbench{margin-top:1.1rem;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);gap:1.05rem;align-items:start}.app-card{border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 97%,#eef3f6 3%);box-shadow:var(--shadow);transition:box-shadow .12s ease}.app-card:hover{box-shadow:0 16px 26px #1f29331a}.controls-panel{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem}.controls-panel label{display:grid;gap:.42rem;font-size:.86rem;font-weight:600;color:#2f4959}.section-block{display:flex;flex-direction:column;align-items:stretch;gap:.58rem;padding-top:.85rem;border-top:1px solid #dfe9ee}.section-block:first-of-type{border-top:0;padding-top:0}.section-title{margin:0;font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:#1f3e2d}.row{display:grid;grid-template-columns:1fr 156px;gap:.65rem;align-items:center}.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.5rem}.select-shell{position:relative;display:block}.select-shell select{appearance:none;padding-right:2.25rem}.select-shell:after{content:"⌄";position:absolute;right:.76rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#2a5b3f;font-size:1rem;transition:transform .14s ease}.select-shell:focus-within:after{transform:translateY(-50%) rotate(180deg)}input,select,button{border-radius:12px;border:1px solid #bfcfcb;background:var(--surface-soft);color:#1b3123;min-height:var(--control-height);padding:.62rem .82rem;font-size:.95rem;transition:border-color .12s ease,background-color .12s ease,transform .1s ease}select{width:100%}input::placeholder{color:#79927f}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #7cd6a6;outline-offset:2px}button{cursor:pointer;font-weight:700}button:disabled{cursor:not-allowed;opacity:.58}.btn-primary{border-color:#218f55;background:linear-gradient(180deg,#27a864,#1f9d5b);color:#f4fff8;position:relative;overflow:hidden}.btn-primary:hover:enabled{filter:brightness(1.02);transform:translateY(-1px)}.btn-muted{background:#f5faf7;border-color:#c0d7c7;color:#26523a;position:relative;overflow:hidden}.btn-muted:hover:enabled{background:#e9f5ec;transform:translateY(-1px)}.btn-primary:after,.btn-muted:after{content:"";position:absolute;inset:0;transform:translate(-130%);background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%);opacity:0;transition:transform .36s ease,opacity .18s ease}.btn-primary:hover:enabled:after,.btn-muted:hover:enabled:after{transform:translate(130%);opacity:.9}.btn-primary:active:enabled,.btn-muted:active:enabled{transform:translateY(1px)}.button-row{display:grid;gap:.6rem}.markdown-notice{margin:0;border-radius:10px;border:1px solid #efc6cc;background:#fff3f5;color:#a33647;font-size:.82rem;font-weight:700;line-height:1.38;padding:.5rem .62rem}.markdown-notice.is-entering{animation:markdown-notice-in .18s ease-out}.markdown-notice.is-leaving{animation:markdown-notice-out .22s ease-in forwards}.url-status{margin:0;font-size:.84rem}.url-status-empty{color:#617467}.url-status-status,.url-status-article{color:var(--green-strong)}.url-status-unsupported,.url-status-invalid{color:#a43d4e}.mini-action-row{margin-top:.4rem;display:flex;gap:.5rem}.btn-clipboard{width:fit-content;min-height:40px;padding:.45rem .85rem}.helper-card{padding:1rem 1.1rem;background:linear-gradient(180deg,#e8f7ee99,#fff0 42%),color-mix(in srgb,var(--surface) 97%,#eef6f1 3%)}.export-panel{display:grid;gap:.9rem}.export-panel .option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panda-guide{appearance:none;border:0;background:transparent;display:flex;justify-content:center;align-items:center;min-height:150px;padding:0;margin:0 auto;position:relative;overflow:hidden;cursor:pointer}.panda-hero{width:168px;height:168px;object-fit:contain;image-rendering:pixelated;animation:panda-bob 1.35s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(31,91,59,.2))}.panda-guide.is-loading .panda-hero{animation-duration:.8s}.panda-guide:hover .panda-hero{transform:scale(1.04)}.panda-guide.is-ready{background:transparent}.sparkle{position:absolute;font-size:.9rem;opacity:0;pointer-events:none}.sparkle-a{right:1rem;top:.55rem}.sparkle-b{right:1.95rem;top:1rem}.panda-guide.is-celebrating .sparkle-a{animation:sparkle-burst .62s ease-out}.panda-guide.is-celebrating .sparkle-b{animation:sparkle-burst .7s ease-out 80ms}.orbit{position:absolute;width:14px;height:14px;border-radius:999px;background:#2bb56a;opacity:.55}.orbit-a{right:26%;top:14%;animation:orbit-drift 1.1s ease-in-out infinite}.orbit-b{left:26%;bottom:18%;background:#88d2a9;animation:orbit-drift 1.1s ease-in-out infinite .12s}.preview-band{margin-top:1.2rem;padding:0}.preview-content{padding:1.2rem}.preview-content h2{margin:0 0 .8rem;font-size:1.02rem}.preview-skeleton{border:1px solid var(--line);border-radius:12px;padding:.9rem;background:#f9fcfa;display:grid;gap:.55rem}.preview-skeleton>div{border-radius:9px;border:1px solid #d8e7dd;background:linear-gradient(110deg,#e6f0e9 8%,#f3f8f5 18%,#e6f0e9 33%);background-size:220% 100%;animation:preview-shimmer 1.3s linear infinite}.preview-skeleton-cover{height:140px}.preview-skeleton-title{height:24px;width:82%}.preview-skeleton-meta{height:16px;width:52%}.preview-skeleton-metrics{height:66px}.preview-skeleton-lines{height:140px}.error-box{margin-bottom:.7rem;padding:.85rem;border:1px solid var(--danger-line);border-radius:var(--radius);background:var(--danger-bg);color:var(--danger-text)}.empty-state{border:1px dashed var(--line-strong);border-radius:12px;padding:1rem;text-align:center;color:#576d5d;display:grid;gap:.55rem;justify-items:center}.empty-state p{margin:0}.preview-wrap{width:100%}.preview-stack{display:grid;gap:.72rem;justify-items:center}.preview-card{width:min(100%,980px);margin:0;padding:1.2rem;border:1px solid var(--line);border-radius:14px;background:#fbfdfb}.preview-cover{background:#f1faf4}.source-badge{display:inline-block;border-radius:999px;border:1px solid #c1dcc7;background:#ecf9f0;color:#246b43;font-size:.78rem;font-weight:700;padding:.25rem .66rem;margin-bottom:.62rem}.preview-cover-media{margin:0 0 .7rem}.preview-cover-media img{width:100%;display:block;border-radius:10px;border:1px solid var(--line-strong)}.preview-cover-media figcaption{margin-top:.33rem;font-size:.82rem;color:#4f697b}.preview-header h1{margin:0;font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.22}.author-row{margin-top:.62rem;display:flex;align-items:center;gap:.62rem}.avatar,.avatar-fallback{width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong)}.avatar{object-fit:cover}.avatar-fallback{display:grid;place-items:center;background:#ecf6ef;color:#355b44;font-weight:700}.author-name{font-weight:800}.author-meta{color:#546f5f;font-size:.88rem}.source-link{display:inline-block;margin-top:.45rem;font-size:.83rem;color:#2f6e4a;word-break:break-all}.metric-grid{margin-top:.82rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.56rem}.metric-card{border:1px solid var(--line-strong);border-radius:10px;padding:.42rem .45rem;background:#f7fbf7;display:grid;gap:.08rem}.metric-card span{font-size:.75rem;color:#4f697b}.metric-card strong{font-size:.94rem}.metric-card em{font-size:.68rem;color:#5f7a8e;font-style:normal}.article-body{margin-top:.92rem;font-size:1.01rem;line-height:1.58;max-width:none;width:100%}.article-tools{position:sticky;top:.52rem;z-index:2;display:flex;justify-content:flex-end;margin-top:.8rem}.article-copy-btn{min-height:34px;min-width:34px;border-radius:10px;border:1px solid #bbd8c7;background:#ecf9f1;color:#255c3f;font-size:1rem;font-weight:700;padding:0;display:grid;place-items:center;line-height:1}.article-copy-btn:hover:enabled{background:#dff2e7}.article-copy-btn.is-failed{border-color:#e9bec6;background:#fff2f5;color:#a73a4d}.article-body h2,.article-body h3,.article-body h4{margin:.95rem 0 .32rem}.article-body p{margin:0 0 .56rem;line-height:1.53}@keyframes preview-shimmer{0%{background-position:200% 0}to{background-position:-20% 0}}@keyframes markdown-notice-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes markdown-notice-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.article-body blockquote{margin:.28rem 0 .75rem;border-left:3px solid #7aa98b;padding-left:.7rem;color:#294837}.article-body .code-block{margin:.42rem 0 .88rem;border:1px solid var(--line-strong);border-radius:10px;background:#f4fbf6;padding:.62rem;overflow-x:auto;white-space:pre-wrap}.article-body .code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.84rem}.preview-media{margin:.75rem 0}.preview-media img{width:100%;border-radius:10px;border:1px solid var(--line-strong)}.preview-media figcaption{margin-top:.34rem;font-size:.82rem;color:#4f697b}.embed-line a{color:#2e6d48;text-decoration:underline}.preview-bw{background:#fff;color:#111}.preview-bw .metric-card,.preview-bw .article-body .code-block,.preview-bw .preview-media img{border-color:#666;background:#fff}.preview-bw .source-link,.preview-bw .embed-line a{color:#1f2937}.info-grid{margin-top:1.2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem}.info-card{padding:1rem}.info-card h2{margin:0;font-size:1.05rem}.how-list{margin:.72rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}.how-list li{position:relative;padding-left:1.25rem;color:#315442}.how-list li:before{content:"";position:absolute;left:0;top:.42rem;width:.5rem;height:.5rem;border-radius:999px;background:#1b9d5b}.faq-list{margin-top:.7rem;display:grid;gap:.5rem}.faq-list details{border:1px solid var(--line);border-radius:10px;background:#fbfdfb}.faq-list summary{cursor:pointer;padding:.62rem 2rem .62rem .72rem;font-weight:700;list-style:none;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:.72rem;top:.56rem;color:#4b6857;font-size:1rem}.faq-list details[open] summary:after{content:"-"}.faq-list p{margin:0;padding:0 .72rem .72rem;color:#476051}.site-footer{width:min(1120px,calc(100vw - 2.4rem));margin:1.2rem auto 1.3rem;padding:1rem 1.1rem;border-radius:var(--radius);border:1px solid #138a4f;background:linear-gradient(180deg,#18a55f,#109655);color:#ecfff2;text-align:center;position:relative;z-index:2}.site-footer p{margin:0;font-size:.9rem}@media(max-width:980px){.hero-layout,.workbench,.info-grid{grid-template-columns:1fr}.workbench{gap:.8rem}.hero-copy{white-space:normal}}@media(max-width:760px){.site-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%;justify-content:space-between}.row,.option-grid,.export-panel .option-grid,.button-row{grid-template-columns:1fr}.panda-guide{min-height:150px}.panda-hero{width:140px;height:140px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.skip-link{position:absolute;left:.8rem;top:-3rem;z-index:5;background:#fff;color:#1f2933;border:1px solid #bacad6;border-radius:10px;padding:.5rem .72rem;text-decoration:none;font-weight:600}.skip-link:focus-visible{top:.8rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}