:root { color:#332445; background:#f7f1ff; font-family:ui-rounded,"SF Pro Rounded","Avenir Next Rounded",system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 0,#ead7ff 0,transparent 30rem),linear-gradient(145deg,#fffaf3,#f5edff); }
button,input { font:inherit; } button { min-height:44px; cursor:pointer; border:1px solid #d8c9ea; border-radius:12px; padding:.58rem .85rem; color:#452e60; background:#fff; font-weight:800; } button:hover { background:#f6efff; } button:focus-visible,input:focus-visible,.story-editor:focus-visible { outline:3px solid #7c48c1; outline-offset:2px; }
.writing-site-bar { position:sticky; top:0; z-index:60; min-height:var(--jke-platform-height); margin-top:0; border-top:0; border-bottom:1px solid rgb(49 38 78 / 14%); box-shadow:0 4px 18px rgb(49 38 78 / 8%); }
.writing-app { width:min(1180px,calc(100% - 32px)); min-height:calc(100dvh - var(--jke-platform-height)); margin:0 auto; padding:28px 0 44px; }.app-header { display:flex; align-items:center; gap:20px; margin-bottom:16px; }.eyebrow,.section-kicker { margin:0 0 3px; color:#875aa7; font-size:.78rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.app-header h1 { margin:0; font-size:clamp(2.15rem,6vw,3.6rem); line-height:1; }.save-status { margin-left:auto; padding:.55rem .78rem; border-radius:99px; color:#4a3562; background:#fff9; font-size:.84rem; font-weight:800; }.privacy-note { margin-bottom:18px; padding:12px 15px; border:1px solid #dbcce8; border-radius:14px; background:#fff9; font-size:.9rem; line-height:1.45; }.privacy-note a { color:#64369a; font-weight:800; }
.library-view,.editor-view { min-height:600px; border:1px solid #d8c9e5; border-radius:22px; background:#fff; box-shadow:0 16px 40px #5432741a; }.library-view { padding:clamp(18px,3vw,34px); }.library-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }.library-heading h2 { margin:0; font-size:clamp(1.65rem,3vw,2.3rem); }.library-heading p { margin:.35rem 0 0; color:#6f607d; }.primary { color:#fff; border-color:#713db3; background:#7e49bd; }.primary:hover { background:#6631a7; }.secondary { color:#fff; border-color:#277a91; background:#277a91; }.secondary:hover,.review-button:hover { background:#1f6578; }
.idea-deck { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:26px 0 20px; padding:19px 20px; border:1px solid #d9c4ec; border-radius:18px; background:linear-gradient(120deg,#f6eaff,#fff8e9); }.idea-deck h3 { margin:0; font-size:1.1rem; }.idea-deck > div > p:last-child { max-width:620px; margin:.4rem 0 0; color:#4d405b; line-height:1.5; }.idea-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }.search-field { display:grid; gap:6px; margin:0 0 14px; color:#5c4c6c; font-size:.86rem; font-weight:800; }.search-field input { width:100%; min-height:46px; border:1px solid #d7c9e2; border-radius:12px; padding:.55rem .75rem; color:#332445; background:#fffdfb; }.document-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }.document-card { display:grid; min-height:145px; align-content:space-between; gap:10px; padding:17px; border:1px solid #dccde8; border-radius:16px; color:#3c2b4d; text-align:left; background:linear-gradient(145deg,#fff,#fffaf3); }.document-card:hover { border-color:#9d72c8; box-shadow:0 6px 16px #6f409b1c; }.document-card strong { overflow:hidden; font-size:1.06rem; text-overflow:ellipsis; white-space:nowrap; }.document-card span { color:#7d7088; font-size:.8rem; font-weight:700; }.document-card .card-words { color:#9876ad; }.library-empty { margin:28px 0 0; color:#756780; text-align:center; }.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.editor-view { position:relative; display:flex; min-height:calc(100dvh - 180px); flex-direction:column; overflow:hidden; }.editor-header { display:flex; min-height:58px; align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid #e6dbe9; background:#fffdfb; }.back-button,.icon-button { min-height:40px; border:0; background:transparent; }.back-button { padding-left:.35rem; }.icon-button { margin-left:auto; min-width:42px; padding:0; font-size:1.1rem; letter-spacing:1px; }.editor-status { margin-left:auto; color:#71627e; font-size:.82rem; font-weight:750; }.editor-title-row { padding:clamp(18px,3vw,34px) clamp(18px,5vw,76px) 7px; }.editor-title-row input { width:100%; border:0; border-bottom:2px solid #eadff1; padding:.25rem 0 .55rem; color:#352247; background:transparent; font-size:clamp(1.6rem,4vw,2.6rem); font-weight:850; }.editor-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px clamp(18px,5vw,76px); border-bottom:1px solid #ede4ef; background:#fffaf3; }.editor-tools button { min-width:42px; min-height:40px; padding:.42rem .65rem; }.tool-spacer { flex:1; }.review-button { color:#fff; border-color:#256e82; background:#277a91; }.story-editor { width:min(100% - 36px,840px); min-height:clamp(460px,67dvh,900px); margin:20px auto 48px; padding:20px; border:1px solid #e0d4e8; border-radius:16px; color:#30223e; background:#fffdfb; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.06rem,1.7vw,1.2rem); line-height:1.8; overflow-wrap:anywhere; }.story-editor:empty::before { content:attr(data-placeholder); color:#998ca6; pointer-events:none; }.story-editor p:first-child { margin-top:0; }.story-editor h2,.story-editor h3 { font-family:ui-rounded,system-ui,sans-serif; line-height:1.3; }.story-editor blockquote { margin:1rem 0; padding-left:16px; border-left:4px solid #b388d2; color:#63546d; }.document-menu { position:absolute; z-index:10; top:59px; right:13px; display:grid; gap:5px; min-width:190px; padding:8px; border:1px solid #d9c9e6; border-radius:14px; background:#fff; box-shadow:0 12px 28px #43205c28; }.document-menu button { text-align:left; border:0; }.danger { color:#a13450; }.confirm-dialog { max-width:390px; border:1px solid #dac9e7; border-radius:18px; color:#3c2b4d; box-shadow:0 18px 50px #32164a45; }.confirm-dialog::backdrop { background:#2e183b66; }.confirm-dialog h2 { margin-top:0; }.confirm-dialog p { line-height:1.5; }.confirm-dialog form > div { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }.primary-light { color:#fff; border-color:#a13450; background:#a13450; }
.writing-coach { width:min(100% - 36px,840px); margin:10px auto 0; padding:15px; border:1px solid #b9dce5; border-radius:14px; background:#f0fbfe; }.writing-coach h2 { margin:0 0 4px; color:#1b647a; font-size:1rem; }.writing-coach > p { margin:0 0 10px; color:#456572; font-size:.9rem; line-height:1.45; }.coach-results { display:grid; gap:8px; max-height:270px; overflow:auto; }.coach-card { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px; border-radius:10px; background:#fff; }.coach-card p { margin:4px 0 0; color:#526d77; font-size:.86rem; line-height:1.35; }.coach-card button { color:#176479; border-color:#9acbd7; background:#effbfe; font-size:.82rem; }.creekside-writing-visitor{display:flex;flex:0 0 72px;align-items:flex-end;justify-content:center;pointer-events:none}.creekside-writing-visitor img{width:72px;max-height:92px;object-fit:contain;object-position:center bottom}.writing-coach .creekside-writing-visitor{float:right;margin:-10px 0 -6px 10px}
@media (max-width:700px) { .writing-app { width:100%; padding:0 0 max(18px,env(safe-area-inset-bottom)); }.app-header,.privacy-note { margin-right:12px; margin-left:12px; }.app-header { padding-top:18px; flex-wrap:wrap; gap:10px; }.save-status { margin-left:0; }.library-view,.editor-view { border-right:0; border-left:0; border-radius:0; box-shadow:none; }.library-view { min-height:calc(100dvh - 190px); padding:18px 14px; }.library-heading { align-items:center; }.idea-deck { align-items:start; flex-direction:column; margin-top:20px; }.idea-actions { justify-content:start; }.document-list { grid-template-columns:1fr; }.document-card { min-height:104px; }.editor-view { min-height:100dvh; }.editor-header { position:sticky; top:0; z-index:5; padding-top:max(8px,env(safe-area-inset-top)); }.editor-status { display:none; }.editor-title-row { padding:20px 18px 7px; }.editor-tools { position:sticky; top:58px; z-index:4; flex-wrap:nowrap; overflow:auto; padding:8px 18px; }.tool-spacer { display:none; }.editor-tools button { flex:0 0 auto; }.review-button { margin-left:4px; }.story-editor { width:calc(100% - 24px); min-height:calc(100dvh - 250px); margin:12px auto max(30px,env(safe-area-inset-bottom)); padding:17px; font-size:1.08rem; line-height:1.75; }.writing-coach { width:calc(100% - 24px); }.privacy-note { font-size:.84rem; } }
@media (min-width:701px) and (max-width:980px) { .writing-app { width:min(100% - 24px,900px); }.editor-view { min-height:calc(100dvh - 160px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.library-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }