@charset "UTF-8";

html { scroll-behavior:auto; overflow-x:clip; }
body { letter-spacing: 0.02rem; overflow-x: clip; }
a { color:var(--bs-gray-900); outline-style: none; }

.fadein { opacity : 0; transform : translate(0, 0); transition :all 0.75s ease 0.15s;}
.fadein.show { opacity : 1; transform : translate(0, 0); }

.fadeinUp, .fadeinUp_once { opacity : 0; transform : translate(0, 3rem); transition :all 0.75s ease 0.15s;}
.fadeinUp.show, .fadeinUp_once.show { opacity : 1; transform : translate(0, 0); }

.fadeinDown, .fadeinDown_once { opacity : 0; transform : translate(0, -3rem); transition :all 0.75s ease 0.15s;}
.fadeinDown.show, .fadeinDown_once.show { opacity : 1; transform : translate(0, 0); }

.fadeinLeft { opacity : 0; transform : translate(-3rem, 0); transition :all 0.75s ease 0.15s;}
.fadeinLeft.show { opacity : 1; transform : translate(0, 0); }

.fadeinRight { opacity : 0; transform : translate(3rem, 0); transition :all 0.75s ease 0.15s;}
.fadeinRight.show { opacity : 1; transform : translate(0, 0); }


/* ===== VARIABLES ===== */
:root { 
--color-black: #000;
--color-dark: #222;
--color-text-muted: #666;
--color-gray: #999;
--color-lightgray: #DDD;
--color-surface: #F5F5F5;
--color-white: #FFF;
--primary-green: #05F092;
--primary-lightgreen: #F0FDF7;

/* Typography - Improved Hierarchy */
--font-brand: 'Montserrat', sans-serif; /* Brand: ExtraBold */
--font-display: 'Montserrat', sans-serif; /* Titles: Bold/SemiBold */
--font-primary: 'Inter', system-ui, sans-serif; /* Body: Regular/Medium */
--font-mono: 'JetBrains Mono', monospace; /* Technical elements only */

/* Typography Scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

/* Line Heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.625;

/* Spacing & Effects */
--transition: 0.3s ease;
--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.07);
--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
/*--navbar-height:4rem;*/

 }
	

	
/* ===== BASE ===== */
* { box-sizing: border-box; }

body { font-family: var(--font-primary); background: var(--color-white); color: var(--color-dark); line-height: var(--leading-normal); margin: 0; font-weight: 400; }
section { min-height: calc(100vh - 4.5rem); padding: clamp(3rem,10vw,6rem) clamp(0.5rem,3vw,2rem); display: flex; justify-content: center; align-items: center; }
body.logged-in section { min-height: calc(100vh - 4.5rem - 32px); }
h1, h2 { font-family: var(--font-brand); font-weight: 800; }
h3, h4,h5 { font-family: var(--font-brand); font-weight: 700; }



/* ===== NAVIGATION ===== */
.navbar { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(1rem); /*padding:0.75rem 0;*/ position: sticky; top: 0; left: 0; right: 0; z-index: 1000; transition: var(--transition); }
body.logged-in .navbar { top:32px; } 
.navbar.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow); }
.navbar-brand { font-family: var(--font-brand); font-size: 2.5rem; font-weight: 800; color: var(--color-black) !important; text-decoration: none; line-height: 1; padding: 0; margin:0; display:flex; align-items:center; }
.navbar-brand img { max-width:clamp(12rem,calc(100vw - 6rem),18.75rem); }

.navbar-toggler { box-shadow: none !important; z-index: 1000; padding: 0 0.25rem; position: relative; width: 3rem; height:3rem; }
.navbar-toggler[aria-expanded="false"] .bi-list, .navbar-toggler[aria-expanded="true"] .bi-x-lg { display: block; font-size: 2rem; }
.navbar-toggler[aria-expanded="false"] .bi-x-lg, .navbar-toggler[aria-expanded="true"] .bi-list { display: none; font-size: 2rem; }
.navbar-toggler span { height:1.5px; width:50%; background:var(--color-dark); position:absolute; transition:.2s; } 
.navbar-toggler[aria-expanded="false"] span:nth-child(1) { top:33%; left:25%; }
.navbar-toggler[aria-expanded="false"] span:nth-child(2) { top:50%; left:25%; }
.navbar-toggler[aria-expanded="false"] span:nth-child(3) { top:67%; left:25%; }
.navbar-toggler[aria-expanded="true"] span:nth-child(1) { top:50%; left:25%; transform: rotate(-45deg); }
.navbar-toggler[aria-expanded="true"] span:nth-child(2) { width:0; left:50%; }
.navbar-toggler[aria-expanded="true"] span:nth-child(3) { top:50%; left:25%; transform: rotate(45deg); }

.nav-link { color: var(--color-black); font-family: var(--font-primary); font-weight: 500; margin: 0; text-decoration: none; transition: all 0.3s ease; padding:0.5rem 1rem !important; }
.nav-link:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-white); border: 2px solid var(--color-black); color: var(--color-black); border-radius: var(--radius-sm); font-family: var(--font-primary); font-weight: 600; transition: all 0.3s ease; text-decoration: none; position: relative; margin-left: 0.5rem; }
.btn-primary:hover { background: var(--color-black) !important; color: var(--color-white) !important; transform: translateY(-1px); border: 2px solid var(--color-black); }
.btn-primary:hover::before { color: var(--color-white) !important; }
.btn-primary::before { content: ""; margin-right: 0; font-weight: 700; font-size: 1rem; }

.navbar.scrolled .btn-primary { background: var(--color-black); color:var(--color-white); border-color: var(--color-dark); }
.navbar.scrolled .btn-primary::before { color: var(--color-white); }
.navbar.scrolled .btn-primary:hover { background: var(--color-black); color: var(--primary-green) !important; }
.navbar.scrolled .btn-primary:hover::before { color: var(--primary-green) !important; }

.hm_mypage { display:none; }
.hm_mypage a { display:flex; align-items:center; height:3rem; }
.navbar-collapse { min-height:3rem; }

.navbar-nav { align-items:flex-start; }
@media (min-width: 992px) {
.navbar-nav { align-items:center; }
}

/* ===== HERO SECTION ===== */
.hero { display: flex; align-items: center; /*padding-top:calc( clamp(4rem,12vw,8rem) + 4rem);*/ }
.title-section { text-align: center; margin-bottom: 2rem; margin-top: 5rem; }
.hello-title { font-family: var(--font-mono); font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; color: var(--color-black); margin: 0; line-height: 1.2; letter-spacing: -0.02em; display: flex; flex-flow: row wrap; justify-content: center; }

/* ===== HELLO LETTER ANIMATION ===== */
.hello-letter { display: block; position: relative; perspective: 1000px; vertical-align: baseline; }
.hello-letter:last-of-type { /*margin-left: -0.15em;*/ }
.letter-inner { transition: transform 0.8s ease-in-out; transform-style: preserve-3d; display: block; vertical-align: baseline; width: clamp(3rem, 8vw, 5rem); }
.hello-letter.flipped .letter-inner { transform: rotateY(180deg); }
.letter-front,
.letter-back { display: flex; flex-flow: row wrap;justify-content: center; backface-visibility: hidden; vertical-align: baseline; width: clamp(3rem, 8vw, 5rem);text-align: center; }
.letter-front { /* Normal state - just the letter */ }
.letter-back { position: absolute; top: 0; left: 0; transform: rotateY(180deg); }
.letter-pattern { aspect-ratio:1; gap: 0; width: clamp(3rem, 8vw, 5rem) !important; height: clamp(3rem, 8vw, 5rem); font-size: clamp(4rem, 11vw, 7rem); transform: translateY(clamp(-10rem,-16vw,-6rem)); line-height: 0; }
.pattern-block { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 0; display: block; margin: 0; padding: 0; border: none; outline: none; font-size: 0; line-height: 0.5; }
.pattern-block.black { background: var(--color-black); }
.pattern-block.white { background: var(--color-white); }
.pattern-block.dot { background: var(--color-black); position: relative; }
.pattern-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; background: var(--primary-green); border-radius: 50%; }

/* ===== SUBTITLE & CTA ===== */
.hero-subtitle { font-family: var(--font-primary); font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); font-weight: 400; max-width: 40rem; margin: 0 auto clamp(1rem,3vw,2rem) auto; line-height: var(--leading-relaxed); text-align: center; color: var(--color-dark); padding: 0; transform: translateY(2rem); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-subtitle.loaded { opacity: 1; transform: translateY(0); }
.brand-name { font-family: var(--font-brand); font-weight: 700; color: var(--color-black); }
.cta-section { text-align: center; }
.cta-section.loaded { opacity: 1; transform: translateY(0); }
.btn-more { background: var(--color-black); border: 2px solid var(--color-black); color: var(--color-white); padding:clamp(0.75rem,1.6vw,1rem) clamp(1.5rem,3vw,2rem); border-radius: 10px; font-family: var(--font-primary); font-weight: 600; display: inline-flex; align-items: center; gap: clamp(0.8rem,1.6vw,1rem); transition: all 0.3s ease; text-decoration: none; cursor: pointer; font-size: clamp(	1rem,2vw,1.25rem); min-width: clamp(10rem,20vw,12.5rem); justify-content: center; }
.btn-more:hover { background: var(--color-black); color: var(--primary-green); transform: translateY(-1px); box-shadow: var(--shadow); }
.arrow-icon { width: clamp(1.6rem,3vw,2rem); height:clamp(1rem,1.8vw,1.25rem); display: flex; align-items: center; justify-content: center; transition: var(--transition); position: relative; }
.arrow-icon svg { fill: var(--color-white); transition: var(--transition); }
.btn-more .bi { transition: var(--transition); }
.btn-more:hover .bi { fill: var(--primary-green); transform: translateX(0.25rem); }
.demo-text { font-family: var(--font-primary); font-size: var(--text-sm); color: var(--color-dark); margin-top: 0.125rem; font-weight: 400; }
.btn-more:focus { outline: 2px solid var(--primary-green); outline-offset: 2px; }
	
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) { 
.nav-item { width: 100%; }
}





.how-it-works { margin: 0 auto; text-align: center; background: var(--color-surface); }
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin: 0 0 1rem; line-height: 1; text-align: center; }
.section-subtitle { font-family: var(--font-primary); font-size:clamp( var(--text-sm),1.8vw, var(--text-lg)); line-height: var(--leading-relaxed); margin:0 auto clamp(1.5rem,3vw,2rem) auto; text-align: center; }
.section-subtitle strong { font-weight: 600; }
.process-flow { display: flex; align-items: flex-start; justify-content: space-around; gap: 1rem; flex-wrap: wrap; }
.step { display: flex; flex-direction: column; align-items: center; max-width:18.75rem; }
.step-visual { background: var(--color-white); border: 1px solid var(--color-surface); border-radius: var(--radius-lg); padding: 2.5rem; margin-bottom: 1.5rem; width:18.75rem; height: 15rem; display: flex; align-items: center; justify-content: center; transition: transform var(--transition); }
/*.step-visual:hover { transform: translateY(-0.25rem); }*/
.arrow { font-size: 2rem; color: var(--color-dark); align-self: flex-start; margin-top: 7.5rem; opacity: 0.6; }
.blocks-container { display: flex; gap: clamp(0.5rem,2vw,1.25rem); align-items: center; }
.how-it-works .block { width: 2.5rem; height: 2.5rem; position: relative; transition: transform var(--transition); }
/*.block:hover { transform: scale(1.05); }*/
.block.solid { background-color: var(--color-black); }
.block.dotted { background-color: var(--color-black); display: flex; align-items: center; justify-content: center; }
.block.dotted::after { content: ''; width: 1.25rem; height: 1.25rem; background-color: var(--primary-green); border-radius: 50%; }
.block.empty { border: 2px dashed var(--color-lightgray); background-color: transparent; }
.tower-container { display: flex; gap: clamp(1rem,2vw,1.25rem); align-items: flex-end; }
.letter-tower { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.letter-label { font-family: var(--font-mono); font-weight: 600; }
.tower-block { width: 2.5rem; height: 2.5rem; transition: transform var(--transition); }
/*.tower-block:hover { transform: scale(1.05); }*/
.tower-block.solid { background-color: var(--color-black); }
.tower-block.dotted { background-color: var(--color-black); display: flex; align-items: center; justify-content: center; }
.tower-block.dotted::after { content: ''; width: 1.25rem; height: 1.25rem; background-color: var(--primary-green); border-radius: 50%; }
.tower-block.empty { border: 2px dashed var(--color-lightgray); background-color: transparent; }
.word-visual { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.letters-row { font-family: var(--font-mono); font-size: clamp(1rem,2vw,1.25rem); font-weight: 600; color: var(--color-black); letter-spacing: 2px; }
.blocks-shape { display: flex; gap: 0; overflow: hidden; }
.block-column { display: flex; flex-direction: column; gap: 0; }
.shape-block { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; position: relative; transition: transform var(--transition); }
/*.shape-block:hover { transform: scale(1.05); z-index: 1; }*/
.shape-block.black { background-color: var(--color-black); }
.shape-block.white { /*background-color: var(--color-surface);*/ }
.shape-block .dot { width: 1.25rem; height: 1.25rem; background-color: var(--primary-green); border-radius: 50%; }
.step-title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.step-description { font-family: var(--font-primary); color: var(--color-dark); font-size: clamp( var(--text-sm),1.6vw, var(--text-base)); line-height: var(--leading-relaxed); margin: 0; text-align: center; font-weight: 400; }
.step-description strong { font-weight: 600; color: var(--color-black); }

@media (max-width: 768px) { 
.process-flow { flex-direction: column; gap: 1.25rem; align-items: center; }
.arrow { transform: rotate(90deg); margin:0.5rem 0; align-self: center; }
}



/*See it in action*/
section.see-in-action { display: flex; flex-direction: column; align-items: center; }
.main-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; color: var(--color-black); margin-bottom: 1.25rem; line-height: var(--leading-tight); text-align: center; }
.word-example { margin-bottom:2rem; text-align: center; }
.letters { display: flex; justify-content: center; margin-bottom: 0.5rem; font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 400; color: var(--color-black); font-family: var(--font-mono); }
.shapes-container { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 1.25rem; }
.letter-shape { display: flex; flex-direction: column; }
.block { width: clamp(1.8rem,4vw,2.5rem); height: clamp(1.8rem,4vw,2.5rem); position: relative; }
.block.white { background: transparent; }
.block.black { background: var(--color-black); }
.block.dot { background: var(--color-black); }
.block.dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(0.9rem,2vw,1.25rem); height: clamp(0.9rem,2vw,1.25rem); background: var(--primary-green); border-radius: 50%; }
.space { width: clamp(1.8rem,4vw,2.5rem); }


/* ===== BLOCK ANIMATION STYLES ===== */
.letter-shape { display: flex; flex-direction: column; transition: transform 1.8s ease-out; }
.letter-span { transition: transform 1.8s ease-out; width: clamp(2rem,4vw,2.5rem) !important; }

/* Quick transition for separation phase */
.letter-shape.quick-transition,
.letter-span.quick-transition { transition: transform 0.6s ease-out; }

