*{margin:0;padding:0;box-sizing:border-box}html,body{height:100vh;width:100vw;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5;color:#333;background-color:#fff;overflow:hidden}#app{width:100%;height:100%;overflow:hidden}.portfolio-container{display:flex;align-items:center;height:100vh;max-width:1400px;margin:0 auto;padding:clamp(30px,4vw,60px);gap:clamp(24px,3vw,48px);overflow:hidden}.main-content{flex:0 0 clamp(320px,38vw,560px);width:clamp(320px,38vw,560px);height:clamp(320px,60vh,700px);display:flex;flex-direction:column;gap:24px}.content-section{font-size:16px;line-height:1.6;color:#333;overflow:hidden;flex:1 1 0;min-height:0}.content-section p{margin-bottom:20px}.content-section p:last-child{margin-bottom:0}.about-list{list-style:none;padding:0;margin:-12px 0 20px}.about-list li{padding-left:16px;position:relative;margin-bottom:2px}.about-list li:before{content:"·";position:absolute;left:4px;color:#999;font-weight:700}.writings-inline{margin-top:8px}.writings-inline>p{margin-bottom:0}.writings-list li{display:flex;align-items:baseline;gap:8px}.writing-link{text-decoration:none}.writing-date{font-size:13px;color:#999;font-weight:400}.writing-full{display:flex;flex-direction:column;gap:12px}.back-link{font-size:13px;color:#999;text-decoration:none;align-self:flex-start;transition:color .2s ease}.back-link:hover{color:#b4472c}.writing-full-title{font-size:18px;font-weight:500;color:#222;margin:4px 0 0}.writing-full-date{font-size:13px;color:#999;margin:0}.writing-full-body{font-size:16px;line-height:1.6;color:#333;margin-top:8px}.writing-full-body p{margin-bottom:16px}.writing-full-body p:last-child{margin-bottom:0}.highlight{color:#b4472c;font-weight:500}a{text-decoration:none;color:inherit}a .highlight{text-decoration:underline;text-decoration-color:#b4472c;text-underline-offset:2px}a:hover .highlight{text-decoration-color:#943a24}.graphic-area{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:center;font-family:Courier New,monospace;font-size:2px;line-height:1;color:#000;white-space:pre;overflow:hidden;letter-spacing:0px;position:relative}.ascii-container{flex-shrink:0;height:auto;max-height:80vh;overflow:hidden;position:relative}.ascii-art{transform:scale(1);transform-origin:left center;width:100%;height:auto;font-variant-ligatures:none;position:relative;margin:0;white-space:pre;font-family:Courier New,monospace;font-size:inherit;line-height:inherit;color:inherit;will-change:contents;backface-visibility:hidden;contain:layout style paint}.footer{position:fixed;bottom:0;left:0;right:0;max-width:1400px;margin:0 auto;padding:20px clamp(30px,4vw,60px);display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#666;background:linear-gradient(to top,#fff 60%,#fff0);pointer-events:none}.footer a,.footer .social-links{pointer-events:auto}.location{font-weight:400}.social-links{display:flex;gap:24px}.social-link{color:#666;text-decoration:none;font-weight:400;transition:color .2s ease}.social-link:hover{color:#000}.social-link:focus{outline:2px solid #B4472C;outline-offset:2px;border-radius:2px}@media (max-width: 1400px){.ascii-container{transform:scale(.85);transform-origin:center center}}@media (max-width: 1100px){.ascii-container{transform:scale(.6);transform-origin:center center}}@media (max-width: 900px){.ascii-container{transform:scale(.45);transform-origin:center center}}@media (max-width: 768px){html,body{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100vh}#app{overflow:visible;height:auto;min-height:100vh}.portfolio-container{flex-direction:column;align-items:stretch;height:auto;min-height:100vh;overflow:visible;padding-bottom:40px}.main-content{flex:none;max-width:100%;height:auto;padding-bottom:0}.content-section{overflow-y:visible;flex:none}.graphic-area{flex:none;justify-content:center}.ascii-container{display:none}.footer{position:relative;flex-direction:column;gap:16px;text-align:center;background:none;padding:30px 20px;pointer-events:auto}.social-links{gap:20px}}h1,h2,h3{font-weight:500;line-height:1.3}strong{font-weight:600}@media (max-width: 480px){.content-section{font-size:15px}}@media (max-width: 360px){.content-section{font-size:14px}.footer{padding:20px 12px}}