/* Creation techniques: the existing public Skill catalog beside the reading desk. */
.zmt-fh .fh-techniques{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;padding:16px 20px 12px;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at 100% 0,#8c784326,transparent 58%),linear-gradient(145deg,#202d2a,#172321 70%,#14201e);color:#f4eddc;box-shadow:inset 0 0 0 1px #ddc49365,inset 0 2px 0 #f4ddb518,0 7px 16px -9px #17231f80;-webkit-font-smoothing:antialiased;scroll-margin-top:24px}
.fh-techniques::before{position:absolute;inset:0;z-index:-1;pointer-events:none;content:"";opacity:.08;background:url('../books/paper-grain.svg') repeat}
.fh-techniques-heading{position:relative;padding-right:100px;min-height:68px}
.fh-techniques .fh-learning-eyebrow{color:#c4ad81}
.zmt-fh .fh-techniques h2{margin:3px 0 0;color:#f6efdf;font:650 clamp(23px,1.55vw,30px)/1.25 "Songti SC","STSong","SimSun",serif;letter-spacing:.025em;white-space:nowrap}
.fh-techniques-wordmark{display:inline-block;margin-left:4px;font:italic 17px/1.2 Georgia,serif;letter-spacing:0;color:#b7a27a;vertical-align:baseline}
.fh-techniques-heading p{position:relative;z-index:1;margin:4px -100px 0 0;color:#b7bbaf;font-size:12px;line-height:1.3;text-wrap:pretty}
.fh-techniques-art{position:absolute;right:0;top:4px;width:98px;height:64px;pointer-events:none;opacity:.85}
.fh-techniques-art::before{position:absolute;inset:-10px;border-radius:50%;content:"";background:radial-gradient(ellipse,#dbc48b12,transparent 65%)}
.fh-techniques-art span{position:absolute;display:grid;place-items:center;width:40px;height:53px;top:8px;border-radius:5px;color:#dbc699;background:linear-gradient(135deg,#b7a27260,#75653d24 70%,#2b352b);box-shadow:inset 0 0 0 1px #dbc59266,inset 0 2px 1px #fff2c735,0 4px 7px #0003;transform:rotate(-19deg)}
.fh-techniques-art span:nth-child(2){left:29px;top:0;transform:rotate(2deg)}
.fh-techniques-art span:nth-child(3){left:58px;transform:rotate(19deg)}
.fh-techniques-art svg{width:23px;height:23px;stroke-width:1.8}
.fh-technique-browser{display:flex;flex:1;flex-direction:column;min-width:0;margin-top:6px}
.fh-technique-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #e0cb9326;margin-bottom:4px}
.fh-technique-toolbar[hidden]{display:none}
.fh-technique-filters,.fh-technique-controls{display:flex;align-items:center;min-width:0}
.fh-techniques .fh-technique-toolbar button{position:relative;appearance:none;min-width:40px;min-height:40px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:#aeb7a9;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer}
.fh-techniques .fh-technique-filters button{font-size:12px;font-family:inherit;line-height:1.4}
.fh-techniques .fh-technique-filters button:first-child{padding-left:2px;padding-right:10px}
.fh-technique-filters button[aria-pressed="true"]{color:#f4dfac}
.fh-technique-filters button[aria-pressed="true"]::after{position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:#ddbd7e;border-radius:2px;content:""}
.fh-technique-filters button:first-child[aria-pressed="true"]::after{left:0}
.fh-techniques .fh-technique-controls button{padding:0;min-width:40px;width:40px;font-size:20px;color:#c6b183}
.fh-techniques .fh-technique-controls button[data-technique-pause]{font-size:14px;letter-spacing:1px}
.fh-techniques .fh-technique-controls button:disabled{opacity:.35;cursor:default}
.fh-techniques .fh-technique-toolbar button:hover{color:#f4dfac;background:#fff6db08}
.fh-technique-list{display:grid;grid-template-rows:repeat(3,64px);gap:6px;min-width:0}
.fh-techniques .fh-technique-row{display:flex;min-width:0;align-items:center;gap:10px;padding:5px 11px;border-radius:10px;text-decoration:none;color:#eedcb7;background:linear-gradient(120deg,#d4c9a609,#d4c9a602);box-shadow:inset 0 0 0 1px #d6c08e38,inset 0 1px 0 #efe0bb0d;transition:opacity .15s ease,transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.fh-technique-row.is-changing{opacity:0;transform:translateY(-2px)}
.fh-technique-badge{display:flex;align-items:center;justify-content:center;flex:none;gap:5px;width:65px;height:38px;border-radius:6px;color:#d7bd86;font-size:12px;background:linear-gradient(140deg,#bfab7b30,#b7a67806);box-shadow:inset 0 0 0 1px #cfb17f57,inset 0 1px 0 #ecdfb332}
.fh-technique-badge svg{width:19px;height:19px}
.fh-technique-row[data-category="title"] .fh-technique-badge{color:#dfbc83;background:linear-gradient(140deg,#aa835b30,#b7a67806)}
.fh-technique-row[data-category="visual"] .fh-technique-badge{color:#c2c58c;background:linear-gradient(140deg,#8f9b5530,#b7a67806);box-shadow:inset 0 0 0 1px #a6b47950}
.fh-technique-copy{flex:1;min-width:0}
.fh-technique-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#f2eddf;font-size:14px;font-weight:550;line-height:1.3;text-wrap:pretty}
.fh-technique-copy small{display:block;margin-top:2px;color:#adb5a8;font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fh-technique-row>.zmt-fh-arrow{flex:none;margin:0;color:#d5b97e}
.fh-technique-row>.zmt-fh-arrow svg{width:17px;height:17px}
.fh-technique-row:hover{background-color:#d7bd8610;box-shadow:inset 0 0 0 1px #dfc79777,0 5px 12px -8px #0008;transform:translateY(-1px)}
.fh-technique-row:hover strong{color:#fff7e4}
.fh-techniques .fh-technique-empty{grid-row:1/4;display:flex;align-items:center;justify-content:center;gap:10px;color:#d3be90;font-size:14px}
.fh-technique-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.zmt-fh .fh-techniques-footer{margin-top:8px;padding-top:8px;border-top:1px solid #dac39130;gap:10px}
.zmt-fh .fh-techniques .fh-techniques-open{display:flex;justify-content:center;gap:7px;min-height:42px;padding:0 13px;border-radius:7px;color:#fff4d9;background:linear-gradient(125deg,#bea36b,#9f8249 65%,#816631);box-shadow:inset 0 0 0 1px #e6ca8e88,inset 0 2px 2px #fff0c44d,0 3px 7px #0003;font:600 13px/1.4 "Songti SC","STSong",serif;white-space:nowrap}
.fh-techniques-open>svg{width:19px;height:19px}.fh-techniques-open .zmt-fh-arrow{margin-left:5px}
.fh-techniques-footer>span{font-size:10px;color:#b7a782;line-height:1.6;text-wrap:balance;max-width:11em}
.zmt-fh .fh-techniques .fh-techniques-open:hover{color:#fff9ea;background-color:#b2995e;box-shadow:inset 0 0 0 1px #f9dea6,0 4px 12px #0003}
.fh-techniques :is(a,button):focus-visible{outline:2px solid #e5c98d;outline-offset:3px}
@media(min-width:1700px){.fh-technique-list{grid-template-rows:repeat(3,70px)}.fh-technique-copy strong{font-size:16px}.fh-technique-copy small{font-size:12px}.fh-technique-badge{width:76px;height:42px;font-size:13px}.fh-techniques-heading p{font-size:14px}.zmt-fh .fh-techniques .fh-techniques-open{font-size:15px}.fh-techniques-footer>span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.fh-techniques *{transition:none!important}.fh-technique-row.is-changing{opacity:1;transform:none}}

.fh-technique-row[data-category="visual"] .fh-technique-badge svg,.fh-technique-row[data-category="visual"] .fh-technique-badge svg *,.fh-techniques-art span:last-child svg,.fh-techniques-art span:last-child svg *{fill:none}