/* ===== REPLAY BUTTON STYLES ===== */
.replay-button { width: 2.5rem; height:2.5rem; background: var(--color-surface); color: var(--color-dark); border: 1px solid var(--color-lightgray); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); z-index: 10; margin: 1.25rem auto 0; font-size: 1.25rem; }
.animation-section { width: 100%; /*max-width: 37.5rem; */margin: 0 auto; }
.replay-button:hover { transform: scale(1.1) rotate(180deg); }
.replay-button svg { width: 1rem; height: 1rem; stroke: var(--color-black); stroke-width: 2; fill: none; }
.replay-button:focus { outline: none; box-shadow: 0 0 0 2px var(--color-lightgray); }




/* ===== TRY IT OUT ===== */
section.try-it-out { text-align: center; background: var(--primary-lightgreen); }
section.try-it-out .container { max-width: 37.5rem; }
 /* ===== INPUT SECTION ===== */
.input-container { background: var(--color-white); border: 2px solid var(--color-black); border-radius: var(--radius-lg); padding:clamp(1rem,3vw,2rem); margin-bottom: 2rem; }
 /* ===== WRIBLO BLOCKS DISPLAY ===== */
.wriblo-container { margin-bottom: 2rem; min-height: 7.5rem; display: flex; align-items: center; justify-content: center; }
.wriblo-placeholder { display: flex; justify-content: center; align-items: center; padding: clamp(1rem,3vw,2rem); border-radius: var(--radius-md); min-height: 7.5rem; width: 100%; font-family: var(--font-primary); font-size: var(--text-xl); font-weight: 500; color: var(--color-text-muted); }
.wriblo-placeholder.hidden { display: none; }
.wriblo-blocks { display: flex; justify-content: center; gap: 0; margin: 0 auto; flex-wrap: nowrap; padding:clamp(1rem,3vw,2rem); background: var(--color-white); border-radius: var(--radius-md); overflow-x: auto; width: 100%; min-height: 7.5rem; align-items: center; border: 2px dashed var(--color-lightgray); }
.letter-column { display: flex; flex-direction: column; gap: 0; opacity: 0; transform: translateY(20px) scale(0.8); animation: fadeInBlock 0.8s ease-out forwards; }
.wriblo-blocks .wriblo-block { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); cursor: pointer; }
.wriblo-blocks .wriblo-block:hover { transform: scale(1.05); }
.wriblo-blocks .wriblo-block.black { background: var(--color-black); }
.wriblo-blocks .wriblo-block.white { background: var(--color-white); }
.wriblo-blocks .wriblo-block.dot { background: var(--color-black); }
.wriblo-blocks .wriblo-dot { width: 50%; height: 50%; background: var(--primary-green); border-radius: 50%; }

@keyframes fadeInBlock { 
from { opacity: 0; transform: translateY(1.25rem) scale(0.8); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

 /* ===== INPUT FIELD ===== */
.input-field-container { position: relative; width: 100%; margin-bottom: 1rem; }
.input-field { width: 100%; padding: 1rem 3rem 1rem 1rem; font-size: var(--text-2xl); font-family: var(--font-primary); font-weight: 400; border: none; border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-black); text-align: center; transition: var(--transition); outline: 1px solid var(--primary-green); }
.input-field:focus { outline: 1px solid var(--color-gray); }
.input-field.clicked { outline: 1px solid var(--color-gray); }
.input-field::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.clear-input-btn { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; opacity: 0; transition: all 0.3s ease; padding: 0.25rem; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; line-height: 1; }
.clear-input-btn.show { opacity: 0.5; }
.clear-input-btn:hover { opacity: 1; background: var(--color-surface); }

 /* ===== INPUT META ===== */
.input-meta { display: flex; justify-content: center; align-items: center; font-size: var(--text-sm); color: var(--color-text-muted); /*margin-bottom: 1.5rem;*/ font-family: var(--font-primary); }
.char-counter { color: var(--color-text-muted); opacity: 0.8; }
.char-counter.warning { color: #E54; opacity: 1; }

 /* ===== EXAMPLES ===== */
.examples { text-align: center; }
.examples-label { font-family: var(--font-primary); font-size: var(--text-base); color: var(--color-text-muted); margin-bottom: 1rem; font-weight: 400; }
.example-names { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.example-name { background: var(--color-white); border: 2px solid var(--color-lightgray); padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--text-base); font-family: var(--font-primary); color: var(--color-black); cursor: pointer; transition: var(--transition); font-weight: 400; }
.example-name:hover { background: var(--color-surface); border-color: var(--primary-green); }

 /* ===== ERROR MESSAGE ===== */
.error-message { color: #E54; font-size: var(--text-sm); font-family: var(--font-primary); text-align: center; margin-top: 0.5rem; opacity: 0; transition: opacity 0.3s ease; background: #FFEBEE; padding: 0.75rem; border-radius: var(--radius-sm); border: 1px solid #FCD; font-weight: 400; }
.error-message.show { opacity: 1; }

.input-field:focus,
.example-name:focus,
.clear-input-btn:focus { outline: 2px solid var(--color-gray); outline-offset: 2px; }
.input-field.clicked:focus { border-color: var(--color-gray); }

@media (max-width: 768px) { 
.wriblo-blocks { min-height: 100px; }
.wriblo-placeholder { min-height: 100px; }
.wriblo-blocks .wriblo-block { width: 35px; height: 35px; }
}

@media (max-width: 576px) { 
.main-title { font-size: 2rem; }
.input-field { font-size: var(--text-base); padding: 0.875rem 2.5rem 0.875rem 0.875rem; }
.wriblo-blocks { min-height: 90px; }
.wriblo-placeholder { min-height: 90px; font-size: var(--text-base); }
.wriblo-blocks .wriblo-block { width: 2rem; height: 2rem; }
.example-names { gap: 0.5rem; }
.example-name { padding: 0.625rem 1rem; font-size: var(--text-sm); }
}




/* ===== BENEFITS SECTION ===== */
.benefit-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: clamp(1rem,3vw,2rem); text-align: center; height: 100%; position: relative; border: 1px solid var(--color-lightgray); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.benefit-card.visible { opacity: 1; transform: translateY(0); }
.benefit-icon { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; position: relative; }
.benefit-icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0; transition: opacity 0.5s ease-in-out; }
.benefit-icon img.loaded { opacity: 1; }

 /* Placeholder style for loading state */
.benefit-icon { width: 4rem; height: 4rem; margin: 0 auto clamp(1rem,2.5vw,1.5rem); display: flex; align-items: center; justify-content: center; position: relative; background: var(--color-surface); border-radius: 0.5rem; overflow: hidden; }
.benefit-icon::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.5s infinite; }
.benefit-icon.img-loaded { background: transparent; }
.benefit-icon.img-loaded::before { display: none; }

@keyframes shimmer { 
0% { left: -100%; }
100% { left: 100%; }
}

 /* Fallback for no JavaScript */
noscript .benefit-card { opacity: 1; transform: translateY(0); }
noscript .benefit-icon img { opacity: 1; }
.benefit-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.5vw, 1.5rem); /*color: var(--color-dark); margin: 0 0 1rem; line-height: 1.2;*/ }
.benefit-card-title span { font-weight:normal; display:block; font-size: clamp(1rem, 2vw, 1.25rem); padding-top:0.5rem; margin-bottom:clamp(1rem,2.5vw,1.5rem); }

