*{box-sizing:border-box;margin:0;padding:0}body{background:#080c10}.sf-root{min-height:100vh;background:radial-gradient(ellipse at 20% 0%,#141c28,#0c1218,#060810);color:#c4d0d8;font-family:IM Fell English,serif;position:relative;overflow:hidden}.rune-particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.rune-particle{position:absolute;left:var(--x);top:-2rem;font-size:var(--size);color:#7abecc;animation:runeFloat var(--duration) var(--delay) infinite linear}@keyframes runeFloat{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.25}90%{opacity:.1}to{transform:translateY(105vh) rotate(360deg);opacity:0}}.sf-header{position:relative;z-index:10;text-align:center;padding:2rem 1rem .5rem;border-bottom:1px solid rgba(122,190,204,.2)}.sf-title{font-family:Cinzel Decorative,serif;font-size:clamp(1.4rem,4vw,2.2rem);color:#7abecc;text-shadow:0 0 30px rgba(122,190,204,.6),0 0 60px rgba(122,190,204,.2);letter-spacing:3px}.sf-subtitle{font-size:.8rem;color:#6a7c8c;letter-spacing:2px;font-style:italic;margin-top:.3rem}.sf-body{display:flex;position:relative;z-index:5;height:calc(100vh - 90px)}.sf-sidebar{width:260px;min-width:260px;border-right:1px solid rgba(122,190,204,.15);background:#080e14b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;overflow:hidden}.sf-sidebar-header{padding:1rem;border-bottom:1px solid rgba(122,190,204,.1);font-family:Cinzel,serif;font-size:.7rem;letter-spacing:2px;color:#88a4b4;text-transform:uppercase}.sf-add-area{padding:1rem;border-bottom:1px solid rgba(122,190,204,.1)}.sf-input{width:100%;background:#7abecc0d;border:1px solid rgba(122,190,204,.25);color:#c4d0d8;padding:.5rem .7rem;font-family:IM Fell English,serif;font-size:.9rem;outline:none;border-radius:2px;transition:border-color .2s,box-shadow .2s}.sf-input:focus{border-color:#7abecc;box-shadow:0 0 12px #7abecc33}.sf-input::placeholder{color:#4a5868;font-style:italic}.sf-btn{width:100%;margin-top:.5rem;padding:.5rem;background:linear-gradient(135deg,#1a3c4a,#7abecc);border:none;color:#080c10;font-family:Cinzel,serif;font-size:.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:opacity .2s,transform .1s}.sf-btn:hover{opacity:.9;transform:translateY(-1px)}.sf-btn:active{transform:translateY(0)}.sf-skills-list{overflow-y:auto;flex:1;padding:.5rem}.sf-skill-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:2px;cursor:pointer;transition:background .15s;border:1px solid transparent}.sf-skill-item:hover{background:#7abecc12}.sf-skill-item.active{background:#7abecc1a;border-color:#7abecc40}.sf-skill-icon{font-size:1.1rem}.sf-skill-info{flex:1;min-width:0}.sf-skill-name{font-family:Cinzel,serif;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sf-skill-level-badge{font-size:.6rem;color:#6a7c8c;font-style:italic}.sf-xp-btn{background:none;border:1px solid rgba(122,190,204,.3);color:#7abecc;width:22px;height:22px;font-size:.9rem;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}.sf-xp-btn:hover{background:#7abecc26}.sf-canvas{flex:1;overflow:auto;position:relative}.sf-svg{display:block;min-width:800px}.sf-info{width:240px;min-width:240px;border-left:1px solid rgba(122,190,204,.15);background:#080e14b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.2rem;overflow-y:auto}.sf-info-title{font-family:Cinzel Decorative,serif;font-size:1rem;color:#7abecc;text-shadow:0 0 15px rgba(122,190,204,.5);margin-bottom:.3rem}.sf-info-level{font-size:.75rem;letter-spacing:2px;font-style:italic;color:#88a4b4;margin-bottom:1rem;font-family:Cinzel,serif}.sf-divider{border:none;border-top:1px solid rgba(122,190,204,.15);margin:.8rem 0}.sf-section-title{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:#4a5868;margin-bottom:.5rem}.sf-synergy-tag{display:inline-block;background:#7abecc14;border:1px solid rgba(122,190,204,.2);color:#90c0d4;font-size:.72rem;padding:.2rem .5rem;margin:.2rem .15rem .2rem 0;border-radius:2px;font-style:italic;cursor:pointer;transition:background .15s}.sf-synergy-tag:hover{background:#7abecc2e}.sf-xp-bar-wrap{margin:.8rem 0}.sf-xp-bar-bg{height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden}.sf-xp-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}.sf-xp-label{font-size:.68rem;color:#4a5868;margin-top:.3rem;font-family:Cinzel,serif;letter-spacing:1px}.sf-lore{font-size:.78rem;color:#6a7c8c;font-style:italic;line-height:1.6}.sf-empty{color:#3a4858;font-style:italic;font-size:.85rem;text-align:center;padding:2rem 1rem;line-height:1.8}.sf-lvlup-btn{width:100%;margin-top:1rem;padding:.6rem;background:linear-gradient(135deg,#1a3c4a,#7abecc);border:none;color:#080c10;font-family:Cinzel,serif;font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:2px;transition:opacity .2s,box-shadow .2s}.sf-lvlup-btn:hover{opacity:.9;box-shadow:0 0 16px #7abecc66}.edge-line{transition:opacity .3s}@keyframes pulse{0%,to{r:36;opacity:.9}50%{r:42;opacity:.4}}.pulse-ring{animation:pulse 1.5s ease-in-out infinite}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#7abecc4d;border-radius:2px}