:root{--bg:#090710;--surface:#110d1b;--surface2:#171122;--panel:rgba(23,17,34,.82);--text:#f8f3ff;--muted:#a89bb7;--pink:#ff6cae;--purple:#9b7bff;--cyan:#79e8ff;--line:rgba(255,255,255,.1);--shadow:0 24px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Plus Jakarta Sans",sans-serif;line-height:1.5}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{color:inherit}a{color:inherit;text-decoration:none}.hidden{display:none!important}
body:not(.dark){--bg:#f7f3fb;--surface:#fff;--surface2:#f3edf8;--panel:rgba(255,255,255,.9);--text:#21182b;--muted:#71647e;--line:rgba(40,20,55,.11);--shadow:0 20px 60px rgba(70,45,90,.12)}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.ambient i{position:absolute;width:40vw;height:40vw;border-radius:50%;filter:blur(110px);opacity:.1}.ambient i:nth-child(1){background:var(--pink);top:-20%;right:-15%}.ambient i:nth-child(2){background:var(--purple);bottom:-25%;left:-10%}.ambient i:nth-child(3){background:var(--cyan);top:50%;left:45%;width:20vw;height:20vw}
.kicker{margin:0 0 12px;color:var(--pink);font:700 11px/1.3 Orbitron,sans-serif;letter-spacing:.2em}.primary-btn{border:0;border-radius:12px;background:linear-gradient(100deg,var(--purple),var(--pink));box-shadow:0 12px 30px rgba(255,108,174,.2);cursor:pointer;font-weight:800}
.login-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(155,123,255,.15),transparent 35%),#08060e}.login-box{width:min(900px,100%);min-height:570px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#100c19;box-shadow:0 35px 100px #000}.login-art{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(8,6,14,.2),#0e0918),url("../img/banner-seodins.jpg") center/cover}.login-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,#100c19)}.moon{position:absolute;width:230px;height:230px;left:50%;top:50%;transform:translate(-50%,-52%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ffb5d5 42%,#9b7bff 72%);box-shadow:0 0 70px rgba(255,108,174,.5)}.dragon-large{position:absolute;z-index:2;left:50%;top:50%;color:#160d23;font:800 170px/1 serif;transform:translate(-50%,-50%) rotate(-8deg);text-shadow:0 5px rgba(255,255,255,.1);animation:dragonFloat 4s ease-in-out infinite}.spark{position:absolute;z-index:3;color:#fff;animation:twinkle 2s ease-in-out infinite}.s1{top:18%;left:20%}.s2{top:32%;right:15%;animation-delay:.7s}.s3{bottom:20%;left:30%;animation-delay:1.2s}.login-content{padding:58px 48px;display:flex;flex-direction:column;justify-content:center}.login-logo{width:150px;max-height:65px;object-fit:contain;object-position:left;margin-bottom:30px}.login-content h1{margin:0;font-size:34px;letter-spacing:-.04em}.login-copy{color:var(--muted);font-size:14px;margin:12px 0 26px}.login-content form{display:grid;gap:16px}.login-content label,.modal-box label{display:grid;gap:7px;color:#bfb3c9;font-size:12px;font-weight:700}.login-content input,.modal-box input{width:100%;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.055);color:#fff;padding:13px 15px;outline:0}.login-content input:focus,.modal-box input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,108,174,.1)}.login-content .primary-btn{display:flex;justify-content:space-between;padding:14px 18px;margin-top:4px}.error{min-height:20px;margin:0;color:#ff7c96;font-size:12px}.login-benefits{display:flex;gap:14px;margin-top:18px;color:#9587a3;font-size:10px}
.topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(9,7,16,.84);backdrop-filter:blur(18px)}body:not(.dark) .topbar{background:rgba(247,243,251,.86)}.top-inner{max-width:1180px;height:74px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.site-logo{display:flex;align-items:center;gap:12px}.site-logo img{width:48px;height:38px;object-fit:contain}.site-logo>span{font:800 13px/1.1 Orbitron,sans-serif;letter-spacing:.12em}.site-logo small{display:block;color:var(--muted);font:600 7px/2 Orbitron,sans-serif;letter-spacing:.18em}.topbar nav{display:flex;align-items:center;gap:7px}.topbar nav a,.topbar nav button{border:0;background:transparent;padding:10px;color:var(--muted);font:700 10px Orbitron,sans-serif;cursor:pointer;transition:.25s}.topbar nav a:hover,.topbar nav button:hover{color:var(--pink)}#logoutBtn{margin-left:6px!important;border:1px solid var(--line)!important;border-radius:9px!important}
.anime-hero{position:relative;max-width:1180px;min-height:380px;margin:24px auto 0;padding:64px;display:flex;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(105deg,rgba(10,7,17,.94) 15%,rgba(18,10,30,.72)),url("../img/banner-seodins.jpg") center/cover;box-shadow:var(--shadow)}.hero-copy{position:relative;z-index:3;max-width:520px}.hero-copy h1{margin:0;font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.055em}.hero-copy h1 em{color:transparent;font-style:normal;background:linear-gradient(90deg,var(--pink),#d2a7ff);background-clip:text;-webkit-background-clip:text}.hero-copy>p:last-child{max-width:440px;color:#b8acc4;font-size:14px}.hero-clock{position:absolute;z-index:4;right:34px;bottom:25px;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:7px;font:700 23px Orbitron,sans-serif}.hero-clock span{padding:8px 10px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(8,6,14,.7)}.hero-clock b{color:var(--pink);animation:blink 1s steps(1) infinite}.hero-clock small{grid-column:1/-1;text-align:right;color:#aaa0b5;font-size:8px;letter-spacing:.1em}.dragon-scene{position:absolute;right:5%;top:50%;width:330px;height:330px;transform:translateY(-50%)}.dragon-glyph{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:rgba(10,6,16,.82);font:800 180px serif;text-shadow:0 0 2px rgba(255,255,255,.3),0 0 45px rgba(255,108,174,.35);animation:dragonFloat 4s ease-in-out infinite}.orbit{position:absolute;inset:30px;border:1px solid rgba(255,108,174,.35);border-radius:48% 52% 45% 55%;animation:spin 14s linear infinite}.orbit-two{inset:60px;border-color:rgba(121,232,255,.25);animation-direction:reverse;animation-duration:9s}.dragon-tail{position:absolute;z-index:1;width:210px;height:70px;right:20px;bottom:44px;border:3px solid transparent;border-bottom-color:var(--pink);border-radius:50%;filter:drop-shadow(0 0 7px var(--pink));animation:tail 3s ease-in-out infinite}.star{position:absolute;color:#fff;font-style:normal;animation:twinkle 2s ease-in-out infinite}.star-1{top:25px;left:50px}.star-2{right:15px;top:100px;animation-delay:.7s}.star-3{left:10px;bottom:75px;animation-delay:1.3s}
.container{max-width:1180px;margin:0 auto;padding:28px 24px 80px}.counter-head{display:grid;grid-template-columns:1fr 1fr auto;gap:1px;margin-bottom:14px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--line)}.counter-head>div{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:12px;padding:19px 24px;background:var(--surface)}.counter-head span{grid-column:1/-1;color:var(--muted);font:700 8px Orbitron,sans-serif;letter-spacing:.16em}.counter-head strong{font:700 35px/1 Orbitron,sans-serif}.counter-head small{color:var(--muted)}.counter-head>p{display:flex;align-items:center;gap:8px;margin:0;padding:0 24px;background:var(--surface);color:var(--muted);font-size:11px}.counter-head>p i{width:7px;height:7px;border-radius:50%;background:#61f5ad;box-shadow:0 0 12px #61f5ad;animation:blink 2s infinite}
.workspace-shell{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.toolbar{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:1px solid var(--line);overflow-x:auto}.toolbar button{min-width:72px;padding:13px 5px;border:0;border-right:1px solid var(--line);background:transparent;cursor:pointer}.toolbar button:hover{background:rgba(255,108,174,.08);color:var(--pink)}.toolbar b{display:block;font:600 17px Orbitron,sans-serif}.toolbar span{display:block;margin-top:5px;color:var(--muted);font:700 7px Orbitron,sans-serif}.editor-wrap{position:relative}.document-bar{min-height:59px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--line)}#title{min-width:0;flex:1;border:0;background:transparent;color:var(--text);font-size:16px;font-weight:700;outline:0}.document-bar>div{display:flex;align-items:center;gap:7px}.document-bar button{width:33px;height:33px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);cursor:pointer}#saveState{margin-right:8px;color:#6be7ad;font:700 8px Orbitron,sans-serif;letter-spacing:.08em}#editor{display:block;width:100%;min-height:510px;resize:vertical;border:0;background:transparent;color:var(--text);padding:34px;font:400 18px/1.85 "Plus Jakarta Sans",sans-serif;outline:0}#editor::placeholder{color:var(--muted);opacity:.55}.editor-status{display:flex;justify-content:space-between;padding:10px 18px;border-top:1px solid var(--line);color:var(--muted);font:600 9px Orbitron,sans-serif}.case-menu{position:absolute;right:18px;top:60px;z-index:5;width:180px;padding:7px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);box-shadow:var(--shadow)}.case-menu button{width:100%;padding:9px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.case-menu button:hover{background:rgba(255,108,174,.1)}#deleteBtn{color:#ff7891}
.document-strip,.result-card,.goal-box,.about{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.doc-title,.card-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}.doc-title small,.card-heading small,.goal-box small{display:block;margin-bottom:4px;color:var(--pink);font:700 8px Orbitron,sans-serif;letter-spacing:.15em}.doc-title b,.card-heading h2{margin:0;font-size:18px}.doc-title button{border:1px solid rgba(255,108,174,.35);border-radius:9px;background:rgba(255,108,174,.08);color:var(--pink);padding:9px 12px;font:700 9px Orbitron,sans-serif;cursor:pointer}#docList{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px}.doc{position:relative;min-height:90px;padding:17px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);cursor:pointer;transition:.25s}.doc:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;background:transparent}.doc:hover,.doc.active{transform:translateY(-2px);border-color:rgba(255,108,174,.45)}.doc.active:before{background:var(--pink);box-shadow:0 0 9px var(--pink)}.doc b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.doc span{display:block;margin-top:17px;color:var(--muted);font-size:9px}.results-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px}.card-heading>span{border:1px solid var(--line);border-radius:100px;padding:5px 8px;color:var(--muted);font:700 7px Orbitron,sans-serif}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.detail-grid>div{padding:23px;background:var(--surface)}.detail-grid b{display:block;color:var(--text);font:700 24px Orbitron,sans-serif}.detail-grid span{color:var(--muted);font-size:10px}.keywords{padding:18px 22px}.keywords>p{color:var(--muted);font-size:12px}.keyword{display:grid;grid-template-columns:100px 1fr 28px;align-items:center;gap:10px;margin:12px 0;font-size:10px}.keyword b{overflow:hidden;text-overflow:ellipsis}.keyword i{height:4px;border-radius:5px;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 8px rgba(255,108,174,.45)}.keyword span{color:var(--muted);text-align:right}.goal-box{display:grid;grid-template-columns:1fr auto;align-items:center;padding:23px}.goal-box h2{margin:0;font-size:18px}.goal-box p{margin:5px 0 0;color:var(--muted);font-size:11px}.goal-box>b{font:700 11px Orbitron,sans-serif}.progress{grid-column:1/-1;height:6px;margin-top:17px;overflow:hidden;border-radius:10px;background:var(--surface2)}.progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 12px var(--pink);transition:width .4s}.about{position:relative;min-height:250px;display:grid;grid-template-columns:260px 1fr;align-items:center;overflow:hidden;padding:45px}.about-mark{color:rgba(255,108,174,.12);font:800 90px serif;text-align:center;animation:dragonFloat 4s ease-in-out infinite}.about h2{margin:0;font-size:29px}.about p{max-width:700px;color:var(--muted);font-size:13px}
footer{max-width:1180px;margin:auto;padding:25px 24px 35px;display:flex;align-items:center;gap:13px;color:var(--muted);font-size:10px}footer img{width:42px;height:42px;object-fit:contain;border-radius:10px}footer div{display:grid}footer b{color:var(--text);font:700 10px Orbitron,sans-serif}footer>span{margin-left:auto;font-style:italic}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(5,3,9,.78);backdrop-filter:blur(9px)}.modal-box{position:relative;width:min(430px,100%);display:grid;gap:15px;padding:32px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.modal-box h2{margin:0 0 5px}.modal-close{position:absolute;right:14px;top:14px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}.modal-box input{color:var(--text);background:var(--surface2)}.modal-box .primary-btn{padding:13px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:.3}}@keyframes twinkle{50%{transform:scale(1.7) rotate(20deg);opacity:.25}}@keyframes dragonFloat{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes tail{50%{transform:rotate(-8deg) translateX(-8px)}}
@media(max-width:900px){.anime-hero{padding:45px 35px}.dragon-scene{right:-8%;opacity:.75}.results-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:repeat(6,1fr)}#docList{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:680px){.login-overlay{padding:10px}.login-box{grid-template-columns:1fr;min-height:0}.login-art{display:none}.login-content{padding:38px 27px}.login-benefits{flex-wrap:wrap}.top-inner{height:64px;padding:0 14px}.site-logo>span{display:none}.topbar nav{gap:0}.topbar nav a{display:none}.topbar nav button span{display:none}.anime-hero{min-height:350px;margin:12px 10px 0;padding:35px 24px;align-items:flex-start}.hero-copy h1{font-size:42px}.hero-copy>p:last-child{max-width:260px}.dragon-scene{width:250px;height:250px;top:67%;right:-12%}.dragon-glyph{font-size:130px}.hero-clock{left:24px;right:auto;bottom:24px}.container{padding:18px 10px 55px}.counter-head{grid-template-columns:1fr 1fr}.counter-head>div{padding:15px}.counter-head>p{display:none}.counter-head strong{font-size:28px}.toolbar{grid-template-columns:repeat(4,1fr)}#editor{min-height:430px;padding:23px 18px;font-size:16px}.document-bar{align-items:flex-start;gap:8px;flex-direction:column}.document-bar>div{width:100%}#saveState{margin-right:auto}#docList{grid-template-columns:1fr}.detail-grid{grid-template-columns:repeat(2,1fr)}.goal-box{grid-template-columns:1fr}.goal-box>b{margin-top:14px}.about{grid-template-columns:1fr;padding:30px 24px}.about-mark{display:none}footer>span{display:none}}
@media print{.topbar,.anime-hero,.counter-head,.toolbar,.document-strip,.results-grid,.goal-box,.about,footer,.document-bar,.editor-status{display:none!important}.container{padding:0}.workspace-shell{border:0;box-shadow:none}#editor{min-height:100vh;color:#000;background:#fff}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

/* Compact YouTube and SoundCloud player. */
.media-tool{display:block;padding:0!important;min-height:0}.media-tool-head{height:67px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line)}.media-tool-head small{display:block;margin-bottom:4px;color:var(--pink);font:700 8px Orbitron,sans-serif;letter-spacing:.15em}.media-tool-head b{display:block;font-size:18px}.media-tool-head button{border:1px solid var(--line);border-radius:20px;background:var(--surface2);color:var(--muted);padding:6px 9px;font:700 7px Orbitron,sans-serif;cursor:pointer}.media-tool-head button span{display:inline-block;margin-left:3px;font-size:10px;transition:transform .25s}.media-tool.collapsed .media-tool-head{border-bottom:0}.media-tool.collapsed .media-tool-head button span{transform:rotate(180deg)}.media-body{height:auto;padding:18px 22px 22px;overflow:hidden;opacity:1;visibility:visible;transition:opacity .2s}.media-tool.collapsed .media-body{height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden;pointer-events:none}.media-form{display:flex;gap:7px}.media-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--text);padding:11px 12px;outline:0;font-size:11px}.media-form input:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,108,174,.08)}.media-form button{border:1px solid rgba(255,108,174,.38);border-radius:9px;background:rgba(255,108,174,.1);color:var(--pink);padding:0 14px;font:700 8px Orbitron,sans-serif;cursor:pointer}.media-form button:hover{background:rgba(255,108,174,.18)}.media-error{min-height:15px;max-width:none!important;margin:5px 2px 0!important;color:#ff708c!important;font-size:9px!important}.media-player{position:relative;width:100%;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#09070d;color:var(--muted);text-align:center;font-size:10px}.media-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.media-player.soundcloud{aspect-ratio:auto;height:190px}
@media(max-width:680px){.media-tool-head{padding:0 16px}.media-tool-head b{font-size:16px}.media-body{padding:16px}}

/* Layered corner depth for the editor and content cards */
.workspace-shell{border-color:rgba(255,255,255,.13);box-shadow:0 34px 85px rgba(0,0,0,.48),0 12px 30px rgba(0,0,0,.28),-8px 0 30px rgba(155,123,255,.09),8px 0 30px rgba(255,108,174,.1),inset 0 1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(155,123,255,.08),inset -1px 0 0 rgba(255,108,174,.09)}
.workspace-shell:before,.workspace-shell:after{content:"";position:absolute;z-index:3;top:-1px;width:70px;height:70px;pointer-events:none}
.workspace-shell:before{left:-1px;border-top:2px solid rgba(155,123,255,.75);border-left:2px solid rgba(155,123,255,.75);border-radius:20px 0 0;filter:drop-shadow(-3px -3px 7px rgba(155,123,255,.28))}
.workspace-shell:after{right:-1px;border-top:2px solid rgba(255,108,174,.78);border-right:2px solid rgba(255,108,174,.78);border-radius:0 20px 0 0;filter:drop-shadow(3px -3px 7px rgba(255,108,174,.3))}
.toolbar{border-radius:20px 20px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);box-shadow:inset 0 -8px 18px rgba(0,0,0,.08)}
.editor-wrap{border-radius:0 0 20px 20px;box-shadow:inset 18px 0 25px -25px rgba(155,123,255,.8),inset -18px 0 25px -25px rgba(255,108,174,.8)}
.document-strip,.result-card,.goal-box,.about{box-shadow:0 22px 55px rgba(0,0,0,.28),0 7px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055)}
#editor{scrollbar-color:rgba(255,108,174,.55) rgba(255,255,255,.04);scrollbar-width:thin}
#editor::-webkit-scrollbar{width:10px}
#editor::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-left:1px solid var(--line)}
#editor::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:20px;background:linear-gradient(var(--purple),var(--pink)) padding-box}
body:not(.dark) .workspace-shell{border-color:rgba(70,40,90,.14);box-shadow:0 30px 70px rgba(62,38,78,.17),0 10px 24px rgba(62,38,78,.1),-7px 0 25px rgba(155,123,255,.08),7px 0 25px rgba(255,108,174,.09),inset 0 1px #fff}
@media(max-width:680px){.workspace-shell:before,.workspace-shell:after{width:45px;height:45px}.workspace-shell{box-shadow:0 24px 55px rgba(0,0,0,.38),-4px 0 18px rgba(155,123,255,.08),4px 0 18px rgba(255,108,174,.09)}}
@media print{.workspace-shell{border:0;box-shadow:none}.workspace-shell:before,.workspace-shell:after{display:none}}

/* Wide workspace: use the available desktop canvas instead of leaving side gutters. */
.top-inner,.container,footer{max-width:1600px;width:calc(100% - 32px)}
.container{padding-left:0;padding-right:0}
.counter-head,.workspace-shell,.document-strip,.results-grid,.goal-box,.about{width:100%}
.toolbar{grid-template-columns:repeat(12,minmax(82px,1fr))}
.toolbar button:last-child{border-right:0}
.toolbar button:active{transform:translateY(1px);background:rgba(155,123,255,.13)}
.toolbar button:focus-visible,.document-bar button:focus-visible,.doc-title button:focus-visible{position:relative;z-index:4;outline:2px solid var(--pink);outline-offset:-3px}
@media(max-width:680px){.top-inner,.container,footer{width:calc(100% - 20px)}.container{padding-top:18px}.toolbar{grid-template-columns:repeat(4,minmax(78px,1fr))}}

/* Desktop split workspace: writing canvas left, information panels right. */
@media(min-width:1100px){
  .container{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,29vw,460px);grid-template-rows:auto auto auto auto auto;align-items:start;gap:18px}
  .counter-head{grid-column:1;grid-row:1;margin:0}
  .typing-test{grid-column:1;grid-row:2;margin:0}
  .workspace-shell{grid-column:1;grid-row:3 / span 4;margin:0}
  .document-strip{grid-column:2;grid-row:1;margin:0}
  .results-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;gap:18px;margin:0}
  .results-grid .result-card{margin:0}
  .goal-box{grid-column:2;grid-row:3;margin:0;display:grid;grid-template-columns:1fr}
  .goal-box>b{margin-top:12px}
  .about{grid-column:2;grid-row:4;margin:0;min-height:0;display:block;padding:28px}
  .about-mark{display:none}
  .about h2{font-size:22px}
  .about p{font-size:11px}
  #docList{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px}
  .doc{min-height:76px;padding:13px}
  .doc span{margin-top:12px}
  .detail-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid>div{padding:18px}
  .detail-grid b{font-size:20px}
  .card-heading,.doc-title{padding:16px 17px}
  .keyword{grid-template-columns:75px 1fr 25px}
  #editor{min-height:720px}
}

