@charset "UTF-8";
:root{color-scheme:light;--bg:#f2efe8;--surface:#faf8f3;--text:#252720;--muted:#717167;--line:#cecec2;--accent:#a3422d;--serif:Georgia,"Times New Roman",serif;font-family:Arial,"Malgun Gothic",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.5}button,input,textarea,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.shell{max-width:1760px;margin:auto;padding:0 clamp(20px,4.5vw,80px) 230px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;border-bottom:1px solid var(--text)}.brand{font-size:15px;font-weight:700;letter-spacing:.18em;text-decoration:none}.brand em{font-family:var(--serif);font-size:22px;letter-spacing:-1px;font-weight:400}.masthead-right{display:flex;align-items:center;gap:22px}.edition-label,.result-count{font-family:Consolas,monospace;font-size:11px;letter-spacing:.08em;color:var(--muted)}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px 0 27px}.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,6vw,96px);line-height:1.06;letter-spacing:-.055em;margin:0}.intro h1 em{font-weight:400;color:var(--accent)}.intro p{font-size:13px;color:var(--muted);margin:14px 0 0}.collection-number{text-align:right;min-width:90px}.collection-number strong{display:block;font:italic 54px/1 var(--serif);letter-spacing:-3px}.collection-number span{font:10px Consolas,monospace;letter-spacing:.14em}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}.copy-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.mode-switch{display:flex;border:1px solid var(--line);padding:3px;gap:3px}.mode-button{border:0;background:transparent;color:var(--muted);padding:8px 14px;font-size:12px}.mode-button[aria-pressed=true]{background:var(--text);color:var(--surface)}.mode-help{font-size:12px;color:var(--muted);margin:0}.search-wrap{display:flex;align-items:center;gap:12px;min-width:160px;width:230px;border-bottom:1px solid var(--text);padding:7px 0}.search-wrap svg{width:17px;height:17px;fill:none;stroke:var(--text);stroke-width:1.6;flex:none}.search-wrap input{background:transparent;border:0;color:var(--text);width:100%;min-width:0;font-size:13px;padding:3px}.search-wrap input::placeholder{color:var(--muted)}
.filter-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}.category-filter{display:flex;flex-wrap:wrap;gap:6px 18px}.category-tab{display:flex;align-items:baseline;gap:5px;padding:6px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);font-size:12px}.tab-count{font:10px Consolas,monospace;opacity:.7}.category-tab[aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}.category-tab:hover{color:var(--text)}.result-count{white-space:nowrap;padding-top:8px}.gallery{display:grid;gap:54px}.section-heading{font:italic 22px var(--serif);font-weight:400;display:flex;align-items:center;gap:10px;margin:0 0 18px}.section-heading:after{content:"";height:1px;background:var(--line);flex:1;margin-left:8px}.section-count{font:11px Consolas,monospace;color:var(--muted)}.orientation-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px;align-items:start}.landscape .orientation-group{grid-template-columns:repeat(3,minmax(0,1fr))}.card{min-width:0}.card-button{display:block;width:100%;padding:0;text-align:left;border:0;background:transparent;color:var(--text)}.image-wrap{display:block;position:relative;background:#e4e0d6;outline:1px solid #25272015;outline-offset:-1px;transition:box-shadow .2s,transform .2s}.image-wrap img{display:block;width:100%;height:auto}.card-button:hover .image-wrap{transform:translateY(-3px);box-shadow:0 9px 18px #2527201a}.card-button.is-collected .image-wrap{outline:3px solid var(--accent);outline-offset:3px}.card-button.is-collected .image-wrap:after{content:"✓";position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;font:14px Arial}.code-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 0 10px;border-bottom:1px solid var(--line)}.code-row code{font:13px Consolas,"Courier New",monospace;overflow-wrap:anywhere}.code-row code span{color:var(--muted);font-size:11px}.copy-mark{font:22px var(--serif);color:var(--accent)}.card-button.is-collected .copy-mark{font-size:0}.card-button.is-collected .copy-mark:after{content:"✓";font:14px Arial}.empty{padding:60px 10px;text-align:center;color:var(--muted)}.empty button{background:none;border:1px solid var(--line);padding:10px 16px}.page-footer{margin-top:64px;border-top:1px solid var(--text);padding-top:20px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.collection-dock{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(850px,calc(100% - 32px));background:var(--text);color:#f9f7f0;padding:18px 22px;z-index:15;box-shadow:0 10px 36px #25272030}.dock-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.dock-title{display:flex;align-items:baseline;gap:9px;font-size:13px}.dock-title strong{font:italic 23px var(--serif);color:#ecb6a1}.dock-actions{display:flex;gap:8px}.dock-actions button{font-size:12px;padding:8px 14px;border:1px solid #777b6d;background:transparent;color:inherit}.dock-actions .copy-all{background:#f2efe8;color:var(--text);border-color:#f2efe8}.collection-value{width:100%;background:transparent;color:#ece6d9;border:0;border-bottom:1px solid #62665b;padding:9px 0 6px;font:12px Consolas,monospace;resize:none;height:32px;display:block}.collection-value::placeholder{color:#b4b7a9}.collection-hint{font-size:11px;color:#b4b7a9;margin:9px 0 0}.code-chips{display:flex;gap:7px;overflow-x:auto;max-height:46px;margin-top:10px;padding-bottom:3px}.code-chip{flex-shrink:0;border:1px solid #5a5e51;background:transparent;color:#ece6d9;padding:4px 7px;font:11px Consolas,monospace}.toast{position:fixed;left:50%;bottom:190px;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--accent);color:#fff;padding:10px 17px;font-size:12px;z-index:30;max-width:calc(100% - 30px);transition:.18s;text-align:center;width:max-content}.toast.visible{opacity:1;transform:translate(-50%,0)}.manual-copy{position:fixed;left:50%;bottom:200px;transform:translateX(-50%);width:min(650px,calc(100% - 30px));background:var(--surface);padding:20px;border:1px solid var(--accent);z-index:35;box-shadow:0 10px 40px #0002}.manual-copy label{display:block;font-size:13px}.manual-copy textarea{width:100%;height:85px;margin-top:10px}.manual-copy button{float:right}.sr-only,.clipboard-fallback{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-80px;left:20px;z-index:40;background:var(--text);color:white;padding:10px 20px}.skip:focus{top:10px}
@media(min-width:1500px){.portrait .orientation-group{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.orientation-group{grid-template-columns:repeat(3,minmax(0,1fr))}.landscape .orientation-group{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-help{display:none}.intro h1{font-size:68px}.filter-row{display:block}.result-count{display:block;margin-top:8px}}
@media(max-width:600px){.shell{padding-bottom:225px}.masthead{min-height:66px}.edition-label{display:none}.brand{font-size:12px;letter-spacing:.1em}.brand em{font-size:20px}.intro{padding:25px 0}.intro h1{font-size:49px}.intro p{font-size:11px;max-width:230px}.collection-number{min-width:42px}.collection-number strong{font-size:39px}.collection-number span{font-size:8px}.toolbar{flex-wrap:wrap;gap:13px}.search-wrap{width:100%}.copy-controls{width:100%}.mode-switch{width:100%}.mode-button{flex:1}.category-filter{gap:3px 15px}.orientation-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.landscape .orientation-group{grid-template-columns:1fr}.gallery{gap:35px}.code-row code{font-size:12px}.code-row code span{font-size:10px}.code-row{gap:4px}.collection-dock{bottom:10px;padding:13px 16px}.dock-title{font-size:11px}.dock-actions button{padding:8px 9px;font-size:11px}.collection-hint{font-size:10px}.page-footer span:last-child{display:none}.toast{bottom:180px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* Reserve dock space only while collecting codes. */
body:not(.collecting) .shell{padding-bottom:55px}body:not(.collecting) .toast{bottom:25px}#close-collection{font-size:20px;line-height:1;padding:5px 9px}

.sula-about-link{font-size:12px;text-decoration:none;white-space:nowrap;padding:8px 0;border-bottom:1px solid var(--line)}.sula-about-link:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:600px){.sula-about-link{font-size:10px}.masthead-right{gap:0}}

/* A quiet, permanent entry to the tutorial, separate from the code collection. */
.tutorial-resource{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;margin:0 0 20px;background:var(--surface);border-left:2px solid var(--accent)}
.tutorial-caption{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}.tutorial-label{font:10px Consolas,monospace;letter-spacing:.13em;color:var(--accent)}.tutorial-title{font-size:13px}.tutorial-title small{font-size:10px;color:var(--muted);margin-left:9px;white-space:nowrap}
.tutorial-actions{display:flex;gap:8px 20px;flex-wrap:wrap;flex-shrink:0}.tutorial-actions a{font-size:12px;text-decoration:none;white-space:nowrap;padding:7px 0;border-bottom:1px solid var(--line)}.tutorial-actions .tutorial-view{color:var(--accent)}.tutorial-actions a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:700px){.tutorial-resource{align-items:flex-start;flex-direction:column;gap:6px;padding:12px 15px}.tutorial-caption{gap:4px 12px}.tutorial-label{font-size:9px}.tutorial-actions{gap:22px}}

/* Sula's atelier / sref code wordmark. */
.brand{display:inline-flex;align-items:baseline;flex-wrap:wrap;font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.04em;line-height:1.3}.brand em{font-family:Consolas,monospace;font-size:11px;font-style:normal;font-weight:400;letter-spacing:-.03em;margin-left:5px;white-space:nowrap}
@media(max-width:600px){.masthead{flex-wrap:wrap;padding:14px 0;gap:8px 14px}.masthead-right{margin-left:auto}.brand{font-size:23px}.brand em{font-size:10px}}