/* Ver.2 builds on the existing paper / sage visual language. */
:root { --v2-ink:#25342d; --v2-muted:#59695e; --v2-line:#c7d0c5; --v2-paper:#f8f8f2; --v2-sage:#e3ebdc; }
[hidden] { display:none!important; }
body { background:#f8f8f2; color:var(--v2-ink); }
button, select, summary { cursor:pointer; }
button:disabled { cursor:default; opacity:.4; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,article:focus-visible,summary:focus-visible {outline:3px solid #668063;outline-offset:4px;}
.sidebar { background:#f5f6ee; border-right:1px solid var(--v2-line); }
.top-rule { background:#b9c8aa;height:8px; }
.brand { box-shadow:3px 3px 0 #cbd4be; }
.brand-dot {background:#adc58d;}
.side-link.is-active {background:#344c3e;border-color:#344c3e;}
.save-pocket {background:#e5e9c9;}
.masthead { min-height:220px; border-bottom:1px solid var(--v2-line);padding:40px 0 30px;gap:20px;}
.masthead h1 {font:700 clamp(29px,3.6vw,54px)/1.5 'Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:-.045em;}
.masthead h1 em {font-style:normal;background:linear-gradient(transparent 72%,#dce4c1 72%);}
.hero-subtitle {font-size:12px;line-height:1.9;color:var(--v2-muted);}
.masthead-note {min-width:170px;max-width:250px;}
.edition-mark {display:block;font:italic 38px/1.2 Georgia,serif;color:#6a7e58;margin-bottom:16px;}
.scribble {font-size:13px;transform:none;border-color:#b5c296;}
.masthead-note p {font-size:11px;color:var(--v2-muted);}
.discovery {padding:24px 28px 18px;background:white;border:1px solid var(--v2-line);margin-bottom:24px;}
.discovery h2 {font-size:19px;margin:0 0 18px;letter-spacing:.015em;}
.discovery .search-box {width:100%;height:60px;background:#f8faf4;border:1px solid #899e82;border-radius:5px;}
.discovery .search-box input {font-size:15px;}
.search-examples {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:13px;font-size:11px;color:var(--v2-muted);}
.search-examples button {border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;padding:5px;color:#4e6645;font-size:11px;}
.category-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible;margin-bottom:18px;}
.category-tab {display:flex;justify-content:space-between;align-items:center;gap:5px;min-width:0;white-space:normal;text-align:left;padding:12px 10px;font-size:12px;line-height:1.6;border:1px solid var(--v2-line);border-radius:3px;background:#fff;box-shadow:none;}
.category-tab small {opacity:.65;font-weight:400;}
.category-tab[aria-pressed=true] {background:#344c3e;color:white;border-color:#344c3e;}
.category-tab:hover {background:#e2ebd9;color:#25342d;}
.v2-filters {display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:11px;}
.v2-filters label {white-space:nowrap;}
.v2-filters select {padding:8px;border:1px solid var(--v2-line);border-radius:3px;background:white;}
#impressionChips {display:flex;flex-wrap:wrap;gap:6px;}
#impressionChips button {border:1px solid transparent;background:transparent;padding:6px 10px;border-radius:20px;font-size:11px;}
#impressionChips button::before {content:'# ';color:#8a9a7f;}
#impressionChips button[aria-pressed=true] {background:#e0ead7;border-color:#91a883;}
.subfilters {margin:12px 0 20px;font-size:11px;color:var(--v2-muted);}
.subfilters summary {padding:7px 0;}
.subfilters .filter-chips {max-height:170px;overflow:auto;margin:8px 0;}
.filter-chip {border:1px solid var(--v2-line);font-weight:500;}
.filter-chip.is-active {background:#56724b;color:#fff;}
.sample-panel {display:grid;grid-template-columns:1fr 1.15fr auto;gap:10px 20px;align-items:center;padding:20px;background:#e9eddf;border-left:3px solid #7d946a;}
.sample-panel h2 {font-size:16px;margin:0 0 6px;}
.sample-panel p {font-size:10px;line-height:1.8;margin:0;}
.sample-panel label {font-size:10px;display:grid;gap:6px;}
.sample-panel input {width:100%;min-width:0;border:1px solid #a5b69a;border-radius:4px;padding:10px;font-size:15px;background:white;}
.sample-panel button {border:0;background:transparent;font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:8px;}
.sample-panel .sample-note {grid-column:1/-1;color:#52624d;}
.result-bar {align-items:center;flex-wrap:wrap;gap:10px;}
.result-actions {flex-wrap:wrap;}
#pauseMotion {border:1px solid var(--v2-line);background:white;padding:6px 9px;font-size:10px;border-radius:3px;}
.card-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.motion-card {min-width:0;border:1px solid var(--v2-line);box-shadow:none;background:white;border-radius:5px;overflow:hidden;}
.motion-card:hover {border-color:#78966b;box-shadow:0 4px 14px #263b2510;transform:translateY(-2px);}
.motion-card .preview {height:auto;aspect-ratio:16/9;background:#f2f3eb;border-bottom:1px solid var(--v2-line);overflow:hidden;}
.card-save {z-index:5;top:8px;left:8px;background:#ffffffed;border:1px solid #c6cdbf;color:#42563b;}
.card-save.is-saved {background:#e9eabf;}
.card-id {top:13px;left:47px;right:auto;color:#5e6956;font-size:9px;background:#ffffffe0;padding:2px 4px;z-index:4;}
.compare-pick {position:absolute;top:8px;right:8px;z-index:5;border:1px solid #c6cdbf;border-radius:3px;background:#ffffffed;padding:5px 7px;font-size:9px;}
.compare-pick.is-picked {background:#344c3e;color:white;border-color:#344c3e;}
.card-info {padding:13px 14px 16px;min-height:112px;}
.card-info p {font-size:13px;line-height:1.7;margin:5px 0;font-weight:700;}
.card-info small {display:block;font-size:10px;line-height:1.6;color:#66735e;}
.card-info .v2-category {color:#7d8b71;font-size:9px;letter-spacing:.04em;}
.card-info .category-dot {display:none;}
.card-info .english-name {font:11px/1.6 Georgia,serif;letter-spacing:.025em;}
.preview .type-specimen {height:100%;width:100%;}
.preview .type-specimen svg {height:100%;width:100%;}
.preview .type-image {margin:0;}
.media-specimen {height:100%;width:100%;margin:0;position:relative;background:#edf0e6;overflow:hidden;}
.media-specimen img,.media-specimen video {width:100%;height:100%;object-fit:contain;display:block;}
.media-specimen figcaption {position:absolute;bottom:0;left:0;right:0;padding:5px 8px;background:#ffffffed;color:#384b32;font-size:9px;line-height:1.7;pointer-events:none;}
.media-pending figcaption {padding:9px 10px;background:#fbfcf3f0;}
.media-pending figcaption b {display:block;font-size:11px;}
.media-pending figcaption span {display:block;font-size:9px;}
.grade-monochrome {filter:grayscale(1);}
.grade-sepia {filter:sepia(.85) saturate(.75);}
.grade-desaturated {filter:saturate(.3);}
.preview .motion-scene, .preview .caption-scene {background:#fff;}
.preview .motion-text {max-width:90%;font-size:clamp(13px,1.55vw,23px);overflow-wrap:anywhere;text-align:center;}
.preview .caption-line {max-width:92%;font-size:clamp(12px,1.5vw,24px);white-space:normal;flex-wrap:wrap;justify-content:center;}
.preview .caption-scene {padding-left:10px;padding-right:10px;}
.preview .font-sample {max-width:90%;font-size:clamp(16px,2.1vw,31px);overflow-wrap:anywhere;}
#fontIntro {font-size:12px;}
#fontIntro label {display:none;}
#pagination {display:flex;justify-content:center;align-items:center;gap:24px;padding:30px 0;font-size:12px;}
#pagination button,.comparison-dialog button,.difference-block button {border:1px solid #bdcbbb;background:white;border-radius:4px;padding:9px 14px;font-size:11px;}
.comparison-tray {position:fixed;bottom:18px;left:calc(50% + 100px);transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fafff2;box-shadow:0 5px 30px #203b2630;border:1px solid #8da47e;border-radius:6px;font-size:12px;}
.comparison-tray button {border:1px solid #344c3e;background:#344c3e;color:white;border-radius:4px;padding:10px 14px;white-space:nowrap;font-size:11px;}
.comparison-tray #clearComparison {background:transparent;color:#425a37;border-color:transparent;}
.comparison-dialog {width:min(1180px,95vw);max-height:90vh;border:1px solid #6e8562;border-radius:8px;padding:24px;color:var(--v2-ink);background:#f9faf5;}
.comparison-heading {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.comparison-heading h2 {flex:1;font-size:21px;}
#comparisonNote {font-size:12px;line-height:1.8;color:#64715c;}
#comparisonGrid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
#comparisonGrid article {min-width:0;background:white;border:1px solid #d3dccb;border-radius:4px;padding:12px;}
#comparisonGrid .preview {height:auto;aspect-ratio:16/9;overflow:hidden;}
#comparisonGrid h3 {font-size:15px;line-height:1.6;}
#comparisonGrid p {font-size:12px;line-height:1.85;}
.compare-difference {background:#eef2e7;padding:10px;}
.difference-block {background:#f0f3e9;padding:12px 15px;margin:18px 0;}
.difference-block h3 {font-size:12px;margin:0 0 7px;}
.difference-block p {font-size:12px;line-height:1.85;}
#relatedItems {display:flex;flex-wrap:wrap;gap:5px;}
#relatedItems button {font-size:10px;padding:6px 8px;}
.dialog-preview {aspect-ratio:16/9;}
.dialog-preview .motion-text,.dialog-preview .caption-line {font-size:clamp(18px,3vw,38px);}
.motion-paused .preview * {animation-play-state:paused!important;}
footer {padding-bottom:55px;}
@media(min-width:1500px){.page{max-width:1600px;margin-right:auto}.category-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){.masthead-note{display:none}.sample-panel{grid-template-columns:1fr 1.2fr}.sample-panel button{grid-column:2}.sample-panel .sample-note{grid-row:3}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v2-filters{align-items:flex-start;flex-direction:column}.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.preview .motion-text,.preview .caption-line{font-size:21px;}}
@media(max-width:760px){.sidebar{position:relative;width:auto;inset:auto;padding:14px 18px;border-right:0;border-bottom:1px solid var(--v2-line);display:flex;flex-direction:row;gap:18px;align-items:center}.brand{padding:8px 10px;box-shadow:none;flex:none}.brand-kicker,.brand-dot,.save-pocket,.side-note{display:none}.brand-mark{font-size:16px;margin:0;line-height:1.25}.side-nav{display:flex;margin:0;gap:4px;flex-wrap:wrap}.side-link{min-height:38px;font-size:10px;grid-template-columns:auto auto auto;padding:5px}.side-icon{font-size:13px}.page{margin-left:0;padding:0 16px}.top-rule{margin:0 -16px;height:4px}.masthead{min-height:auto;padding:26px 0 22px}.masthead h1{font-size:32px}main{padding-top:20px}.discovery{padding:20px 15px}.discovery h2{font-size:17px}.discovery .search-box input{font-size:13px}.search-box kbd{display:none}.category-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.category-tab{font-size:10px;padding:9px 6px}.sample-panel{grid-template-columns:1fr;padding:16px;gap:12px}.sample-panel button{grid-column:auto;justify-self:start}.sample-panel .sample-note{grid-row:auto}.card-grid{gap:12px}.card-info{padding:10px;min-height:130px}.card-info p{font-size:12px}.card-id{display:none}.compare-pick{font-size:8px;padding:4px}.card-save{width:25px;height:25px;font-size:17px}.preview .motion-text,.preview .caption-line{font-size:15px}.preview .font-sample{font-size:20px}.media-pending figcaption span{display:none}.media-pending figcaption b{font-size:9px}.comparison-tray{left:50%;width:calc(100% - 24px);gap:8px;padding:10px;font-size:10px}.comparison-tray button{padding:8px;font-size:10px}.comparison-dialog{padding:15px}#comparisonGrid{grid-template-columns:1fr}.comparison-heading h2{font-size:18px}.result-actions{max-width:100%}.speed-control{flex-wrap:wrap}.type-intro{display:none!important}}
@media(max-width:400px){.card-grid{grid-template-columns:1fr}.preview .motion-text,.preview .caption-line{font-size:23px}.card-info{min-height:100px}.side-count{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.preview *{animation:none!important;transition:none!important}.motion-card:hover{transform:none}}
.development-status {font-size:11px;line-height:1.8;color:#6a705a;background:#f0f0de;padding:10px 13px;border-left:2px solid #b4bc89;}
.browser-fx {position:relative;width:100%;height:100%;perspective:650px;background:#edf0e5;display:grid;place-items:center;overflow:hidden;}
.fx-plane {position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.fx-plane img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fx-after {filter:grayscale(1);}
.fx-dissolve .fx-after,.fx-cut .fx-after {opacity:0;}
.fx-wipe .fx-after {clip-path:inset(0 100% 0 0);}
.browser-fx:not(.fx-dissolve):not(.fx-cut):not(.fx-wipe) .fx-plane {width:72%;height:72%;}
.browser-fx:not(.fx-dissolve):not(.fx-cut):not(.fx-wipe):not(.fx-cube) .fx-after {transform:rotateY(180deg);backface-visibility:hidden;filter:none;}
.browser-fx:not(.fx-dissolve):not(.fx-cut):not(.fx-wipe) .fx-before {backface-visibility:hidden;}
.fx-cube .fx-plane {width:45%;height:75%;}
.fx-cube .fx-before {transform:translateZ(65px);}
.fx-cube .fx-after {transform:rotateY(90deg) translateZ(65px);filter:none;}
.fx-caption {position:absolute;bottom:0;left:0;right:0;background:#ffffffe8;font-size:9px;padding:6px 8px;z-index:3;}
@media(prefers-reduced-motion:reduce){.fx-dissolve .fx-after,.fx-cut .fx-after{opacity:1}.fx-wipe .fx-after{clip-path:inset(0)}}

/* Finding an expression and taking its prompt share the same card. */
.library-guide{display:flex;gap:12px 26px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 24px;color:#40543d;font-size:12px;line-height:1.8}
.library-guide span{font-size:10px;color:#74816b;margin-right:6px}
.sample-panel[hidden]{display:none}
.card-info .card-explanation{color:#414c3c;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.8;min-height:3.6em}
.card-prompt-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.card-prompt-actions button{font:inherit;font-size:11px;line-height:1.5;border:1px solid #c4cebc;background:#f3f5ee;color:#34472e;border-radius:5px;padding:8px 10px;cursor:pointer}
.card-prompt-actions .card-open{background:transparent;border-color:transparent;padding:8px 0}
.card-prompt-actions button:hover{background:#e7eddf}
.card-prompt-actions button:focus-visible{outline:2px solid #4d6943;outline-offset:3px}
.sample-result-details{font-size:12px;line-height:1.8;color:#67715e;margin:16px 0}
.sample-result-details summary{cursor:pointer}
.sample-result-details p{white-space:pre-line}

#relatedItems .related-technique{display:flex;flex-wrap:wrap;align-items:center;gap:6px;border-bottom:1px solid #e1e5dc;padding:6px 0;width:100%}
#relatedItems .related-compare{margin-left:auto;color:#36582d;background:#e9efdf;font-weight:600}

.availability-note{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;border:1px solid #c7d0c5;background:#f5f7ef;padding:12px 15px;margin:15px 0}
.availability-note p{margin:0;font-size:11px;line-height:1.8;color:#53654b}
.availability-note .development-status{font-weight:600;width:100%;padding:0;background:none;border:0}
.availability-note button{padding:7px 10px;font:inherit;font-size:11px;border:1px solid #9daf90;background:white;border-radius:4px;color:#36502f}