.benefit-description { /*color: var(--color-dark);*/ font-size: 1rem; line-height: 1.6; margin: 0; }
.wriblo-brand { font-family: var(--font-display); font-weight: 600; color: var(--color-black); }
.benefits-disclaimer { /*color: var(--color-dark);*/ font-size: 0.875rem; text-align: center; margin-top: 2rem; opacity: 0.8; }

.benefit-card { opacity: 1 !important; transform: translateY(0) !important; }
.benefit-icon img { opacity: 1 !important; }
.benefit-icon { background: transparent !important; }
.benefit-icon::before { display: none !important; }





 /* ===== ADAPTIVE READER SECTION ===== */
section.adaptive-reader { background: var(--color-dark); color: var(--color-white); position: relative; overflow: hidden; }
section.adaptive-reader .section-action-label { display: inline-block; background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1rem; text-transform: uppercase; margin-bottom: 1.5rem; text-align: center; font-family: var(--font-primary); }
section.adaptive-reader .section-subtitle { color:var(--primary-green); }
section.adaptive-reader .reader-card { width: 100%; background: var(--color-white); border-radius: 1.25rem; padding: 2rem clamp(1rem,3vw,2rem); position: relative; margin: 0 auto; /*border: 2px solid var(--color-dark);*/ color: var(--color-dark); }




.sample-text-header { text-align: left; padding-bottom: 0px; border-bottom: 2px solid var(--color-surface); position: relative; display: flex; align-items: center; justify-content: space-between; }
.sample-text-title { font-family: var(--font-display); font-weight: 800; }
.status-display { margin: 0; padding: 0; border: none; background: transparent; border-radius: 0; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; /*gap: 5px;*/ }
.reset-button { position: absolute; top: 7.5rem; right: 2rem; padding: 0; background: none; color: var(--color-dark); border-radius: 0; font-family: var(--font-primary); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; border: none; cursor: pointer; transition: color 0.3s ease; z-index: 10; box-shadow: none; }
.reset-button:hover { opacity: 1; transform: none; background: none; color: var(--color-black); }
.status-title { font-family: var(--font-primary); font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; /* letter-spacing: 0.1rem; gap: 0.5rem;*/ margin-bottom: 0; opacity:1; text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.help-icon { width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-text-muted); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; cursor: help; position: relative; opacity: 0.9; transition: opacity 0.3s ease; margin-left:0.25rem; }
.help-icon:hover { opacity: 1; }
.help-tooltip { position: absolute; bottom: 25px; right: 0; background: var(--color-white); color: var(--color-black); border: 2px solid var(--color-black); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; width: 11rem; white-space: normal; line-height: 1.5; z-index: 1001; opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.3s ease; pointer-events: none; text-align: left; }
.help-tooltip::after { content: ''; position: absolute; top: 100%; right: 0; border: 0.5rem solid transparent; border-top-color: var(--color-black); }
.help-icon:hover .help-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
/* PC hover 表示 */
@media (hover: hover) and (pointer: fine) {
.help-icon:hover .help-tooltip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
}
/* JS/jQuery で制御する表示 */
.help-icon.show-tooltip .help-tooltip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.status-value { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.percentage { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--primary-green); }
.reading-content { display: flex; flex-direction: column; justify-content: center; padding: 4rem 0 2.5rem; background: transparent; /*min-height: 360px; margin-top: 2.5rem; */ position: relative; overflow: visible; }



 /* ===== TOOLTIP STYLES ===== */
