@import"https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=JetBrains+Mono:wght@500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box}html{color-scheme:light}body{margin:0;font-family:Plus Jakarta Sans,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7f2e8;color:#332c25}button,input,textarea{font:inherit}#root{min-height:100vh;isolation:isolate}:root{--page-bg: #f7f2e8;--page-bg-soft: #fbf7f1;--page-bg-deep: #ece0cf;--surface: rgba(255, 249, 239, .88);--surface-strong: #fffaf2;--surface-muted: #f3e9da;--surface-tint: #fbf4e8;--border: rgba(112, 86, 58, .16);--border-strong: rgba(112, 86, 58, .28);--text: #332c25;--text-soft: #6f6256;--text-faint: #9f907f;--heading: #241f1a;--accent: #2f7d6c;--accent-strong: #225d51;--accent-soft: #e1f2ec;--shadow-soft: 0 18px 40px rgba(92, 67, 39, .1);--shadow-card: 0 28px 70px rgba(92, 67, 39, .14)}.app{min-height:100vh;color:var(--text);background:radial-gradient(circle at top left,rgba(255,226,186,.62),transparent 28%),radial-gradient(circle at top right,rgba(201,231,221,.72),transparent 24%),linear-gradient(180deg,var(--page-bg-soft) 0%,var(--page-bg) 48%,var(--page-bg-deep) 100%)}.app-header{display:grid;gap:.45rem;padding:.55rem 1.4rem .65rem;position:sticky;top:0;z-index:25;background:linear-gradient(180deg,#fffaf2f0,#f8f1e6e6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.55);box-shadow:0 12px 30px #5c432714}.header-top-row{display:flex;align-items:center;gap:1rem}.header-left{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;flex-shrink:0}.header-left h1{margin:0;display:flex;align-items:center;gap:.55rem;font-family:Fraunces,Georgia,serif;font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;letter-spacing:-.04em;color:var(--heading);line-height:1.05}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:12px;background:linear-gradient(135deg,#2f7d6c,#78a996);color:#fdf8f0;font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;font-weight:800;box-shadow:0 8px 18px #2f7d6c38}.tagline{display:inline-flex;align-items:center;margin-top:0;font-size:.84rem;font-weight:600;color:var(--accent-strong);white-space:nowrap}.header-note{display:none}.app-main{max-width:1080px;margin:0 auto;padding:.9rem 1.4rem 3.2rem}.header-top-row .score-bar{flex:1;min-width:0}.score-bar{padding:.7rem .82rem .76rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#ffffffbd,#faf3e8eb);box-shadow:inset 0 1px #ffffffb8}.score-info{display:flex;justify-content:space-between;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.32rem}.score-label{font-size:.86rem;font-weight:600;line-height:1.35;color:var(--heading)}.score-count{display:inline-flex;align-items:center;padding:.24rem .5rem;border:1px solid var(--border);border-radius:999px;background:#ffffff8f;color:var(--text-soft);font-family:JetBrains Mono,Fira Code,monospace;font-size:.68rem}.score-track{height:.18rem;border-radius:999px;background:#e6d9c4;overflow:hidden}.score-fill{height:100%;border-radius:999px;box-shadow:inset 0 -1px #00000014;transition:width .4s ease,background .4s ease}.editor-container{position:relative}.editor-mode-bar{display:flex;justify-content:flex-end;gap:.45rem}.affix-toggle-bar{margin-top:0}.format-toolbar{padding:.62rem .68rem .68rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#ffffffb8,#f8f2eae6);box-shadow:inset 0 1px #ffffffbd}.format-toolbar-header{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;margin-bottom:.45rem}.format-toolbar-title{color:var(--heading);font-size:.8rem;font-weight:700}.format-toolbar-note{display:none}.format-toolbar-actions{display:flex;flex-wrap:wrap;gap:.38rem}.format-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:.34rem .64rem;border:1px solid var(--border-strong);border-radius:10px;background:#fffdf9eb;color:var(--heading);font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease,color .14s ease}.format-btn:hover:enabled{transform:translateY(-1px);background:#fffdf8;box-shadow:0 10px 20px #5c432714}.format-btn.is-active{border-color:#2f7d6c5c;background:linear-gradient(135deg,#e1f2ecf2,#f4fbf8f5);color:var(--accent-strong)}.format-btn:disabled{cursor:not-allowed;opacity:.56;box-shadow:none}.mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.35rem;padding:.4rem .82rem;border:1px solid var(--border-strong);border-radius:12px;background:#fffcf6e0;color:var(--heading);font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;box-shadow:0 8px 18px #5c432714;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.mode-toggle-btn:hover{background:#fffdf8;transform:translateY(-1px);box-shadow:0 14px 24px #5c43271f}.example-toggle-btn{border-color:#2f7d6c42;background:linear-gradient(135deg,#e1f2ecf5,#f4fbf8f5);color:var(--accent-strong)}.example-toggle-btn:hover{background:linear-gradient(135deg,#e8f6f0,#fffffff5)}.copy-prompt-btn{border-color:#5c432738}.copy-prompt-btn:hover:not(:disabled){background:#fffdf8}.copy-prompt-btn:disabled{opacity:.45;cursor:not-allowed}.editor-wrapper{position:relative;min-height:220px;border:1px solid var(--border-strong);border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#fffcf7fa,#fcf6eefa),var(--surface-strong);box-shadow:var(--shadow-card)}.editor-textarea,.editor-backdrop,.editor-overlay{width:100%;padding:1.55rem;box-sizing:border-box;font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:.97rem;line-height:1.82;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}.editor-backdrop{position:absolute;top:0;left:0;z-index:1;min-height:100%;color:transparent;pointer-events:none;overflow:hidden}.editor-textarea{position:relative;z-index:2;min-height:220px;border:none;resize:none;outline:none;display:block;background:transparent;color:var(--text);caret-color:var(--accent);overflow:hidden}.editor-textarea::placeholder{color:var(--text-faint)}.editor-overlay{position:absolute;top:0;left:0;z-index:3;min-height:100%;color:transparent;pointer-events:none;overflow:hidden}.section-badge-zone,.section-highlight{padding-left:1.65rem;margin:0 -.22rem 0 -.78rem}.section-badge-zone{position:relative}.section-highlight{border-left:4px solid;border-radius:20px;position:relative;box-shadow:inset 0 0 0 1px #ffffff42;transition:box-shadow .18s ease}.section-highlight:hover{box-shadow:inset 0 0 0 1px #fff6}.section-label{position:absolute;top:-.55rem;right:.8rem;padding:.22rem .58rem;border-radius:999px;color:#fff;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;pointer-events:auto;box-shadow:0 10px 18px #34271929;transition:transform .14s ease,box-shadow .14s ease}.section-label:hover{transform:translateY(-1px);box-shadow:0 12px 22px #34271933}.overlay-line{min-height:1.82em;line-height:1.82}.section-popup{z-index:100;width:min(390px,calc(100vw - 24px));padding:1.2rem;border:1px solid var(--border-strong);border-top:4px solid;border-radius:24px;background:#fffaf2f5;color:var(--text);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:popup-in .16s ease-out}@keyframes popup-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.popup-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}.popup-badge{padding:.35rem .75rem;border-radius:12px;color:#fff;font-size:.77rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.popup-close{border:none;background:none;color:var(--text-faint);font-size:1.35rem;line-height:1;cursor:pointer;padding:.15rem}.popup-close:hover{color:var(--text)}.popup-summary{margin:0 0 .5rem;color:var(--heading);font-size:.94rem;font-weight:700;line-height:1.55}.popup-explanation{margin:0 0 .95rem;font-size:.92rem;line-height:1.7;color:var(--text-soft)}.popup-meta,.popup-tip{padding:.95rem;border-radius:18px;background:linear-gradient(180deg,#f6efe4,#efe4d3);border:1px solid var(--border);font-size:.85rem}.popup-meta{margin-bottom:.8rem}.popup-meta-text{margin:0;color:var(--text-soft);font-size:.9rem;line-height:1.65}.tip-label{display:inline-block;margin-bottom:.45rem;color:var(--accent-strong);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.popup-examples{display:grid;gap:.7rem;margin-top:.95rem}.popup-example{padding:.9rem;border-radius:18px;border:1px solid var(--border);background:#ffffff80}.popup-example-label{display:inline-block;margin-bottom:.45rem;color:var(--heading);font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.popup-tip code,.popup-example code{display:block;color:var(--text);font-family:JetBrains Mono,Fira Code,monospace;font-size:.82rem;white-space:pre-wrap;line-height:1.65}.wysiwyg-wrapper{display:flex;min-height:220px;border:1px solid var(--border-strong);border-radius:30px;overflow:clip;background:linear-gradient(180deg,#fffcf7fa,#fcf6eefa),var(--surface-strong);box-shadow:var(--shadow-card)}.wysiwyg-editor-area{position:relative;flex:1;min-width:0}.wysiwyg-placeholder{position:absolute;top:1.7rem;left:1.7rem;right:1.7rem;color:var(--text-faint);font-size:1rem;line-height:1.85;pointer-events:none}.wysiwyg-content{min-height:220px;padding:1.7rem;outline:none;color:var(--text);font-size:1rem;line-height:1.85;caret-color:var(--accent)}.wysiwyg-section-block{border-left:4px solid var(--sc)!important;padding-left:.95rem!important;background:var(--sb, transparent)!important}.wysiwyg-section-badge{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);padding:.18rem .58rem;border-radius:999px;color:#fff;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.6;-webkit-user-select:none;user-select:none;pointer-events:auto;cursor:pointer;white-space:nowrap;box-shadow:0 10px 18px #34271929}.wysiwyg-content h1.wysiwyg-section-block,.wysiwyg-content h2.wysiwyg-section-block,.wysiwyg-content h3.wysiwyg-section-block{position:relative!important;padding-right:6.2rem}.wysiwyg-content ul.wysiwyg-section-block,.wysiwyg-content ol.wysiwyg-section-block{list-style-position:inside}.wysiwyg-content ul.wysiwyg-section-block>li>p,.wysiwyg-content ol.wysiwyg-section-block>li>p{display:inline}.wysiwyg-content h1,.wysiwyg-content h2,.wysiwyg-content h3{font-family:Fraunces,Georgia,serif;letter-spacing:-.03em;color:var(--heading)}.wysiwyg-content h1{margin:1.45rem 0 .65rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);font-size:1.9rem;font-weight:700}.wysiwyg-content h2{margin:1.25rem 0 .48rem;font-size:1.45rem;font-weight:700}.wysiwyg-content h3{margin:1rem 0 .35rem;font-size:1.2rem;font-weight:700}.wysiwyg-content p{margin:.45rem 0;color:var(--text-soft)}.wysiwyg-content strong{color:var(--heading);font-weight:700}.wysiwyg-content em{color:#5f776f}.wysiwyg-content ul,.wysiwyg-content ol{margin:.45rem 0;padding-left:1.35rem;color:var(--text-soft)}.wysiwyg-content li{margin:.22rem 0}.wysiwyg-content li p{margin:0}.wysiwyg-content code{padding:.16rem .42rem;border-radius:8px;background:#f3eadc;color:var(--heading);font-family:JetBrains Mono,Fira Code,monospace;font-size:.85em}.wysiwyg-content pre{margin:.9rem 0;padding:1rem;border:1px solid var(--border);border-radius:18px;background:#f3eadf;overflow-x:auto}.wysiwyg-content pre code{padding:0;background:none;font-size:.84rem}.wysiwyg-content blockquote{margin:.9rem 0;padding:.35rem 1rem;border-left:4px solid #d3c1a5;color:var(--text-soft);background:#ffffff5c;border-radius:0 16px 16px 0}.wysiwyg-content hr{margin:1.1rem 0;border:none;border-top:1px solid var(--border)}.wysiwyg-content ::selection{background:#2f7d6c29}.wysiwyg-content p.is-editor-empty:first-child:before{color:var(--text-faint);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.wysiwyg-editor-area:focus-within .wysiwyg-content{box-shadow:none}.recommendations{padding:.72rem .78rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#ffffffbd,#faf3e8eb);box-shadow:inset 0 1px #ffffffb8}.rec-header{display:flex;align-items:center;gap:.65rem;margin-bottom:.2rem;font-size:.88rem;font-weight:700;color:var(--heading)}.rec-subtext{display:none}.rec-check{color:var(--accent);font-size:1.1rem;font-weight:800}.rec-groups{display:grid;gap:.56rem}.rec-group{display:grid;gap:.26rem}.rec-group-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.rec-group-title{color:var(--heading);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.rec-pills{display:flex;flex-wrap:wrap;gap:.42rem}.rec-pill{display:inline-flex;align-items:center;gap:.42rem;padding:.44rem .68rem;border:1.25px solid;border-radius:999px;background:#ffffffd1;font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;box-shadow:0 6px 14px #5c43270d;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.rec-pill:hover{background:#fffdf8;transform:translateY(-1px);box-shadow:0 12px 22px #5c43271a}.pill-dot{width:.38rem;height:.38rem;border-radius:50%;flex-shrink:0}.rec-pill-label{color:var(--heading);font-size:.76rem;font-weight:700;line-height:1.2;white-space:nowrap}@media(max-width:820px){.app-header{gap:.4rem;padding:.45rem .85rem .55rem}.header-top-row{flex-wrap:wrap;gap:.45rem}.logo-icon{width:1.82rem;height:1.82rem;border-radius:11px}.header-left{gap:.45rem}.header-left h1{gap:.45rem;font-size:clamp(1.2rem,5vw,1.55rem)}.tagline{font-size:.74rem}.app-main{padding:.65rem .85rem 2.4rem}.score-bar{padding:.56rem .62rem .6rem;border-radius:14px}.score-label{font-size:.8rem;line-height:1.3}.score-count{padding:.2rem .44rem;font-size:.64rem}.score-track{height:.14rem}.editor-mode-bar{justify-content:stretch;flex-wrap:wrap;gap:.38rem}.mode-toggle-btn{flex:1;min-height:2.1rem;padding:.36rem .66rem;font-size:.76rem}.recommendations{padding:.58rem .62rem;border-radius:14px}.format-toolbar{padding:.54rem .58rem .58rem;border-radius:14px;display:flex;flex-direction:row;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.format-toolbar::-webkit-scrollbar{display:none}.format-toolbar-header{margin-bottom:0;flex-shrink:0}.format-toolbar-title{font-size:.74rem}.format-toolbar-actions{gap:.32rem;flex-wrap:nowrap}.format-btn{min-height:1.9rem;padding:.3rem .54rem;font-size:.72rem;white-space:nowrap;flex-shrink:0}.rec-header{font-size:.82rem}.rec-groups{gap:.48rem}.rec-group{gap:.22rem}.rec-group-title{font-size:.66rem}.rec-pills{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0 -.18rem;padding:.02rem .12rem .12rem;gap:.34rem;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.rec-pills::-webkit-scrollbar{display:none}.rec-pill{flex:0 0 auto;padding:.38rem .56rem;font-size:.72rem}.pill-dot{width:.34rem;height:.34rem}.rec-pill-label{font-size:.72rem}.editor-wrapper,.wysiwyg-wrapper{border-radius:24px}.editor-textarea,.editor-backdrop,.editor-overlay,.wysiwyg-content{padding:1.15rem}.section-popup{padding:1rem;border-radius:20px}}@media(max-width:560px){.app-header{padding:.45rem .65rem;gap:.4rem}.header-top-row{gap:.35rem}.score-bar{padding:.5rem .54rem .54rem;border-radius:12px}.score-label{font-size:.76rem;line-height:1.28}.score-count{padding:.18rem .4rem;font-size:.62rem}.recommendations{padding:.52rem .56rem;border-radius:12px}.format-toolbar{padding:.5rem .54rem .54rem;border-radius:12px}.format-toolbar-actions{gap:.28rem}.rec-header{gap:.5rem;font-size:.9rem}.rec-group-title{font-size:.72rem}.editor-mode-bar{display:grid;grid-template-columns:1fr}.header-left{gap:.36rem}.header-left h1{font-size:1.12rem}.logo-icon{width:1.7rem;height:1.7rem;font-size:.72rem}.tagline{font-size:.68rem}.mode-toggle-btn{width:100%;min-height:2rem;border-radius:12px;font-size:.74rem}.format-btn{flex:1 1 calc(50% - .2rem);min-height:1.84rem;padding:.28rem .48rem}.rec-pill{padding:.34rem .5rem}.rec-pill-label{font-size:.68rem}}
