.home-layout{display:grid;grid-template-columns:1fr 1fr;min-height:0}.avatar-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg) var(--spacing-md);background:var(--color-gray-100);position:relative}.avatar-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.03em;color:var(--color-text);margin-bottom:var(--spacing-md);text-align:center}.avatar-container{position:relative;width:min(280px,60vw);height:min(280px,60vw);cursor:pointer}.avatar{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:40% 60% 55% 45%/45% 50% 60% 55%;border:3px solid var(--color-text);transition:opacity var(--transition-normal),transform var(--transition-normal)}.avatar-handdrawn{opacity:1;z-index:2}.avatar-cyber{opacity:0;z-index:3}.avatar-container:hover .avatar-handdrawn{opacity:0}.avatar-container:hover .avatar-cyber{opacity:1}.avatar-label{margin-top:var(--spacing-md);font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-gray-400);position:relative}.help-btn{margin-top:var(--spacing-md);font-family:var(--font-display);font-size:1.6rem;font-weight:800;letter-spacing:.06em;color:var(--color-text);background:none;border:2px dashed var(--color-text);padding:.5rem 1.6rem;cursor:pointer;border-radius:50%/40% 60% 50% 50%;transition:all var(--transition-fast)}.help-btn:hover{border-style:solid;transform:translateY(-3px);box-shadow:3px 3px 0 var(--color-text)}.cat-note{display:flex;align-items:center;gap:4px;margin-top:var(--spacing-md);align-self:flex-start;margin-left:10%}.cat-pic{width:min(230px,45vw);height:min(230px,45vw);object-fit:contain;border-radius:50% 50% 45% 55%/55% 45% 50% 50%;border:2px dashed var(--color-text);flex-shrink:0;background:#fefefb}.cat-arrow{width:70px;height:45px;color:var(--color-gray-400);flex-shrink:0}.cat-text{font-size:.9rem;line-height:1.6;color:var(--color-text);background:#fefefb;padding:.5rem .8rem;border-radius:25% 75% 60% 40%/55% 35% 65% 45%;border:1.5px dashed var(--color-text);transform:rotate(-2deg);transition:transform var(--transition-fast)}.cat-text:hover{transform:rotate(0);border-style:solid;border-color:var(--color-text)}body.glitch-bg .cat-pic{border-color:#555;background:#111}body.glitch-bg .cat-text{background:#111;color:#aaa;border-color:#555}body.glitch-bg .cat-arrow{color:#555}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-card{background:var(--color-bg);border:3px solid var(--color-text);border-radius:5% 10% 8% 6%/7% 6% 10% 8%;padding:2.5rem 2rem 2rem;max-width:420px;width:90vw;position:relative;box-shadow:6px 6px 0 var(--color-text);transform:translateY(10px);transition:transform var(--transition-normal)}.modal-overlay.open .modal-card{transform:translateY(0)}.modal-close{position:absolute;top:.8rem;right:1rem;font-size:1.3rem;font-weight:700;color:var(--color-gray-400);cursor:pointer;background:none;border:none;transition:color var(--transition-fast)}.modal-close:hover{color:var(--color-text)}.modal-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:1rem;color:var(--color-text)}.modal-body{font-size:.9rem;line-height:1.8;color:var(--color-gray-600)}.modal-body p{margin-bottom:.5rem}.modal-body ul{list-style:none;padding-left:.5rem;margin-bottom:.5rem}.modal-body ul li:before{content:"— ";color:var(--color-accent)}body.glitch-bg .modal-card{background:#111;border-color:var(--color-accent);box-shadow:6px 6px 0 var(--color-accent)}body.glitch-bg .modal-title{color:var(--color-accent)}body.glitch-bg .modal-body{color:#999}.label-hover{position:absolute;left:50%;transform:translate(-50%);opacity:0;color:var(--color-accent);transition:opacity var(--transition-fast);white-space:nowrap}.avatar-container:hover~.avatar-label .label-static{opacity:0}.avatar-container:hover~.avatar-label .label-hover{opacity:1}.intro-zone{display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-lg) var(--spacing-md);gap:var(--spacing-md)}.hero-heading{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.5vw,4rem);line-height:1.25;letter-spacing:-.03em;color:var(--color-text)}.hero-line{display:block}.hero-name{position:relative}.hero-name:after{content:"";position:absolute;bottom:-.1em;left:0;width:100%;height:.08em;background:repeating-linear-gradient(90deg,var(--color-text) 0,var(--color-text) 12px,transparent 12px,transparent 20px)}.hero-accent{color:var(--color-accent)}.sub-block{position:relative;display:flex;align-items:flex-start;gap:var(--spacing-sm);flex-wrap:wrap}.hero-sub{font-size:clamp(.9rem,1.5vw,1.1rem);line-height:1.7;color:var(--color-gray-600);max-width:32ch;flex-shrink:0}.sub-note{position:relative;display:flex;align-items:flex-start;gap:2px;margin-top:.4rem}.note-arrow{width:100px;height:65px;color:var(--color-gray-400);flex-shrink:0;margin-top:-5px}.note-text{display:inline-block;font-family:var(--font-body);font-size:.9rem;line-height:1.7;color:var(--color-gray-600);background:#fefefb;padding:.8rem 1rem;max-width:280px;border-radius:12% 88% 15% 85%/85% 11% 89% 10%;border:1.5px dashed var(--color-gray-400);transform:rotate(3deg);transition:transform var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);cursor:default}.note-text:hover{transform:rotate(0) scale(1.05);color:var(--color-text);border-color:var(--color-accent);border-style:solid}body.glitch-bg .note-text{background:#111;color:#aaa;border-color:#444}body.glitch-bg .note-text:hover{color:var(--color-accent);border-color:var(--color-accent)}body.glitch-bg .note-arrow{color:#555}.bottom-bar{text-align:center;padding:1.5rem 1rem 1rem;background:var(--color-bg)}.contact-btn{font-family:var(--font-display);font-size:clamp(1.2rem,3vw,2rem);font-weight:900;letter-spacing:.1em;color:var(--color-text);background:var(--color-bg);border:3px solid var(--color-text);padding:.5rem 2rem;cursor:pointer;border-radius:35% 65% 60% 40%/40% 55% 45% 60%;transition:all var(--transition-fast);display:inline-block;position:relative}.contact-arrow{display:inline-block;transition:transform var(--transition-fast)}.contact-btn:hover{background:var(--color-text);color:var(--color-bg);box-shadow:6px 6px 0 var(--color-gray-400);transform:translate(-3px,-3px)}.contact-btn:hover .contact-arrow:first-child{transform:translate(-6px)}.contact-btn:hover .contact-arrow:last-child{transform:translate(6px)}.contact-hint{margin-top:.8rem;font-size:.8rem;color:var(--color-gray-400);letter-spacing:.05em}body.glitch-bg .bottom-bar{background:#0a0a0a}body.glitch-bg .contact-btn{color:var(--color-accent);border-color:var(--color-accent)}body.glitch-bg .contact-btn:hover{background:var(--color-accent);color:#0a0a0a;box-shadow:6px 6px #00ff414d}body.glitch-bg .contact-hint{color:#555}.social-list{display:flex;flex-direction:column;gap:.25rem}.social-row{display:flex;align-items:center;gap:.75rem;padding:.75rem .5rem;text-decoration:none;color:var(--color-text);border-bottom:1px solid var(--color-gray-200);transition:all var(--transition-fast)}.social-row:hover{background:var(--color-gray-100);padding-left:1rem}.social-icon{width:28px;height:28px;color:var(--color-text);flex-shrink:0}.social-name{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.03em;flex:1}.social-arrow{font-family:var(--font-display);font-size:1rem;color:var(--color-gray-400);transition:transform var(--transition-fast)}.social-row:hover .social-arrow{transform:translate(4px);color:var(--color-text)}body.glitch-bg .contact-btn:hover{color:var(--color-accent)}body.glitch-bg .social-row{border-bottom-color:#222}body.glitch-bg .social-row:hover{background:#1a1a1a}.portal-nav{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.portal-btn{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--color-text);padding:.5rem 0;border-bottom:3px solid var(--color-text);transition:all var(--transition-normal);position:relative}.portal-bracket{color:var(--color-gray-400);transition:color var(--transition-normal)}.portal-subtitle{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gray-400);margin-top:.25rem;transition:color var(--transition-normal)}.portal-btn:hover{color:var(--color-accent);transform:translate(12px);border-bottom-color:var(--color-accent)}.portal-btn:hover .portal-bracket,.portal-btn:hover .portal-subtitle{color:var(--color-accent)}body.paper-bg{background-color:#faf8f5;background-image:url(/assets/images/paper-texture.svg);background-repeat:repeat;background-size:256px 256px;background-blend-mode:multiply}body.paper-bg .avatar-zone{background:#f0ede5}body.paper-bg .hero-name:after{background:repeating-linear-gradient(90deg,var(--color-text) 0,var(--color-text) 8px,transparent 8px,transparent 16px)}body.glitch-bg{background-color:#0a0a0a;color:#e0e0e0}body.glitch-bg .avatar-zone{background:#0d0d0d}body.glitch-bg .avatar-title{color:var(--color-accent);text-shadow:0 0 20px rgba(0,255,65,.3)}body.glitch-bg .avatar-label{color:#666}body.glitch-bg .hero-sub{color:#888}body.glitch-bg .portal-btn{color:#e0e0e0;border-bottom-color:#e0e0e0}body.glitch-bg .portal-btn:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)}body.glitch-bg{background:linear-gradient(135deg,#0a0a0a,#0d001a,#000a1a,#0a0a0a,#001a0d);background-size:400% 400%;animation:glitchBgShift 3s ease infinite}@keyframes glitchBgShift{0%,to{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:50% 100%}75%{background-position:0% 100%}}@keyframes glitchText{0%,to{transform:translate(0);text-shadow:none}20%{transform:translate(-2px,1px);text-shadow:2px 0 var(--color-accent)}40%{transform:translate(2px,-1px);text-shadow:-2px 0 #ff00ff}60%{transform:translate(-1px,-1px);text-shadow:1px 0 var(--color-accent)}80%{transform:translate(1px,1px);text-shadow:-1px 0 #ff00ff}}@keyframes edgeGlitchTop{0%,to{transform:translate(-5%);opacity:0}15%{transform:translate(5%);opacity:.6}30%{transform:translate(-2%);opacity:0}70%{transform:translate(10%);opacity:0}85%{transform:translate(-8%);opacity:.4}}@keyframes edgeGlitchBottom{0%,to{transform:translate(5%);opacity:0}25%{transform:translate(-10%);opacity:.5}50%{transform:translate(3%);opacity:0}80%{transform:translate(-5%);opacity:.3}}@keyframes edgeGlitchLeft{0%,to{transform:translateY(-3%);opacity:0}20%{transform:translateY(8%);opacity:.5}45%{transform:translateY(-5%);opacity:0}75%{transform:translateY(3%);opacity:.4}}@keyframes edgeGlitchRight{0%,to{transform:translateY(3%);opacity:0}30%{transform:translateY(-6%);opacity:.5}55%{transform:translateY(10%);opacity:0}70%{transform:translateY(-3%);opacity:.3}}body.glitch-bg:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9998;border:3px solid transparent}body.glitch-bg:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,.03) 2px,rgba(0,255,65,.03) 4px);pointer-events:none;z-index:9999}body.glitch-bg .home-layout:before{content:"";position:fixed;top:0;left:5%;width:90%;height:2px;background:var(--color-accent);opacity:0;z-index:10000;pointer-events:none;animation:edgeGlitchTop 2s ease-in-out infinite;box-shadow:0 0 8px var(--color-accent)}body.glitch-bg .home-layout:after{content:"";position:fixed;bottom:0;left:10%;width:80%;height:2px;background:#f0f;opacity:0;z-index:10000;pointer-events:none;animation:edgeGlitchBottom 2.5s ease-in-out .5s infinite;box-shadow:0 0 6px #f0f}body.glitch-bg .portal-btn:last-child{animation:glitchText .3s infinite}@media(max-width:768px){.home-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.avatar-zone{padding:var(--spacing-xl) var(--spacing-md) var(--spacing-md);min-height:50vh}.avatar-container{width:min(180px,50vw);height:min(180px,50vw)}.intro-zone{padding:var(--spacing-sm);gap:var(--spacing-xs)}.hero-heading{font-size:clamp(1.3rem,6vw,2.5rem)}.portal-btn{font-size:clamp(1.2rem,5vw,2rem)}.sub-block{flex-direction:column;align-items:flex-start}.note-arrow{width:60px;height:45px}.note-text{font-size:.8rem;max-width:200px}.help-btn{font-size:1.1rem;padding:.35rem 1rem}.contact-btn{font-size:clamp(1rem,5vw,1.4rem);padding:.4rem 1.2rem}.contact-hint{font-size:.7rem}}
