:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{margin:0;padding:0;min-height:100vh;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;justify-content:center;align-items:flex-start}.app{max-width:900px;padding:3rem;font-family:inherit}h1{color:#2d3748;text-align:center;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{color:#4a5568;margin-top:2rem;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.controls{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;margin-bottom:3rem;justify-content:center}.controls button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:.75rem;cursor:pointer;font-size:1rem;font-weight:500;box-shadow:0 4px 15px #667eea4d;transition:all .3s ease;position:relative;overflow:hidden}.controls button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.controls button:hover:before{left:100%}.controls button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.controls button:disabled{background:linear-gradient(135deg,#a0aec0,#718096);cursor:not-allowed;transform:none;box-shadow:0 2px 8px #0000001a}.dynamic-anchor{background:linear-gradient(145deg,#fff,#f7fafc);border:2px solid #667eea;border-radius:.75rem;padding:1.5rem;text-align:center;font-weight:600;color:#2d3748;position:relative;margin:1rem 0;opacity:0;animation:anchorAppear .4s ease-out .2s forwards;box-shadow:0 4px 15px #667eea1a;transition:all .3s ease}.dynamic-anchor:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea33}.portal-content{padding:1rem 1.5rem;margin:.75rem 0;border-radius:.75rem;font-size:.95rem;font-weight:500;border:2px solid;position:relative;opacity:0;animation:portalAppear .4s ease-out 1s forwards;box-shadow:0 4px 15px #0000001a;transition:all .3s ease}.portal-content:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.portal-content.append{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-color:#28a745;color:#155724;animation:portalAppearFromRight .4s ease-out 1s forwards}.portal-content.prepend{background:linear-gradient(135deg,#cce5ff,#b8daff);border-color:#007bff;color:#004085;animation:portalAppearFromLeft .4s ease-out 1s forwards}.portal-content.before{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border-color:#ffc107;color:#856404;animation:portalAppearFromLeft .4s ease-out 1s forwards}.portal-content.after{background:linear-gradient(135deg,#f8d7da,#f1b0b7);border-color:#dc3545;color:#721c24;animation:portalAppearFromRight .4s ease-out 1s forwards}.portal-content.dynamic{background-color:#ffeaa7;border-color:#fdcb6e;color:#6c5ce7;font-weight:700}.portal-preview{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px dashed #667eea;border-radius:1rem;background:linear-gradient(145deg,#f7fafc,#edf2f7);padding:1.5rem;position:relative;overflow:hidden}.portal-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(102,126,234,.03) 50%,transparent 70%);pointer-events:none}.portal-preview:empty:before{content:"📍 Target anchor is hidden. Portal content will not appear.";opacity:.8;font-weight:500;color:#4a5568;text-align:center;font-size:1.1rem}.instructions{margin-top:2rem;padding:2.5rem;background:linear-gradient(145deg,#f7fafc,#edf2f7);border-radius:1rem;border:1px solid rgba(102,126,234,.2);box-shadow:0 4px 15px #0000000d}.instructions ul{margin:1rem 0;padding-left:2rem}.instructions li{margin:.5rem 0;line-height:1.5}.instructions strong{color:#646cff;font-family:monospace;background-color:#f1f3f4;padding:.125rem .25rem;border-radius:.25rem}.instructions p{margin-top:1rem;color:#6c757d;font-style:italic}@media (max-width: 768px){.app{padding:1rem}.controls{flex-direction:column}.controls button{width:100%}}@keyframes anchorAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes portalAppear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes portalAppearFromLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes portalAppearFromRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.portal-content:before{content:"Portal";position:absolute;top:-.75rem;left:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:1rem;z-index:1;box-shadow:0 2px 8px #667eea4d}.dynamic-anchor:before{content:"Anchor";position:absolute;top:-.75rem;left:1rem;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:1rem;z-index:1;box-shadow:0 2px 8px #48bb784d}