@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--ink:#202b29;--muted:#71807a;--paper:#f7f7f2;--white:#fff;--line:#e5e8df;--green:#245a46;--green2:#dfece1;--orange:#e6a15c;--shadow:0 12px 34px rgba(32,43,41,.055)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:14px;line-height:1.55}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}.topbar{height:82px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:700;font-size:16px;line-height:1.25}.brand:hover{text-decoration:none}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:4px}.brand-mark{width:40px;height:40px;border-radius:13px;background:var(--green);color:white;display:grid;place-items:center;font-size:21px}.top-user{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:13px}.top-user form{margin:0}.text-button,.delete-link{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer}.text-button:hover,.delete-link:hover{color:#a34839}.shell{max-width:1120px;margin:0 auto;padding:36px 24px 20px}.hero{display:flex;align-items:center;justify-content:space-between;min-height:265px;background:#e9efe5;border-radius:24px;padding:38px 56px;margin:0 0 40px;overflow:hidden;position:relative}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#62816c}.hero h1{font-size:48px;line-height:1.06;letter-spacing:-1.8px;margin:12px 0 14px;font-weight:600}.hero h1 em{font-family:'Playfair Display',serif;color:var(--green);font-weight:500}.hero-copy{max-width:390px;color:#62736a;font-size:14px}.hero-art{width:290px;height:200px;position:relative;flex-shrink:0}.orbit{position:absolute;border:1px solid #b4c9b6;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:260px;height:150px;left:5px;top:20px}.orbit-two{width:190px;height:210px;left:40px;top:-5px;transform:rotate(42deg)}.script{position:absolute;font-size:38px;font-family:serif;background:#f9f8ee;border:1px solid #dce5d8;box-shadow:var(--shadow);width:68px;height:68px;display:grid;place-items:center;border-radius:20px;color:var(--green)}.script-one{left:26px;top:15px;transform:rotate(-9deg)}.script-two{left:126px;top:66px;transform:rotate(8deg)}.script-three{right:15px;top:7px;transform:rotate(12deg)}.art-note{position:absolute;right:14px;bottom:4px;color:#6e8573;font-family:'Playfair Display',serif;font-style:italic;font-size:17px}.dashboard-head,.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.dashboard-head{margin-bottom:20px}.dashboard-head h2{font-size:25px;letter-spacing:-.6px;margin:5px 0}.count-pill{display:inline-block;font-size:11px;letter-spacing:0;background:#e4ebe1;color:#53725a;padding:4px 9px;border-radius:20px;vertical-align:middle;margin-left:6px}.muted{color:var(--muted);margin:5px 0}.primary{border:0;border-radius:10px;background:var(--green);color:white;font:600 13px 'DM Sans',sans-serif;padding:12px 17px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s}.primary:hover{background:#174331;transform:translateY(-1px)}.primary:disabled{opacity:.45;cursor:not-allowed}.full{width:100%;padding:14px}.new-project-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;display:grid;grid-template-columns:44px 1fr;gap:8px 16px;box-shadow:var(--shadow);margin-bottom:34px}.new-project-icon{width:42px;height:42px;border-radius:12px;background:var(--green2);color:var(--green);display:grid;place-items:center;font-size:24px;grid-row:span 2}.new-project-intro h3{margin:0;font-size:15px}.new-project-intro p{font-size:12px;margin:2px 0 14px}.new-project-form{grid-column:2;display:flex;gap:10px}.new-project-form input,.new-project-form select,.editor-meta input,.editor-meta select,.stack input{min-width:0;border:1px solid #dfe4dc;border-radius:9px;background:#fbfcf9;color:var(--ink);font:inherit;padding:11px 12px;outline:none}.new-project-form input{flex:1}.new-project-form select{width:250px}.new-project-form input:focus,.new-project-form select:focus,.editor-meta input:focus,.editor-meta select:focus,.stack input:focus{border-color:#8cab91;box-shadow:0 0 0 3px #eaf1e8}.projects-section{margin-bottom:42px}.section-title{margin-bottom:15px}.section-title h3{font-size:17px;margin:0}.section-title span{font-size:12px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.project-card{background:white;border:1px solid var(--line);border-radius:16px;padding:18px 18px 12px;min-height:206px;display:flex;flex-direction:column;box-shadow:0 5px 20px rgba(32,43,41,.025)}.project-card-top,.project-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.language-tag{font-size:10px;color:#55735d;background:#edf3e9;padding:5px 8px;border-radius:7px}.card-dot{font-size:9px;color:#a9c6a8}.project-card h3{font-size:16px;margin:16px 0 7px;overflow-wrap:anywhere}.project-preview{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 17px;overflow-wrap:anywhere}.project-card-bottom{font-size:10px;color:#87918a;border-top:1px solid #f0f1eb;padding-top:11px;margin-top:auto}.project-card-bottom a{font-size:11px;font-weight:700}.delete-link{font-size:10px;padding:8px 0 0}.empty-state{text-align:center;background:#fff;border:1px dashed #d6ded3;border-radius:17px;padding:42px 20px}.empty-icon{font-size:30px;color:#7fa083}.empty-state h3{margin:9px 0 4px;font-size:16px}.language-strip{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#f0eee5;border-radius:16px;padding:23px 25px;margin-bottom:28px}.language-strip h3{font-size:16px;margin:5px 0 0}.language-cloud{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.language-cloud span{background:#fff;border:1px solid #e6e6da;border-radius:20px;padding:6px 10px;font-size:11px;color:#647367}footer{border-top:1px solid var(--line);padding:19px 0 5px;display:flex;justify-content:space-between;gap:15px;color:#909a91;font-size:10px}.auth-card{max-width:430px;margin:40px auto 80px;padding:34px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.auth-card h1{font-size:28px;line-height:1.2;letter-spacing:-.7px;margin:10px 0}.auth-card>p{margin-bottom:23px}.stack{display:flex;flex-direction:column;gap:15px;margin-top:24px}.stack label,.editor-meta label{font-size:12px;font-weight:600;color:#4c5b52;display:flex;flex-direction:column;gap:7px}.stack input{width:100%;padding:13px}.hint{font-size:10px;color:var(--muted);font-weight:400}.auth-foot{font-size:12px;text-align:center;margin:22px 0 0!important}.notice{padding:12px 15px;border-radius:10px;margin:0 0 20px;font-size:13px}.notice.error{background:#fff0ed;color:#8b3428}.notice.success{background:#e8f4e8;color:#285c39}.back-link{display:inline-block;margin:0 0 18px;font-size:12px}.editor-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.editor-head h1{font-size:28px;letter-spacing:-.8px;margin:5px 0}.editor-actions{display:flex;align-items:center;gap:14px}.word-count{font-size:12px;color:var(--muted)}.editor-card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.editor-meta{display:flex;gap:18px;padding:20px;border-bottom:1px solid var(--line)}.title-label{flex:1}.language-label{width:280px}.editor-meta input,.editor-meta select{width:100%;font-size:14px;font-weight:400}.editor-card textarea{display:block;width:100%;min-height:54vh;resize:vertical;border:0;outline:none;padding:28px 30px;font:18px/1.9 'DM Sans',system-ui,sans-serif;color:#26332c;background:#fff;white-space:pre-wrap}.editor-card textarea::placeholder{color:#b5bdb5}.editor-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #f0f1eb;padding:12px 20px;font-size:10px;color:#929b93}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.topbar{height:70px;padding:0 18px}.shell{padding:22px 16px}.hero{padding:28px 25px;min-height:230px}.hero h1{font-size:38px}.hero-art{width:190px;transform:scale(.75);transform-origin:center right;margin-left:-40px}.hero-copy{max-width:310px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.language-strip{align-items:flex-start;flex-direction:column}.language-cloud{justify-content:flex-start}.new-project-form{flex-wrap:wrap}.new-project-form input{flex-basis:100%}.new-project-form select{flex:1;width:auto}.editor-meta{flex-direction:column}.language-label{width:100%}.editor-head{align-items:flex-start;flex-direction:column}.editor-actions{width:100%;justify-content:space-between}}
@media(max-width:480px){.hero{padding:25px 21px}.hero-art{display:none}.hero h1{font-size:40px}.project-grid{grid-template-columns:1fr}.dashboard-head{align-items:flex-start}.dashboard-head h2{font-size:21px}.dashboard-head>.primary{padding:10px 11px;font-size:11px}.new-project-card{padding:16px;grid-template-columns:35px 1fr;gap:8px 11px}.new-project-icon{width:35px;height:35px}.new-project-form{grid-column:1/-1}.new-project-form select{flex-basis:100%}.new-project-form button{width:100%}.auth-card{margin:18px auto 50px;padding:25px}.top-user{gap:8px;font-size:11px}.editor-card textarea{padding:20px;min-height:50vh;font-size:16px}footer{flex-direction:column;gap:4px}}

/* Language keyboard */
.keyboard-panel{margin:0 20px 18px;padding:15px;background:#f5f7f1;border:1px solid #e2e8dc;border-radius:13px}
.keyboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.keyboard-head strong{display:block;font-size:13px;color:#344d3c}
.keyboard-head span{display:block;color:#77857a;font-size:11px;margin-top:2px}
.keyboard-hide{border:1px solid #dce4d8;background:#fff;border-radius:7px;padding:6px 10px;font:inherit;font-size:11px;color:#4c6753;cursor:pointer}
.keyboard-keys{display:flex;flex-direction:column;gap:6px}
.keyboard-row{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.key{min-width:34px;min-height:38px;padding:6px 9px;border:1px solid #dfe5db;border-bottom-width:2px;border-radius:7px;background:#fff;color:#263d30;font:17px/1.2 system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 0 rgba(20,40,25,.02)}
.key:hover,.key:focus-visible{background:#e3efe0;border-color:#9ab99a;outline:2px solid #c6ddc4;outline-offset:1px}
.keyboard-actions{display:flex;gap:7px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.key-wide{font-size:11px;min-width:75px;min-height:34px}
@media(max-width:480px){.keyboard-panel{margin:0 10px 12px;padding:10px}.key{min-width:30px;min-height:36px;padding:5px 7px;font-size:16px}.keyboard-head{align-items:flex-start}}