.reading-tooltip { position: absolute; top:0; left: 50%; transform: translateX(-50%); background: var(--color-black); color: var(--color-white); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-family: var(--font-primary); font-size: 0.9rem !important; font-weight: 600; width: 12rem; white-space: normal; text-align: center; line-height: 1.3; z-index: 1000; opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; display: block; }
.reading-tooltip::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: 0.5rem solid transparent; border-bottom: none; border-top: 10px solid var(--color-black); }
.reading-tooltip.hidden { opacity: 0; transform: translateX(0) translateY(-10px); pointer-events: none; display: none; }
.text-line { font-family: var(--font-mono); font-size: 1.125rem; line-height: 1.5; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.word { display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s ease; padding:0.75rem clamp(0.5rem,1.2vw,0.75rem); position: relative; transform-style: preserve-3d; perspective: 1000px; text-align: center; vertical-align: top; min-width: fit-content; white-space: nowrap; cursor: pointer; background: transparent; }
.word:hover { transform: translateY(-2px) rotate(1deg) scale(1.05); background: rgba(255, 255, 255, 0.8); }
.word.flipping { animation: flipUp 0.6s ease-in-out forwards; }
@keyframes flipUp { 
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}
.word-blocks { display: none; gap: 0; vertical-align: middle; margin: 0; align-items: center; justify-content: center; }
.wriblo-block { width: 0.8rem; height: 0.8rem; transition: all 0.3s ease; flex-shrink: 0; }
.wriblo-block.white { background: var(--color-white)fff; border: none; }
.wriblo-block.black { background: var(--color-black); border: none; }
.wriblo-block.dot { background: var(--color-black); border: none; position: relative; }
.wriblo-block.dot::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.4rem; height: 0.4rem; background: var(--primary-green); border-radius: 50%; }
.word-text { transition: opacity 0.4s ease; display: inline-block; width: 100%; text-align: center; }
.word.converted .word-text { display: none; }
.word.converted .word-blocks { display: inline-flex; }
.punctuation { display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; font-family: var(--font-mono); height: 2rem; line-height: 2rem; margin: 2px 0; }

.word:focus { outline: none; }
.reset-button:focus { outline: none; }

@media (max-width: 768px) { 
.reader-card { max-width: 100%; padding: 1rem; border-radius: 1rem; }
.status-display { position: static; margin-top: 1rem; width: 100%; text-align: center; align-items: center; justify-content: space-between; flex-direction: row; }
.status-title { text-align: center; justify-content: center; }
.reset-button { position: static; margin-top: 1rem; width: 100%; text-align: center; }
.sample-text-header { flex-wrap: wrap; justify-content: center; }
.sample-text-title { width: 100%; text-align: center; }
}

	
	



/*-- FAQ --*/
.section-badge { display: inline-block; background: var(--color-surface); color: var(--color-black); padding: 0.5rem 1.25rem; border-radius: 1.25rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2rem; }
.section-badge img { width: 1rem; height: 1rem; margin-right: 0.5rem; vertical-align: middle; }
.faq-accordion { }
.faq-item { background: var(--color-white); border: 1px solid var(--color-lightgray); border-radius: var(--radius-md); margin-bottom: 1rem; overflow: hidden; transition: var(--transition); }
.faq-item:hover { border-color: var(--color-lightgray); }
.faq-question { width: 100%; background: none; border: none; padding:clamp(1rem,2.4vw,1.5rem); text-align: left; font-size:clamp(1rem,1.8vw,1.125rem); font-weight: 600; color: var(--color-black); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: var(--transition); }
.faq-question:hover { background-color: var(--color-surface); }
.faq-question[aria-expanded="true"] { background-color: var(--color-surface); border-bottom: 1px solid var(--color-lightgray); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(90deg); }
.faq-question br { display:none; }
.faq-question + p:empty { display:none; }
.faq-icon { transition: transform var(--transition); color: var(--color-dark); flex-shrink: 0; /*margin-left: 1rem;*/ transform: rotate(-90deg); }
.faq-answer { border-top: none; }
.faq-content { padding:clamp(1rem,2.4vw,1.5rem); color: var(--color-dark); font-size:clamp(0.95rem,16vw,1rem); line-height: 1.7; }

