.homepage-wrapper{position:relative;min-height:100vh}.homepage-container{position:relative;z-index:0;max-width:1100px;margin:0 auto;padding-left:max(clamp(12px,4vw,24px),env(safe-area-inset-left,0px));padding-right:max(clamp(12px,4vw,24px),env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0);box-sizing:border-box;width:100%;text-align:left}.homepage-wrapper .category-section .section-title,.homepage-wrapper .latest-posts-section .section-title{color:var(--color-text-main)}.hero-section{padding:120px 40px;margin-bottom:60px;background-color:var(--color-primary);border-radius:12px;box-shadow:0 1px 0 var(--color-border);border:1px solid var(--color-border);transition:border-color .3s,box-shadow .3s;text-align:center;overflow:hidden}.hero-stroke-wrap{display:block;text-align:center;margin-bottom:25px;font-family:var(--font-family-cursive),var(--font-caveat),Caveat,cursive;font-weight:400}.hero-stroke-wrap.hero-subtitle{margin-bottom:30px}.hero-stroke-svg{display:block;width:100%;max-width:100%;height:auto;max-height:80px;overflow:visible}.hero-subtitle .hero-stroke-svg{max-height:56px}.hero-mask-stroke,.hero-stroke-char-group,.hero-stroke-fill{animation-fill-mode:backwards}@keyframes heroStrokeDrawLoop{0%{stroke-dashoffset:var(--hero-len,1000);stroke-opacity:0}18%{stroke-dashoffset:0;stroke-opacity:1}94%{stroke-dashoffset:0;stroke-opacity:1}to{stroke-dashoffset:var(--hero-len,1000);stroke-opacity:0}}@keyframes heroDotPressure{0%{stroke-width:0;stroke-opacity:0}20%{stroke-width:6px;stroke-opacity:.85}35%{stroke-width:6px;stroke-opacity:1}80%{stroke-width:6px;stroke-opacity:1}to{stroke-width:0;stroke-opacity:0}}@keyframes heroFillOpacityLoop{0%,94%{opacity:1}97%{opacity:.4}to{opacity:0}}.hero-title{font-family:var(--font-family-cursive)!important;font-size:2.75rem;font-weight:400;line-height:1.1;transition:color .3s;letter-spacing:.02em;white-space:nowrap;text-shadow:none}.hero-title,.hero-title .hero-stroke-svg{color:var(--color-logo)}.hero-path-write.hero-stroke-wrap{display:block}.hero-title.hero-path-write .hero-path-svg{color:var(--color-logo)}.hero-path-char{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}.hero-subtitle{font-family:var(--font-family-cursive)!important;font-size:2em;font-weight:400;line-height:1.7;text-shadow:none;white-space:nowrap}.hero-subtitle,.hero-subtitle .hero-stroke-svg{color:var(--color-text-sub)}.hero-search-wrap{max-width:520px;margin:24px auto 0}.hero-section .btn-primary{font-family:var(--font-family-cursive)!important;font-size:1.14rem;font-weight:500;display:inline-block;margin-top:28px;margin-bottom:0;opacity:0;animation:heroBtnIn .6s ease-out .75s forwards;transform-origin:center}.hero-section .btn-primary:hover{transform:translateY(0) scale(1.04)}@keyframes heroBtnIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.category-section .section-title,.latest-posts-section .section-title{font-family:var(--font-family-cursive)!important;font-size:1.8em;font-weight:400;color:var(--color-text-main);margin-bottom:30px;padding-bottom:10px;border-bottom:2px solid var(--color-border)}.latest-posts-section{margin-bottom:60px}.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr));grid-gap:clamp(20px,3.5vw,32px);align-items:stretch}.post-list,.post-list-popular{gap:clamp(20px,3.5vw,32px)}.post-card{display:flex;flex-direction:column;background-color:var(--color-primary);border:1px solid var(--color-border);border-radius:14px;box-shadow:0 4px 14px var(--color-shadow);transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;overflow:hidden;text-decoration:none;color:inherit;min-height:100%}.post-card--feed{padding:0;border-radius:4px;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border) 80%,transparent),0 2px 8px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04)}body.dark-mode .post-card--feed{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border) 90%,transparent),0 4px 14px rgba(0,0,0,.35)}.post-card:hover{box-shadow:0 12px 28px var(--color-shadow-strong);transform:translateY(-4px);border-color:var(--color-accent);text-decoration:none}.post-card--feed:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 35%,var(--color-border)),0 6px 20px rgba(0,0,0,.07),0 12px 32px rgba(0,0,0,.06)}body.dark-mode .post-card--feed:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 40%,transparent),0 8px 28px rgba(0,0,0,.45)}.post-card__media{position:relative;width:100%;aspect-ratio:16/9;background:var(--color-secondary);overflow:hidden;flex-shrink:0}body.dark-mode .post-card__media{background:hsla(0,0%,100%,.06)}.post-card__media-el{width:100%;height:100%;object-fit:cover;display:block}.post-card__media-el--video{object-fit:cover}.post-card__media-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.2) 0,transparent 45%)}.post-card__media--default{display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-border)}.post-card__media--default,body.dark-mode .post-card__media--default{background:var(--color-primary)}.post-card__default-title{font-family:var(--font-family-cursive),var(--font-caveat),Caveat,cursive;font-size:clamp(1.75rem,5vw,2.35rem);font-weight:400;color:var(--color-logo,var(--color-text-main));letter-spacing:.02em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.post-card__body{display:flex;flex-direction:column;flex:1 1;padding:clamp(14px,3vw,16px);min-height:0}.post-card__title{font-size:clamp(1rem,2.9vw,1.0625rem);font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--color-text-main);margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.post-card__excerpt{flex:1 1;min-height:0;margin:0 0 12px}.post-card__excerpt-text{margin:0;padding:0;font-size:.9375rem;line-height:1.55;font-weight:400;letter-spacing:-.01em;color:var(--color-text-sub);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;word-break:break-word}.post-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8125rem;color:var(--color-text-sub);border-top:1px solid color-mix(in srgb,var(--color-border) 85%,transparent);padding-top:12px;margin-top:auto}@media (max-width:380px){.post-meta{flex-direction:column;align-items:stretch}}.category-section{margin-top:60px;padding:40px 0}.category-links{display:flex;flex-wrap:wrap;gap:15px}@media (max-width:600px){.hero-section{padding:80px 20px}.hero-title{font-size:3.5rem}.hero-subtitle{font-size:1.5rem}.post-list{grid-template-columns:1fr;gap:20px}.post-card__excerpt-text{font-size:.9375rem;-webkit-line-clamp:3}}.structure-page--systems{padding:clamp(16px,3vw,40px) max(clamp(12px,2.5vw,24px),env(safe-area-inset-left,0px)) clamp(40px,6vw,80px) max(clamp(12px,2.5vw,24px),env(safe-area-inset-right,0px));max-width:1320px;margin:0 auto;width:100%;box-sizing:border-box}.structure-header{margin-bottom:clamp(20px,4vw,36px);text-align:center}.structure-title{font-size:clamp(1.45rem,3.5vw,2rem);color:var(--color-text-main);margin-bottom:8px}.structure-description{color:var(--color-text-sub);font-size:clamp(.88rem,2.2vw,1rem);line-height:1.65;max-width:720px;margin:0 auto}.structure-panels{display:grid;grid-template-columns:1fr;grid-gap:clamp(20px,4vw,32px);gap:clamp(20px,4vw,32px);width:100%;align-items:stretch}@media (min-width:1080px){.structure-panels{grid-template-columns:minmax(0,1fr) minmax(56px,72px) minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:start}}.structure-panel{min-width:0}.structure-panel__title{font-size:clamp(1.05rem,2.5vw,1.25rem);color:var(--color-text-main);margin:0 0 8px;line-height:1.3}.structure-panel__meta{font-size:clamp(.78rem,2vw,.88rem);color:var(--color-text-sub);line-height:1.55;margin:0 0 14px}.structure-panel__meta a{color:var(--color-accent)}.structure-panel__code{font-size:.92em;padding:.1em .35em;border-radius:4px;background:color-mix(in srgb,var(--color-border) 45%,transparent);word-break:break-all}.structure-panel__footnote{font-size:clamp(.75rem,1.8vw,.82rem);color:var(--color-text-sub);line-height:1.5;margin:14px 4px 0}.structure-inter-server{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:8px 0;color:var(--color-text-sub)}@media (min-width:1080px){.structure-inter-server{flex-direction:column;padding:120px 0 0;gap:10px}}.structure-inter-server__label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;line-height:1.35;max-width:12ch}.structure-inter-server__line{flex:1 1;height:2px;max-width:120px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--color-border),var(--color-border) 6px,transparent 6px,transparent 12px)}@media (min-width:1080px){.structure-inter-server__line{width:2px;height:clamp(48px,12vw,120px);max-width:none;flex:none;background:repeating-linear-gradient(180deg,var(--color-border),var(--color-border) 6px,transparent 6px,transparent 12px)}}.arch-diagram-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}@media (max-width:720px){.arch-diagram-wrap .arch-diagram--app{min-width:520px}.arch-diagram-wrap .arch-diagram--obs{min-width:420px}}.arch-diagram{position:relative;width:100%;margin:0 auto;padding:clamp(12px,2.5vw,24px) clamp(10px,2vw,20px) clamp(14px,2.5vw,22px);box-sizing:border-box;overflow:hidden;background:var(--color-primary);border:2px solid var(--color-border);border-radius:16px;box-shadow:0 8px 32px var(--color-shadow)}.arch-diagram--app{min-height:clamp(460px,64vw,780px);aspect-ratio:unset;min-width:920px}.arch-diagram--obs{min-height:clamp(360px,54vw,620px)}.arch-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}.arch-line{stroke:var(--color-border);stroke-width:.65;fill:none}.arch-arrow-head{fill:var(--color-accent)}.arch-line-extra{stroke:var(--color-border);stroke-width:.55;stroke-dasharray:3 6;opacity:.85}.arch-line-flow{stroke:var(--color-accent);stroke-width:.72;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 16;animation:archFlowDash 2.1s linear infinite;opacity:.92;animation-fill-mode:none}.arch-line-flow-vert{stroke-dasharray:3 12;animation:archFlowDashVert 1.95s linear infinite;animation-fill-mode:none}@keyframes archFlowDash{0%{stroke-dashoffset:0}to{stroke-dashoffset:-24}}@keyframes archFlowDashVert{0%{stroke-dashoffset:0}to{stroke-dashoffset:-19}}.arch-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}.arch-layer .arch-node{pointer-events:auto;position:absolute;transform:translate(-50%,-50%)}.arch-layer-0 .arch-node{left:50%;top:8%}.arch-layer-1 .arch-node{left:50%;top:26%}.arch-layer-2 .arch-node:first-child{left:22%;top:44%}.arch-layer-2 .arch-node:last-child{left:78%;top:44%}.arch-layer-3 .arch-node:first-child{left:8%;top:64%}.arch-layer-3 .arch-node:nth-child(2){left:24%;top:64%}.arch-layer-3 .arch-node:nth-child(3){left:40%;top:64%}.arch-layer-3 .arch-node:nth-child(4){left:60%;top:64%}.arch-layer-3 .arch-node:nth-child(5){left:76%;top:64%}.arch-layer-3 .arch-node:nth-child(6){left:92%;top:64%}.arch-layer-4 .arch-node:first-child{left:8%;top:88%}.arch-layer-4 .arch-node:nth-child(2){left:24%;top:88%}.arch-layer-4 .arch-node:nth-child(3){left:40%;top:88%}.arch-layer-4 .arch-node:nth-child(4){left:60%;top:88%}.arch-layer-4 .arch-node:nth-child(5){left:76%;top:88%}.arch-layer-4 .arch-node:nth-child(6){left:92%;top:88%}.arch-layer-obs-0 .arch-node{left:50%;top:10%}.arch-layer-obs-1 .arch-node{left:50%;top:34%}.arch-layer-obs-2 .arch-node:first-child{left:14%;top:74%}.arch-layer-obs-2 .arch-node:nth-child(2){left:50%;top:74%}.arch-layer-obs-2 .arch-node:nth-child(3){left:86%;top:74%}.arch-node{padding:clamp(6px,1.2vw,12px) clamp(8px,1.5vw,16px);background:var(--color-primary);border:2px solid var(--color-border);border-radius:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,opacity .3s;text-align:center;min-width:min(96px,18vw);max-width:132px;box-shadow:0 2px 8px var(--color-shadow);animation:archNodeSparkle 7s ease-in-out infinite;position:relative;overflow:visible;display:flex;flex-direction:column}.arch-node.is-selected{animation:none;border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 28%,transparent)}.arch-node:after{content:"";position:absolute;inset:-3px;border-radius:14px;pointer-events:none;opacity:0;box-shadow:0 0 12px 2px color-mix(in srgb,var(--color-accent) 50%,transparent);animation:archNodeSparkleRing 7s ease-in-out infinite}.arch-node.is-selected:after{animation:none;opacity:0}@keyframes archNodeSparkle{0%,to{box-shadow:0 2px 8px var(--color-shadow);filter:brightness(1)}4%{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 32%,transparent),0 2px 10px var(--color-shadow);filter:brightness(1.12)}7%{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 20%,transparent),0 2px 9px var(--color-shadow);filter:brightness(1.04)}12%,to{box-shadow:0 2px 8px var(--color-shadow);filter:brightness(1)}}@keyframes archNodeSparkleRing{0%,to{opacity:0;transform:scale(.98)}4%{opacity:0;transform:scale(1)}5%{opacity:.4;transform:scale(1.03)}7%,to{opacity:0;transform:scale(1)}}.arch-layer-0 .arch-node,.arch-layer-0 .arch-node:after{animation-delay:0s}.arch-layer-1 .arch-node,.arch-layer-1 .arch-node:after{animation-delay:.5s}.arch-layer-2 .arch-node:first-child,.arch-layer-2 .arch-node:first-child:after{animation-delay:1s}.arch-layer-2 .arch-node:last-child,.arch-layer-2 .arch-node:last-child:after{animation-delay:1.4s}.arch-layer-3 .arch-node:first-child,.arch-layer-3 .arch-node:first-child:after{animation-delay:1.9s}.arch-layer-3 .arch-node:nth-child(2),.arch-layer-3 .arch-node:nth-child(2):after{animation-delay:2.3s}.arch-layer-3 .arch-node:nth-child(3),.arch-layer-3 .arch-node:nth-child(3):after{animation-delay:2.7s}.arch-layer-3 .arch-node:nth-child(4),.arch-layer-3 .arch-node:nth-child(4):after{animation-delay:3.1s}.arch-layer-3 .arch-node:nth-child(5),.arch-layer-3 .arch-node:nth-child(5):after{animation-delay:3.5s}.arch-layer-3 .arch-node:nth-child(6),.arch-layer-3 .arch-node:nth-child(6):after{animation-delay:3.9s}.arch-layer-4 .arch-node:first-child,.arch-layer-4 .arch-node:first-child:after{animation-delay:4.3s}.arch-layer-4 .arch-node:nth-child(2),.arch-layer-4 .arch-node:nth-child(2):after{animation-delay:4.7s}.arch-layer-4 .arch-node:nth-child(3),.arch-layer-4 .arch-node:nth-child(3):after{animation-delay:5.1s}.arch-layer-4 .arch-node:nth-child(4),.arch-layer-4 .arch-node:nth-child(4):after{animation-delay:5.5s}.arch-layer-4 .arch-node:nth-child(5),.arch-layer-4 .arch-node:nth-child(5):after{animation-delay:5.9s}.arch-layer-4 .arch-node:nth-child(6),.arch-layer-4 .arch-node:nth-child(6):after{animation-delay:6.3s}.arch-layer-obs-0 .arch-node,.arch-layer-obs-0 .arch-node:after{animation-delay:.2s}.arch-layer-obs-1 .arch-node,.arch-layer-obs-1 .arch-node:after{animation-delay:.7s}.arch-layer-obs-2 .arch-node:first-child,.arch-layer-obs-2 .arch-node:first-child:after{animation-delay:1.2s}.arch-layer-obs-2 .arch-node:nth-child(2),.arch-layer-obs-2 .arch-node:nth-child(2):after{animation-delay:1.5s}.arch-layer-obs-2 .arch-node:nth-child(3),.arch-layer-obs-2 .arch-node:nth-child(3):after{animation-delay:1.8s}.arch-node__label{font-weight:700;font-size:clamp(.72rem,2vw,.95rem);color:var(--color-text-main);margin-bottom:4px;line-height:1.2}.arch-node__label,.arch-node__sub{white-space:normal;overflow:hidden;text-overflow:ellipsis}.arch-node__sub{font-size:clamp(.58rem,1.65vw,.72rem);color:var(--color-text-sub);line-height:1.3}.arch-layer-0 .arch-node,.arch-layer-1 .arch-node,.arch-layer-2 .arch-node{min-width:min(100px,18vw);max-width:min(160px,28vw);overflow:hidden}.arch-layer-obs-2 .arch-node{min-width:min(88px,16vw);max-width:min(140px,22vw);overflow:hidden}.arch-node:hover{border-color:var(--color-accent);box-shadow:0 2px 12px var(--color-shadow);transform:translate(-50%,-50%) translateY(-.5px)}.structure-results{width:100%;margin-top:clamp(20px,4vw,32px);padding:clamp(20px,3vw,28px) 0;border-top:2px solid var(--color-border)}.structure-results__title{font-size:clamp(1.15rem,2.8vw,1.4rem);color:var(--color-text-main);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}.structure-results__empty,.structure-results__loading{color:var(--color-text-sub);margin:20px 0}.structure-results__link{color:var(--color-accent);text-decoration:underline}.structure-results__link:hover{text-decoration:none}.structure-results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-gap:clamp(16px,3vw,24px);gap:clamp(16px,3vw,24px);margin-bottom:20px}.structure-results__more{margin-top:16px;font-size:.95rem}@media (max-width:900px){.arch-diagram--app{min-height:clamp(340px,95vw,560px)}.arch-node{padding:6px 8px}.arch-layer-0 .arch-node,.arch-layer-1 .arch-node,.arch-node{min-width:min(72px,16vw);max-width:min(120px,26vw)}.arch-layer-2 .arch-node{max-width:min(120px,26vw)}}@media (max-width:600px){.arch-diagram--app{min-height:clamp(440px,115vw,520px);padding:10px 8px 14px}.arch-diagram--obs{min-height:clamp(300px,72vw,380px)}.arch-node{min-width:56px;max-width:min(78px,15vw);padding:5px 6px;border-radius:10px}.arch-node__label{font-size:.68rem;margin-bottom:2px}.arch-node__sub{font-size:.52rem;line-height:1.15}.arch-layer-0 .arch-node,.arch-layer-1 .arch-node{min-width:min(56px,25vw);max-width:min(78px,15vw);padding:5px 6px}.arch-layer-2 .arch-node,.arch-layer-obs-2 .arch-node{min-width:min(56px,25vw);max-width:min(78px,15vw)}.structure-results__grid{grid-template-columns:1fr}}