.typing-test{position:relative;margin-bottom:18px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 22px 55px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.055)}
.slug-tool{margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 22px 55px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.055)}
.slug-auto{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.025);color:var(--muted);font-size:11px;cursor:pointer}.slug-auto input{width:15px;height:15px;margin:0;accent-color:#c300ff}.slug-grid{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:12px}.slug-field{position:relative;display:grid;gap:8px;min-width:0}.slug-field>span{color:var(--muted);font:700 9px Orbitron,sans-serif;letter-spacing:.08em}.slug-field textarea{width:100%;height:105px;resize:none;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--text);padding:14px;outline:0;font:600 13px/1.6 "Plus Jakarta Sans",sans-serif}.slug-field textarea:focus{border-color:rgba(255,108,174,.65);box-shadow:0 0 0 3px rgba(255,108,174,.08)}.slug-result textarea{padding-right:66px;background:#09070d;color:#d647ff;font-family:Orbitron,sans-serif;font-size:11px}.slug-generate{width:50px;height:50px;margin-top:17px;border:0;border-radius:50%;background:linear-gradient(135deg,#9b00ff,#df00ff);box-shadow:0 8px 24px rgba(121,232,255,.2);color:#fff;font-size:27px;cursor:pointer}.slug-generate:hover{transform:translateX(2px);filter:brightness(1.12)}#slugCopy{position:absolute;right:9px;bottom:9px;border:1px solid rgba(255,108,174,.35);border-radius:7px;background:#171122;color:var(--pink);padding:6px 8px;font:700 7px Orbitron,sans-serif;cursor:pointer}
.typing-test:after{content:"";position:absolute;right:-50px;bottom:-80px;width:190px;height:190px;border-radius:50%;background:var(--pink);opacity:.07;filter:blur(30px);pointer-events:none}
.typing-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-bottom:1px solid var(--line)}
.typing-heading h2{margin:2px 0 0;font-size:16px}.typing-heading>div>small{color:var(--pink);font:700 7px Orbitron,sans-serif;letter-spacing:.15em}
.typing-stats{display:flex;align-items:center;gap:8px}.typing-stats>span{min-width:52px;text-align:center}.typing-stats b{display:block;font:700 14px Orbitron,sans-serif}.typing-stats small{display:block;color:var(--muted);font:700 6px Orbitron,sans-serif;letter-spacing:.1em}
#typingReset{height:32px;padding:0 11px;border:1px solid rgba(255,108,174,.35);border-radius:8px;background:rgba(255,108,174,.08);color:var(--pink);font:700 8px Orbitron,sans-serif;cursor:pointer}#typingReset:hover{background:rgba(255,108,174,.16)}
.typing-words{position:relative;z-index:1;height:65px;display:flex;align-content:flex-start;flex-wrap:wrap;gap:7px 10px;overflow:hidden;padding:13px 17px 6px;color:#81768d;font:600 14px/1.55 "Plus Jakarta Sans",sans-serif;user-select:none}
.typing-words span{transition:.15s}.typing-words span.active{color:var(--text);text-decoration:underline 2px var(--pink);text-underline-offset:5px}.typing-words span.correct{color:#63e6aa}.typing-words span.wrong{color:#ff708c;text-decoration:line-through}
.typing-words span.active.mistyped{color:#ff708c;text-decoration-color:#ff708c}
#typingInput{position:relative;z-index:1;width:100%;height:42px;padding:7px 17px;border:0;border-top:1px solid var(--line);background:rgba(255,255,255,.018);color:var(--text);outline:0;font-size:13px}#typingInput:focus{box-shadow:inset 3px 0 var(--pink)}#typingInput::placeholder{color:var(--muted);opacity:.58}
.typing-result{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--surface2)}
.typing-result-title{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid var(--line)}.typing-result-title small{display:block;color:var(--pink);font:700 7px Orbitron,sans-serif;letter-spacing:.14em}.typing-result-title h3{margin:3px 0 0;font-size:15px}.typing-result-title button{height:31px;border:1px solid rgba(99,230,170,.4);border-radius:8px;background:rgba(99,230,170,.08);color:#63e6aa;padding:0 11px;font:700 7px Orbitron,sans-serif;cursor:pointer}
.typing-result-grid{display:grid;grid-template-columns:1.15fr repeat(4,1fr)}.typing-result-grid>div{min-width:0;padding:15px 12px;border-right:1px solid var(--line);text-align:center}.typing-result-grid>div:last-child{border-right:0}.typing-result-grid strong{display:block;font:700 15px Orbitron,sans-serif;white-space:nowrap}.typing-result-grid span{display:block;margin-top:5px;color:var(--muted);font-size:8px}.typing-result-grid .typing-result-main strong{color:#63e6aa;font-size:26px}.typing-result-grid .typing-result-main span{font:700 7px Orbitron,sans-serif}
@media(max-width:680px){.typing-result-grid{grid-template-columns:repeat(2,1fr)}.typing-result-grid>div{border-bottom:1px solid var(--line)}.typing-result-grid .typing-result-main{grid-column:1/-1}.typing-result-title{padding:12px}.typing-result-title h3{font-size:13px}}
@media(max-width:1099px){.typing-test{margin-top:0}.typing-words{height:72px}}
@media(max-width:680px){.typing-heading{align-items:flex-start;gap:12px}.typing-stats{gap:3px}.typing-stats>span{min-width:38px}.typing-stats b{font-size:12px}#typingReset{padding:0 7px}.typing-words{font-size:12px}}
@media(max-width:680px){.slug-grid{grid-template-columns:1fr}.slug-generate{width:42px;height:42px;margin:0 auto;transform:rotate(90deg)}.slug-generate:hover{transform:rotate(90deg) translateX(2px)}.slug-field textarea{height:90px}}

/* Independent column flow prevents tall sidebar cards from creating gaps on the left. */
.main-column,.side-column{display:contents}
@media(min-width:1100px){
  .container{grid-template-columns:minmax(0,1fr) clamp(360px,29vw,460px);grid-template-rows:auto}
  .main-column,.side-column{display:flex;min-width:0;flex-direction:column;gap:18px}
  .main-column{grid-column:1}
  .side-column{grid-column:2}
  .main-column>.counter-head,.main-column>.slug-tool,.main-column>.typing-test,.main-column>.workspace-shell,
  .side-column>.document-strip,.side-column>.results-grid,.side-column>.goal-box,.side-column>.about{width:100%;margin:0;grid-column:auto;grid-row:auto}
  .main-column>.workspace-shell{flex:1}
}

/* Jakarta clock in the center of the workspace header. */
.header-clock{position:absolute;left:50%;top:50%;width:250px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;transform:translate(-50%,-50%);font-family:Orbitron,sans-serif}
.header-clock>small{grid-column:1/-1;color:var(--muted);font-size:6px;letter-spacing:.14em}
.header-clock>small i{display:inline-block;width:3px;height:3px;margin:0 5px;border-radius:50%;background:var(--pink);vertical-align:middle}
.header-clock>div{display:flex;align-items:center;gap:7px;font-size:22px;line-height:1}
.header-clock>div strong{min-width:31px}
.header-clock>div b{color:var(--pink);animation:blink 1s steps(1) infinite}
.header-clock>span{grid-column:1;margin-top:3px;color:var(--muted);font-size:7px;text-transform:uppercase}
.header-clock>em{grid-column:2;grid-row:2 / span 2;padding-left:13px;border-left:1px solid var(--line);color:var(--muted);font-size:6px;font-style:normal}
.header-clock>em strong{display:block;color:var(--text);font-size:13px}
@media(max-width:680px){.header-clock{left:auto;right:4px;width:190px;column-gap:8px;transform:translateY(-50%)}.header-clock>small{display:none}.header-clock>div{gap:4px;font-size:17px}.header-clock>div strong{min-width:25px}.header-clock>span{font-size:6px}.header-clock>em{padding-left:8px}}