body.top .faq-accordion .faq-item:nth-of-type(n + 6) { display:none;}


	
/*-- Blog Section --*/
section.blog { background: var(--color-surface); }
.blog-card { background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); border: 1px solid var(--color-lightgray); height: 100%; display: flex; flex-direction: column; position: relative; margin-bottom: 1.5rem; text-decoration: none; }
.blog-card:hover { transform: translateY(-8px); text-decoration: none; }
.blog-image { width: 100%; aspect-ratio:3/2; overflow: hidden; }
.blog-image img, .text-area .blog-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; }
.blog-content { padding:clamp(1.25rem,3vw,2rem); flex-grow: 1; display: flex; flex-direction: column; position:relative; }
.blog-meta { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.875rem; align-items: center; }
.blog-date { color: var(--color-dark); opacity: 0.7; }
.blog-category { color: var(--color-black); font-weight: 600; background: var(--color-surface); padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); }
.blog-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: var(--color-black); margin-bottom: 1rem; line-height: 1.3; }
.blog-excerpt { color: var(--color-dark); font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; max-height:6.4rem; }

.blog-link { color: var(--color-black); text-decoration: none; font-weight: 600; transition: var(--transition); align-self: flex-start; margin-top:auto; }
.blog-link:hover { color: var(--color-dark); transform: translateX(4px); }
.blog-link:focus { outline: 2px solid var(--color-black); outline-offset: 2px; }
.list-group-item, .pagination, .page-link, .pagination .page-link.disabled { background: none; }
.pagination .page-link.disabled { opacity:0.3; }


/* ===== CTA SECTION ===== */
#cube-canvas { width:clamp(15rem,30vw,20rem); height:clamp(15rem,30vw,20rem); display: block; margin: auto; }
	



/* Wriblo Alphabet Styles */
section.alphabet { padding: 1.5rem 0 0.5rem 0; min-height: auto !important; }
.letter-block { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 2rem; max-width: 3rem; margin-bottom: 1rem; }
.letter-label { font-family: 'JetBrains Mono', monospace; font-size: clamp(0.875rem,1.6vw,1rem); font-weight: 500; text-transform: lowercase; }
.block-pattern { display: flex; flex-direction: column; gap: 1px; padding: 0.25rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.block-pattern:hover { transform: translateY(-2px); box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
.pattern-row { width: clamp(1.25rem,2.4vw,1.5rem); height:clamp(1.25rem,2.4vw,1.5rem); border-radius: 3px; display: flex; align-items: center; justify-content: center; position: relative; }
.pattern-row.white { background-color: var(--color-white); }
.pattern-row.black { background-color: var(--color-dark); }
.pattern-row.dot { background-color: var(--color-dark); }
.pattern-row.dot::after { content: ''; position: absolute; width:clamp( 0.625rem,1.2vw,0.75rem); height: clamp( 0.625rem,1.2vw,0.75rem); background-color: var(--primary-green); border-radius: 50%; }

@media (max-width: 992px) { 
section.alphabet .container { max-width: 100vw !important; }
}





 /* Footer Styles */
.footer { background-color: var(--color-dark); color: white; padding: 3rem 0 1.5rem; }
.footer-logo { display: block; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: white; margin-bottom: 1rem; position: relative; line-height: 1; text-decoration: none; }
.footer-logo img { max-width:12rem; }
.footer-description { color: var(--color-gray); line-height: 1.6; margin-bottom: 1.5rem; }
.social-links { display: flex; gap: 1rem; }
.social-link { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: white; text-decoration: none; transition: all 0.3s ease; }
.social-link:hover { background-color: var(--primary-green); color: var(--color-dark); transform: translateY(-2px); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--color-gray); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--primary-green); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.footer-copyright { color: var(--color-gray); font-size: 0.9rem; margin: 0; }

.pagetop { position:fixed; bottom:0; right:0; width: 3rem; font-size:0.875rem; height:6rem; padding-top:0.75rem; border-radius: 1rem 0 0 0; text-decoration: none; writing-mode:vertical-rl; z-index:10000; color:rgba(0,0,0,0.7); display: flex; flex-flow: column nowrap; justify-content: center; mix-blend-mode: difference; }
.pagetop::before { content:"TOP"; /*text-shadow:1px 1px 0 rgba(255,255,255,0.8);*/ color: var(--color-white); }
.pagetop::after { content:""; position:absolute; top:1rem; left:1.5rem; bottom:0; margin-top:2rem; border-right:1px solid var(--color-white); /*box-shadow:1px 0 0 rgba(255,255,255,0.8);*/ }
.pagetop:hover { opacity: 0.7; }

@media (max-width: 768px) { 
.footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
.social-links { justify-content: center; }
}




/* Detail Page*/
body.temp .text-area { padding-top: 1rem; }

.text-area img { max-width:100%; height:auto;}
img.alignright { float:right; max-width:40%; margin-left:5%; }
img.alignleft { float:left; max-width:40%; margin-right:5%; }


.breadcrumb-item + .breadcrumb-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* Cookie Banner Styles */
.cookie-banner { position: fixed; bottom:0; left:clamp(0.75rem,2.4vw,1.5rem); right:clamp(0.75rem,2.4vw,1.5rem); background: white; box-shadow: 0 -0.25rem 0.75rem rgba(0,0,0,0.15); z-index: 10000; padding: clamp(1.25rem,2.4vw,1.5rem); transform: translateY(100%); transition: transform 0.4s ease-out; border-radius: 1rem 1rem 0 0; }
.cookie-banner.show { transform: translateY(0); }
.cookie-content { /*max-width: 1200px;*/ margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.cookie-header { display: flex; align-items: flex-start; gap: 1rem; }
.cookie-icon { width: 2rem; height: 2rem; background: var(--color-dark); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.cookie-icon i { color: var(--color-white); }
.cookie-text { flex: 1; }
.cookie-title { font-size: 18px; font-weight: 600; color: var(--color-dark); margin-bottom: 0.5rem; }
.cookie-description { color: var(--color-text-muted); line-height: 1.5; margin-bottom: 1rem; }
.cookie-link { color: var(--color-dark); text-decoration: underline; font-weight: 500; }
.cookie-link:hover { color: var(--color-text-muted); }
.cookie-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cookie-button { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; min-width: 7.5rem; }
.cookie-button.primary { background: var(--color-dark); color: white; border: 2px solid var(--color-dark); }
.cookie-button.primary:hover { background: var(--color-dark); border-color: var(--color-dark); transform: translateY(-1px); }
.cookie-button.secondary { background: white; color: var(--color-dark); border: 2px solid var(--color-lightgray); }
.cookie-button.secondary:hover { background: var(--color-surface); border-color: var(--color-gray); }
.cookie-button.outline { background: transparent; color: var(--color-dark); border: 2px solid var(--color-dark); }
.cookie-button.outline:hover { background: var(--color-surface); }

/* Preferences Modal */
.preferences-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10001; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.preferences-modal.show { display: flex; }
.modal-content { background: white; border-radius: 0.75rem; max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative; }
.modal-header { padding:clamp(1rem,2.4vw,1.5rem); border-bottom: 1px solid var(--color-surface); flex-flow: column wrap; align-items: flex-start; }
.modal-title { font-size: 1.5rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.5rem; }
.modal-subtitle { color: var(--color-text-muted); /*margin-bottom: 1.5rem;*/ }
.close-button { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-gray); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; }
.close-button:hover { background: var(--color-surface); color: var(--color-text-muted); }
.cookie-category { padding: clamp(1rem,2.4vw,1.5rem); border-bottom: 1px solid var(--color-surface); }
.cookie-category:last-child { border-bottom: none; padding-bottom: 1.5rem; }
.category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.category-title { font-weight: 600; color: var(--color-dark); font-size: 1rem; flex-grow: 1; }
.category-required { display: inline-flex; font-size: 0.75rem; color: var(--color-dark); background: var(--color-surface); padding: 2px 0.5rem; border-radius: 0.25rem; font-weight: 500; border: 1px solid var(--color-lightgray); margin:0 auto 0 0; }
.category-description { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.75rem; }
.category-examples { font-size: 0.75rem; color: var(--color-gray); font-style: italic; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width:3rem; height: 1.5rem; }
.category-header .toggle-switch { margin:0.25rem 0 0.25rem auto; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-lightgray); transition: 0.3s; border-radius: 1.5rem; width: 3rem; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; }
input:checked + .toggle-slider { background: var(--color-dark); }
input:checked + .toggle-slider:before { transform: translateX(1.5rem); }
input:disabled + .toggle-slider { background: var(--color-surface); cursor: not-allowed; }
.modal-footer { padding: clamp(1rem,2.4vw,1.5rem); border-top: 1px solid var(--color-surface); display: flex; gap: 0.75rem; justify-content: flex-end; }


.notification { position: fixed; top:calc(0.5rem + 2px); right: 0.75rem; background: var(--color-dark); color: white; padding: 0.5rem 1.25rem; border-radius: 0.5rem; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15); transform: translateX(30rem); transition: transform 0.3s ease; z-index: 10002; border: 2px solid var(--color-dark); }
body.logged-in .notification { top:calc(0.5rem + 2px + 32px);}
.notification.show { transform: translateX(0); }



@media (max-width: 768px) { 
.cookie-actions { flex-direction: column; }
.cookie-button { width: 100%; text-align: center; }
.modal-content { max-height: calc(100dvh - 3rem); }
.modal-footer { flex-direction: column; }

img.alignright { float:none; max-width:100%; margin-left:5%; }
img.alignleft { float:none; max-width:100%; margin-right:5%; }

}








@media (max-width: 782px) {
body.logged-in .navbar { top:46px; }
body.logged-in section { min-height: calc(100vh - 4.5rem - 46px); }
}	


@media (max-width: 600px) { 
#wpadminbar { position:fixed !important; }
}



@media (prefers-reduced-motion: reduce) { 
* { transition: none !important; animation: none !important; }
.letter-inner,
.hello-letter.flipped .letter-inner,
.step-visual:hover,
.block:hover,
.tower-block:hover,
.shape-block:hover,
.replay-button:hover,
.letter-shape,
.letter-span,
.letter-shape.quick-transition,
.letter-span.quick-transition,
.wriblo-blocks .wriblo-block:hover,
.word,
.word.flipping,
.word:hover { transition: none !important; }
.letter-column { opacity: 1 !important; transform: none !important; }
}


@media print { 
.navbar { position:relative; }
}